Image Printing Not Centered Properly

[abutizi]

Hello Awesome Community!

I just wanted to know if there were any one else who is experiencing this issue?

When I use "[C]<img>IMAGE DATA</img> the image is printed allright, but is not centered properly.

It looks like the plugin takes the pivot from far left side and centers it instead of taking the pivot from the center of the image. The image I am using is 350px, Square.

Anyone else experiencing this issue?

[michalwojtczak-vm-pl]

@abutizi can you show me code example how you used it to put and correctly print image data ?

[abutizi]

@michalwojtczak-vm-pl Yes, I first start by getting ImageData and then adding it to the txt for printing:

`

                if (includeLogo && this.LogoPrint) {
                    const logoPrint = await this.thermal.bitmapToHexadecimalString({
                        type: type.toLowerCase(),
                        id: deviceId,
                        base64: this.LogoPrint,
                    }).then(res => {
                        // console.log(res);
                        return res;

                    }).catch(async err => {
                        console.log(err);
                        return '';
                    });

                    if (logoPrint)
                        txt = '[C]<img>' + logoPrint + '</img>\n' + txt;
                }

`

[abutizi]

@michalwojtczak-vm-pl Do you know how to make the image bigger on the receipt? I mean how to scale it up by any chance?

[michalwojtczak-vm-pl]

@abutizi I'm generating base64 in this way (there you can define size)

return new Promise((resolve => { const image = new Image(); image.onload = () => { const canvas = document.createElement('canvas'); canvas.height = 200; canvas.width = 200; const context = canvas.getContext('2d'); context.drawImage(image, 0, 0); const imageData = canvas.toDataURL('image/jpeg').replace(/^data:image\/(png|jpg|jpeg);base64,/, ""); //remove mimetype return resolve(imageData); }; image.src = 'assets/images/main_logo.png'; }))

BUT right now something is wrong because printer is printing black square (with correct size) only. Works ONLY if file which I'm reading is bitmap (.bmp).

1. Can you send me your method which you are using for generating base64 ?
2. Did you manage language charset setup ? I'm trying to change but always is windows-1252 so I don't have polish letters :( 

[abutizi]

@michalwojtczak-vm-pl I'm using this function: public async generateThumbnail(img, MAX_WIDTH: number = 200, MAX_HEIGHT: number = 200, quality: number = 1) {

return new Promise(resolve => {

  var canvas: any = document.createElement("canvas");
  var image = new Image();

  image.onload = () => {
    var width = image.width;
    var height = image.height;

    if (width > height) {
      if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width;
        width = MAX_WIDTH;
      }
    } else {
      if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height;
        height = MAX_HEIGHT;
      }
    }
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0, MAX_WIDTH, MAX_HEIGHT);

    // IMPORTANT: 'jpeg' NOT 'jpg'
    var dataUrl = canvas.toDataURL('image/jpeg', quality);

    resolve(dataUrl);
  }
  // console.log('setting img');
  image.src = img;
});

1. I'm using this. I can also define size, but the size is always the same on the receipt.
2. Yes, never worked xD
3. Did you manage to center the image correctly?

[albgen]

that is a bug on the main library and not on this...