从类型转换:'image/png' 到 NodeJs 中的 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() 函数,然后 returns Blob{size: 102776, type: "image/png"}.
为了测试它是否确实有效,我使用 '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 divs,根据用户输入,这些字段被放置在图像模板中的指定位置; canvas用于根据序列号的内容放置二维码。
当用户点击一个按钮时,后端代码会获取整个 'labelInfo' div 的图像,然后将其转换为 ZPL 以便发送到打印机(这这就是我想要达到的目标)
将通用图像转换为 ZPL 可用的图像非常重要,无法用几行伪代码来描述。相反,我已经将这段代码搁置了一段时间,你的问题促使我清理它并使其可用:
https://github.com/metafloor/zpl-image
或
npm 安装 zpl-image
在浏览器和 node.js 中均有效。在浏览器中,您传入一个 <img>
或 <canvas>
元素并返回 ZPL 使用的 Z64 压缩 GRF 格式的渲染图像。
用于打印图像的 ZPL,而对于 Zebra 打印机则无其他内容,如下所示:
// 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`;
我正在做和尝试的事情:
我正在尝试将从 < div > 截取的屏幕截图转换为 NodeJS 中的 ZPL 字符串。很像 http://labelary.com/viewer.html 会拍摄图像并输出 ZPL 代码。
我在做什么:
我正在使用一个名为 'domToImage'(https://github.com/tsayen/dom-to-image) 的程序包,它截取了我所说的 DOM 的屏幕截图。我目前正在使用 domToImage.toBlob() 函数,然后 returns Blob{size: 102776, type: "image/png"}.
为了测试它是否确实有效,我使用 '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 divs,根据用户输入,这些字段被放置在图像模板中的指定位置; canvas用于根据序列号的内容放置二维码。
当用户点击一个按钮时,后端代码会获取整个 'labelInfo' div 的图像,然后将其转换为 ZPL 以便发送到打印机(这这就是我想要达到的目标)
将通用图像转换为 ZPL 可用的图像非常重要,无法用几行伪代码来描述。相反,我已经将这段代码搁置了一段时间,你的问题促使我清理它并使其可用:
https://github.com/metafloor/zpl-image
或
npm 安装 zpl-image
在浏览器和 node.js 中均有效。在浏览器中,您传入一个 <img>
或 <canvas>
元素并返回 ZPL 使用的 Z64 压缩 GRF 格式的渲染图像。
用于打印图像的 ZPL,而对于 Zebra 打印机则无其他内容,如下所示:
// 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`;