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

Question

I'm trying to convert Canvas from HRML2Canvas to a PNG image and then convert it to a ZPL image to send ZPL commands to Zebra printer but I've tried this solution

but I keep getting this error: Uncaught (in promise) TypeError: o(...) is not a function

does anyone know how to solve this, please?

This is my JS code:

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

Two things:

You need to capture the named export using:

import { imageToZ64 } from 'zpl-image'

And you are converting the canvas to a string using canvas.toDataURL(). Just pass the canvas directly to imageToZPL():

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