Uncaught (in promise) TypeError: o(...) is not a function when using ImageToZPL from zpl-image package

Question

我正在尝试将 Canvas 从 HRML2Canvas 转换为 PNG 图像，然后再将其转换为 ZPL 图像将 ZPL 命令发送到 Zebra 打印机，但我试过了

但我不断收到此错误：未捕获（承诺）类型错误：o(...) 不是函数

请问有人知道怎么解决吗？

这是我的JS代码：

import { Controller } from "stimulus"
import html2canvas from 'html2canvas'
import imageToZ64 from 'zpl-image'

export default class extends Controller {

    connect() {

   $('#barcode-print-button').click((e) => {
            this.printBarcode()
        });
    }
   printBarcode() {
        html2canvas(document.querySelector("#capture")).then(canvas => {
        var Image = canvas.toDataURL("image/png");
        let res = imageToZ64(Image);
        let zpl = `^GFA,${res.length},${res.length},${res.rowlen},${res.z64}`;
                var printWindow = window.open();
                printWindow.document.open("")
                printWindow.document.write(zpl);
                printWindow.document.close();
                printWindow.focus();
                printWindow.print();
                printWindow.close();
          
        });
}
}

Answer 1

两件事：

您需要使用以下方法捕获命名导出：

import { imageToZ64 } from 'zpl-image'

并且您正在使用 canvas.toDataURL() 将 canvas 转换为字符串。只需将 canvas 直接传递给 imageToZPL():

html2canvas(document.querySelector("#capture")).then(canvas => {
    let res = imageToZ64(canvas);
    let zpl = `^GFA,${res.length},${res.length},${res.rowlen},${res.z64}`;
    ...
});

Uncaught (in promise) TypeError: o(...) is not a function when using ImageToZPL from zpl-image package

Uncaught (in promise) TypeError: o(...) is not a function when using ImageToZPL from zpl-image package

javascript

html2canvas

zebra-printers

stimulusjs