在 NodeJs 中从 type: 'image/png' 转换为 ZPL

Question

我在做什么和尝试：

我正在尝试将从

截取的屏幕截图转换为 NodeJS 中的 ZPL 字符串。很像http://labelary.com/viewer.html，它会获取图像并输出 ZPL 代码。

我在做什么：

1. 我正在使用一个名为 'domToImage'(https://github.com/tsayen/dom-to-image) 的包，它会截取我所说的 DOM。我目前正在使用 domToImage.toBlob() 函数，然后返回 Blob{size: 102776, type: "image/png"}。

2. 为了测试它是否真正有效，我使用了“FileSaver”(https://www.npmjs.com/package/file-saver) 将文件另存为 PNG，它确实有效，而且图片看起来很棒！！

这是我正在做的简单示例代码

domtoimage.toBlob(document.getElementById('labelInfo'))
.then(function (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，在我的情况下无法使用，因为打印机没有蓝牙。它在网络上。我还需要学习如何通过网络将整个字符串直接发送到打印机：/

---

我急需帮助，请大家帮忙

---

编辑

这就是我在 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>

描述：我正在使用一个图像模板，其中包含所有徽标，其中标签的空白部分被 3 个 div 填充；我有 3 个 div，根据用户输入，这些字段被放置在图像模板中的指定位置；画布用于根据序列号的内容放置二维码。

当用户单击按钮时，后端代码会拍摄整个“labelInfo”div 的图像，然后将其转换为 ZPL 以便发送到打印机（这就是我想要实现的目标)

【问题讨论】：

• 这听起来像XY problem;将基于文本的 div 内容转换为 PNG，然后在其上运行 OCR 以返回 ZPL 似乎很奇怪。听起来您有一个带有由 HTML 构建的标签的网站，并且想在网络打印机上打印它？ （如果不清楚：将 ZPL 转化为像素非常简单，将像素转化为 ZPL 是一项艰巨的任务）
• @ChrisG 是否可以将整个图像发送到 ZPL 打印机？我对 ZPL 作为一种语言的了解几乎为 0。我将进行编辑以准确显示我在 html 中所做的事情
• @ChrisG 我可以使用原始像素数据而不是 png 将其转换为 ZPL（或将像素数据发送到打印机）吗？
• 再一次，the backend code then takes an image of the whole 'labelInfo' div 似乎是朝错误方向迈出的一步。如果您需要 ZPL 字符串。但是，为什么首先需要 ZPL 字符串？如果我错了，请纠正我，但听起来您想在网络打印机上打印<div>？为什么不打印PNG？为什么 ZPL 还要进图？
• @ChrisG 因为它是 ZPL 打印机。如果可以将 PNG 直接打印到打印机上，我很乐意这样做，但我无法找到如何使用 Javascript 在任何地方执行此操作并将命令发送到网络内的打印机

Answer 1

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

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

或

npm install zpl-image

适用于浏览器和 node.js。在浏览器中，您传入一个 <img> 或 <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`;