时间戳

首页 > 解决方案 > Converting from type: 'image/png' to ZPL in NodeJs

javascript - Converting from type: 'image/png' to ZPL in NodeJs

问题描述

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:

  1. 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"}.

  2. 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)

标签： javascriptnode.jsimagezpl

解决方案

将通用图像转换为 ZPL 可用的东西并非易事，并且不能用几行伪代码来描述。相反，我已经将这段代码搁置了一段时间，您的问题促使我清理它并使其可用：

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

或者

npm install zpl-image

适用于浏览器和 node.js。在浏览器中，您传入一个<img>or<canvas>元素并以 ZPL 使用的 Z64 压缩 GRF 格式取回渲染图像。

用于打印图像的 ZPL 和斑马打印机的其他内容如下所示：

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

推荐阅读