javascript - Converting from type: 'imagepng' to ZPL in NodeJs - Stack Overflow

admin管理员组

文章数量:1400112

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 .html that would take an image and output ZPL code.

What I'm doing:

1. I'm using a package called 'domToImage'(), 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"}.

2. For testing to see it actually works I used 'FileSaver'() 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() 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() 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 (/) 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)

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./viewer.html that would take an image and output ZPL code.

What I'm doing:

1. I'm using a package called 'domToImage'(https://github./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"}.

2. For testing to see it actually works I used 'FileSaver'(https://www.npmjs./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./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./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./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)

• javascript
• node.js
• image
• zpl

Share Improve this question Follow edited Sep 6, 2019 at 10:48 KZander asked Sep 6, 2019 at 9:44 KZanderKZander 28044 silver badges1818 bronze badges 9

• This sounds like an XY problem; converting text-based div content to a PNG, then running OCR over that to go back to ZPL seems very weird. It sounds like you have a website with a label built from HTML and want to print it on a network printer? (in case it's not clear: turning ZPL into pixels is very simple, turning pixels into ZPL is a massive task) – user5734311 Commented Sep 6, 2019 at 9:51
• @ChrisG is it possible to just send the whole image to a ZPL printer instead ? I have almost 0 knowledge of ZPL as a language.. Ill edit to show exactly what I'm doing in the html – KZander Commented Sep 6, 2019 at 10:37
• @ChrisG can i use raw pixel data instead of a png to convert that into ZPL (Or send the pixel data to a printer) ? – KZander Commented Sep 6, 2019 at 12:46
• Again, the backend code then takes an image of the whole 'labelInfo' div seems like a step in the wrong direction. If you need a ZPL string. However, why do you need a ZPL string in the first place? Correct me if I'm wrong, but it sounds like you want to print a <div> on a network printer? Why not print the PNG? Why does ZPL even enter the picture? – user5734311 Commented Sep 8, 2019 at 15:09
• @ChrisG because it is a ZPL printer. If it it is possible to print a PNG directly to a printer I'd be happy to do that but I can't find how to do that anywhere using Javascript and sending mands to a printer within the network – KZander Commented Sep 9, 2019 at 6:10

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 7

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./metafloor/zpl-image

or

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 pressed 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`;

本文标签： javascriptConverting from type 39imagepng39 to ZPL in NodeJsStack Overflow