printBase64 not printing propley

[mostyn-grp]

Hi, I'm converting my HTML receipt to base64 image using html2canvas and .toDataURL(), I've checked the result the image is fine but when I send it to print it is printing weird char, I've have gone through all fork of Cordova-Plugin-Bluetooth-Printer looked at all the relevant issues on GitHub but I still cannot get it to work.

i read though this link: https://github.com/srehanuddin/Cordova-Plugin-Bluetooth-Printer/issues/1

I'm using JOLIMARK TP510 printer

sample code:

remote HTML

.request(url, "")
      .then(html => {
          document.getElementById("printer_html").innerHTML = html;

          html2canvas(document.querySelector("#receipt-print")).then(
            (canvas) => {
              printer.printimage(canvas.toDataURL());
            }
          );
});

printer.printimage function:

printimage: (base64) => {
    BTPrinter.connect(
      (data) => {
        BTPrinter.printBase64(
          (data2) => {
            console.log("Success");
            console.log(data2);
          },
          (err) => {
            console.log("Error");
            console.log(err);
          },
          base64,
          "0"
        );
      },
      err => {
        console.log(err);
      },
      "JOLIMARK TP510"
    );
  }

base64 image: https://pastebin.com/P6WhKDE6

[mohamedazher]

First thing, try adding format to the toDataURL Function

        var dataUrl = canvas.toDataURL("image/png");

If you are seeing characters like the below image (start of the print) then this usually happens if the size of the image exceeds what can be printed by the printer.

The plugin does handle this by resizing the image to an acceptable size before sending it to the printer. However it could be possible that it may not work on some printers.

To test if this is the issue, you can try opening BluetoothPrinter.java file (not the one in the plugins folder, but the one inside android/src folder) and find the method printBase64, find the resizeImage function which has 3 parameters, first is the image itself, second is the height, third one is the width.

The default is

            bitmap = decodedBitmap;
            int mWidth = bitmap.getWidth();
            int mHeight = bitmap.getHeight();

            bitmap = resizeImage(bitmap, 48*8, mHeight);

You can try reducing the width to 40*8 or something and see if it works for you.

The below is the code that i use and it works well except for the fact that it prints 70% of the paper width

    html2canvas(document.getElementById("print_url").contentDocument.documentElement).then(canvas => {
        canvas.id = "pos_image_canvas";
        document.body.appendChild(canvas)
        var dataUrl = canvas.toDataURL("image/png");
        console.log(dataUrl);
        BTPrinter.printBase64(function(dataUrl){
            console.log("Success");
            // console.log(data);
        },function(err){
            console.log("Error");
            console.log(err);
        }, dataUrl,'0');
        canvas.remove();