在NodeJs中从类型:"image/png"转换为ZPL [英] Converting from type: 'image/png' to ZPL in NodeJs
问题描述
我在做什么和正在尝试:
我正在尝试转换从<div>转换为NodeJS中的ZPL字符串.类似于 http://labelary.com/viewer.html ，它会拍摄图像并输出ZPL代码.
我在做什么:
-
我正在使用一个名为"domToImage"的软件包( https://github.com/tsayen/dom-to-image )，它是我要说明的DOM的屏幕截图.我目前正在使用domToImage.toBlob()函数，该函数然后返回Blob {size:102776，键入:"image/png"}.
-
为了测试它是否确实有效，我使用了'FileSaver'( https://www.npmjs.com/package/file-saver )将文件另存为PNG，它确实有效，图片看起来很棒！
这是我正在做的简单示例代码
domtoimage.toBlob(document.getElementById('labelInfo')).then(函数(blob){console.log(blob)saveAs(blob，"test.png");}); 我要做的是将"blob"转换为ZPL字符串或格式，以便将其发送到网络中的打印机.
我尝试过的操作:
A)我尝试安装image-to-zpl( https://www.npmjs.com/package/image-to-zpl )，但我认为我可能做错了，因为我无法像安装其他模块一样要求它，但出现错误消息:找不到模块"image-to-zpl"的声明文件."/path/to/node_modules/image-to-zpl/index.js"隐式具有"any"类型.我什至尝试使用import代替require，但是没有运气.
B)我在Java中找到了一个代码( http://www.jcgonzalez.com/java-image-to-zpl-example )，但我几乎什么都不懂，也不知道如何将应用程序中的数据发送到Java文件中，然后将字符串返回给NodeJS的应用程序(我是菜鸟).
C)我研究了Labelarys API，但所做的只是将ZPL转换为PDF或PNG，但不幸的是，反之亦然.
D)考虑使用zbtprinter( https://github.com/bstmedia/zbtprinter/)，因为它实际上具有我需要的功能，但不幸的是，它将直接使用蓝牙将其发送到打印机，而不会输出ZPL，在我的情况下，由于打印机没有蓝牙，因此无法使用ZPL.它在网络上.我仍然还必须学习如何通过网络将整个字符串直接发送到打印机:/
我迫切需要帮助人员
EDIT
这就是我在HTML中所做的:
< div style ="width:1000px" class ="labelInfo" id ="labelInfo">< img src ="images/template.bmp" style =最大宽度:100％；最大高度: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> 说明:我使用的是图像模板，其中所有徽标的标签上的空白部分都被3个div填充了；根据用户输入，我有3个div，这些字段放置在图像模板内的指定位置；画布用于根据序列号的内容放置QR码.
当用户单击按钮时，后端代码然后获取整个'labelInfo'div的图像，然后应将其转换为ZPL以便发送给打印机(这是我要实现的目标)
将通用图像转换为ZPL可用的东西并非易事，无法在几行伪代码中描述.相反，我已经将这段代码搁置了一段时间，您的问题促使我对其进行清理并使其可用:
https://github.com/metafloor/zpl-image
或
npm安装zpl-image
在浏览器和node.js中均可使用.在浏览器中，您传入< img> 或&canvas> 元素，并以ZPL使用的Z64压缩GRF格式取回渲染的图像.
用于打印图像的ZPL和没有其他东西的斑马打印机看起来像:
//图片是< img>或< canvas>let res = imageToZ64(image);让zpl =`^ XA ^ LH0,0 ^ FWN ^ PON ^ PMN ^ LRN^ FO10,10 ^ GFA，$ {res.length}，$ {res.length}，$ {res.rowlen}，$ {res.z64)^ XZ`; 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
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 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`;
这篇关于在NodeJs中从类型:"image/png"转换为ZPL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
