Converting from type: 'image/png' to ZPL i

What I'm doing and trying:

I'm trying to convert a screenshot taken from a < div > into ZPL string in NodeJS. Pretty much like http://labelary.com/viewer.html that would take an image and output ZPL code.

What I'm doing:

I'm using a package called 'domToImage'(https://github.com/tsayen/dom-to-image), which takes a screenshot of the DOM I'm stating. I'm currently using the domToImage.toBlob() function which then returns Blob{size: 102776, type: "image/png"}.
For testing to see it actually works I used 'FileSaver'(https://www.npmjs.com/package/file-saver) to save the file as PNG, it truly works and the picture looks great !!

Here is an easy sample code of what I'm doing

domtoimage.toBlob(document.getElementById('labelInfo'))
.then(function (blob)
{
    console.log(blob)
    saveAs(blob, "test.png");
});

What I'm trying to do is convert that "blob" into ZPL string or format so I can send that to a printer in the network.

What I've tried:

A) I tried installing image-to-zpl(https://www.npmjs.com/package/image-to-zpl) but I think I might be doing something wrong because I'm unable to require it like any other module I was able to install, I get an error saying : Could not find a declaration file for module 'image-to-zpl'. '/path/to/node_modules/image-to-zpl/index.js' implicitly has an 'any' type. I even tried using import instead of require but no luck.

B) I found a code in Java(http://www.jcgonzalez.com/java-image-to-zpl-example) but I'm barely understanding anything and I don't know how to send data from my application, into the Java file then take the string back to the app with NodeJS (I'm a noob).

C) I looked into Labelarys API but all it does is take ZPL into PDF or PNG but not vise versa unfortunately.

D) Thought of using zbtprinter (https://github.com/bstmedia/zbtprinter/) as it actually has the function I need but unfortunately it would send it to a printer using bluetooth directly and not output the ZPL, which in my case can't be used since the printer doesnt have bluetooth. It is on the network. Which also I'm still going to have to learn how to send the whole string directly to a printer through the network :/

I'm in desperate need of help guys pls

EDIT

So this is what I'm doing in the HTML:

<div style="width: 1000px" class="labelInfo" id="labelInfo">
   <img src="images/template.bmp" style="max-width: 100%; max-height: 100%">
   <div class="ref"> {{ referenceNumber }} </div>
   <div class="serial">{{ serialNumber }}</div>
   <div class="date" id="date">{{ yearMonth }}</div>
   <canvas class="qr" id="canvas"></canvas>
</div>

Description: I'm using a template of an image with all the logos with empty parts of the label that get filled up with the 3 divs; I have 3 divs, based on the users input, those fields gets placed at specified places within the template of the image; the canvas is used for a QR code to be placed depending on the content of the Serial Number.

When the user clicks on a button, the backend code then takes an image of the whole 'labelInfo' div which should then be converted to ZPL in order to be sent to the printer (This is what I'm trying to achieve)

Converting a generic image to something usable by ZPL is non-trivial and can't be described in a few lines of pseudo-code. Instead, I've had this code sitting around for a while and your question prompted me to clean it up and make it available:

https://github.com/metafloor/zpl-image

npm install zpl-image

Works in both the browser and node.js. In the browser, you pass in an <img> or <canvas> element and get back the rendered image in the Z64 compressed GRF format used by ZPL.

The ZPL to print the image and nothing else to a zebra printer would look like:

// image is a <img> or <canvas>
let res = imageToZ64(image);

let zpl = `
^XA^LH0,0^FWN^PON^PMN^LRN
^FO10,10^GFA,${res.length},${res.length},${res.rowlen},${res.z64)
^XZ`;