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

Question

我正在尝试将画布从 HRML2Canvas 转换为 PNG 图像，然后将其转换为 ZPL 图像 将 ZPL 命令发送到 Zebra 打印机，但我已经尝试过 solution

但我不断收到此错误：Uncaught (in promise) TypeError: o(...) is not a function

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

这是我的 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() 将画布转换为字符串。只需将画布直接传递给imageToZPL()：

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