WebUSB 打印 HTML 格式的内容答案

【问题标题】：WebUSB print HTML formatted contentWebUSB 打印 HTML 格式的内容
【发布时间】：2021-05-08 04:27:43
【问题描述】：

我可以将 JavaScript 与 WebUSB 结合使用，仅将文本打印到 POS 打印机。任何人都知道如何打印 HTML 或图像？纯文本打印是没有用的。此链接https://www.visuality.pl/posts/webusb-print-image-and-text-in-thermal-printers 中的一篇文章似乎是正确答案，但它没有说明函数 printImage(image) 的“图像”定义，以及如何生成“图像”数据。非常感谢。

【问题讨论】：

标签： html image printing webusb

【解决方案1】：

从那篇文章的其余代码看来，image 是一个 3 维数组，其中前两个维度是 x 和 y 坐标，最后一个维度是红色、绿色和蓝色的 3 个元素。看看calculateSlice() 和calculateLuminance() 的定义，你就会明白我的意思了。

我不知道代码中奇怪的符号是什么意思。我觉得很好。

要了解他们的代码是如何工作的，我建议您查看他们的previous article，因为它解释了打印机支持的命令以及为什么他们要按原样重新格式化图像。

【讨论】：

感谢您的回复。我删除了“奇怪”的短语。只需要知道如何生成“图像”。在问之前我已经阅读了“上一篇文章”。但关键部分不是“图像”的结构。这就是为函数 printImage(image) 创建/准备“图像”的方式。我可以使用 TextEncoder 和/或 Blob FileReader、canvas.toDataURL 等方法的组合来生成图像数据。但是如何将这些数据进一步格式化为 printImage(image) 仍然未知。我认为这应该是几行代码的问题。
没有将 HTML 内容渲染为位图的好方法，但如果您有
我也在尝试getImageData函数，感觉它越来越近了。它在纸上打印 27,56。 getImageData 产生的样本数据是 ImageData {data: Uint8ClampedArray(80000), width: 200, height: 100} 其中 data: Uint8ClampedArray(80000) [0 … 9999] [10000 … 19999] [20000 … 29999] [30000 … 39999 ] [40000 … 49999] [50000 … 59999] [60000 … 69999] [70000 … 79999] 我用 const imageWidth =image.width; var img=image.data; ... data.push(...collectStripe(x, y, img));我错过了什么？

【解决方案2】：

https://www.visuality.pl/posts/webusb-print-image-and-text-in-thermal-printers 的解决方案最终不起作用。而且破解也不容易。

这里不是为未经证实的解决方案而摆弄机器代码，而是一个可以工作的小插件。 https://github.com/NielsLeenheer/EscPosEncoder

【讨论】：