Print image for first time it work. but next time layout change position [Thermal Printer Model GG-5805DD]

[kmochimaru]

  Future _printThermalBluetooth() async {
    print('_printThermalBluetooth');
    this
        ._screenshotCustomer
        .capture(delay: Duration(milliseconds: 10), pixelRatio: 3)
        .then((Uint8List captureImage) async {
      print('_printThermalBluetooth ====> $captureImage');
      bluetooth.isConnected.then((isConnected) async {
        if (isConnected) {
          var image = decodeImage(captureImage);
          image = copyResize(image, width: 380);
          Uint8List imageByte = encodePng(image);
          print('_printThermalBluetooth ====> $imageByte');
          print('_printThermalBluetooth asUint8List ====> ${imageByte.offsetInBytes}   ${imageByte.lengthInBytes}');
          bluetooth.printImageBytes(imageByte.buffer
              .asUint8List(imageByte.offsetInBytes, imageByte.lengthInBytes));
          bluetooth.printNewLine();
          bluetooth.printNewLine();
          bluetooth.printNewLine();
          bluetooth.printNewLine();
          bluetooth.printNewLine();
          bluetooth.printNewLine();
          bluetooth.printNewLine();
          bluetooth.printNewLine();
          bluetooth.printNewLine();
          bluetooth.paperCut();
          _disconnect();
        }
      });
    });
  }

[kmochimaru]

Image move to the right

[thavorn]

Hi did you solve the problem? I am facing the same issue, please help. : )

Thank you very much

[V00doo1]

same issue here, please let us know if you found a solution

[dbirkheuer]

Same issue here. Solution?

[V00doo1]

I found a work around. So with my printer it seems the consecutive print misaligns if the height of the image is more than 200 px.

1. So I installed an image manipulation library.
2. Cropped the image into separate 200 px with the Crop copy function.
3. printed each one separately. but the final print still looks like it's one image.

Image manipulation library I used: https://pub.dev/packages/image

[fatimaown93]

I found a work around. So with my printer it seems the consecutive print misaligns if the height of the image is more than 200 px.

1. So I installed an image manipulation library.
2. Cropped the image into separate 200 px with the Crop copy function 3.printed each one separately. but the final print still looks like it's one image.

Image manipulation library I used: https://pub.dev/packages/image

I try this, it gave me blank space between the images, can you share this part of your code with us to see your way of doing it ?

this is my code

`
var picture = recorder.endRecording(); var img = await picture.toImage(470, position.ceil()); var pngBytes = await img.toByteData(format: ImageByteFormat.png); im.Image receiptImg = im.decodeImage(pngBytes.buffer.asUint8List());

var img_count = position / 200;

List<List<int>> imgList = [];
for (var i = 0; i < img_count.round(); i++) {
  var cropedReceiptImg = im.copyCrop(receiptImg, 0, (i * 200), 470, 200);
  var bytes = im.encodePng(cropedReceiptImg);
  imgList.add(bytes);
}
imgList.forEach((element) {
  bluetooth.printImageBytes(element);
});`

[V00doo1]

I found a work around. So with my printer it seems the consecutive print misaligns if the height of the image is more than 200 px.

1. So I installed an image manipulation library.
2. Cropped the image into separate 200 px with the Crop copy function 3.printed each one separately. but the final print still looks like it's one image.

Image manipulation library I used: https://pub.dev/packages/image

I try this, it gave me blank space between the images, can you share this part of your code with us to see your way of doing it ?

this is my code

` var picture = recorder.endRecording(); var img = await picture.toImage(470, position.ceil()); var pngBytes = await img.toByteData(format: ImageByteFormat.png); im.Image receiptImg = im.decodeImage(pngBytes.buffer.asUint8List());

var img_count = position / 200;

List<List<int>> imgList = [];
for (var i = 0; i < img_count.round(); i++) {
  var cropedReceiptImg = im.copyCrop(receiptImg, 0, (i * 200), 470, 200);
  var bytes = im.encodePng(cropedReceiptImg);
  imgList.add(bytes);
}
imgList.forEach((element) {
  bluetooth.printImageBytes(element);
});`

here's my code. it has been changed to match with your variable names. i'm not sure what your img_count variable is but the for loop must go on for the full height of the image.

List<List<int>> imgList = [];

im.Image receiptImg = im.decodePng(imageBytes);

for (var i = 0; i <= receiptImg.height; i += cropHeight) {
    im.Image cropedReceiptImg = im.copyCrop(receiptImg, 0, i, 470, 200);

   Uint8List bytes = im.encodePng(cropedReceiptImg);

   imgList.add(bytes);
}

imgList.forEach((element) {
  bluetooth.printImageBytes(element);
});

[fatimaown93]

I found a work around. So with my printer it seems the consecutive print misaligns if the height of the image is more than 200 px.

1. So I installed an image manipulation library.
2. Cropped the image into separate 200 px with the Crop copy function 3.printed each one separately. but the final print still looks like it's one image.

Image manipulation library I used: https://pub.dev/packages/image

I try this, it gave me blank space between the images, can you share this part of your code with us to see your way of doing it ? this is my code ` var picture = recorder.endRecording(); var img = await picture.toImage(470, position.ceil()); var pngBytes = await img.toByteData(format: ImageByteFormat.png); im.Image receiptImg = im.decodeImage(pngBytes.buffer.asUint8List());

var img_count = position / 200;

List<List<int>> imgList = [];
for (var i = 0; i < img_count.round(); i++) {
  var cropedReceiptImg = im.copyCrop(receiptImg, 0, (i * 200), 470, 200);
  var bytes = im.encodePng(cropedReceiptImg);
  imgList.add(bytes);
}
imgList.forEach((element) {
  bluetooth.printImageBytes(element);
});`

here's my code. it has been changed to match with your variable names. i'm not sure what your img_count variable is but the for loop must go on for the full height of the image.

List<List<int>> imgList = [];

im.Image receiptImg = im.decodePng(imageBytes);

for (var i = 0; i <= receiptImg.height; i += cropHeight) {
    im.Image cropedReceiptImg = im.copyCrop(receiptImg, 0, i, 470, 200);

   Uint8List bytes = im.encodePng(cropedReceiptImg);

   imgList.add(bytes);
}

imgList.forEach((element) {
  bluetooth.printImageBytes(element);
});

actually your code work the same of my code maybe the printer that i used has some problem, I will check with other printer now to see. thank you so much for your reply and for sharing your code

[fatimaown93]

I found a work around. So with my printer it seems the consecutive print misaligns if the height of the image is more than 200 px.

1. So I installed an image manipulation library.
2. Cropped the image into separate 200 px with the Crop copy function 3.printed each one separately. but the final print still looks like it's one image.

Image manipulation library I used: https://pub.dev/packages/image

I try this, it gave me blank space between the images, can you share this part of your code with us to see your way of doing it ? this is my code ` var picture = recorder.endRecording(); var img = await picture.toImage(470, position.ceil()); var pngBytes = await img.toByteData(format: ImageByteFormat.png); im.Image receiptImg = im.decodeImage(pngBytes.buffer.asUint8List());

var img_count = position / 200;

List<List<int>> imgList = [];
for (var i = 0; i < img_count.round(); i++) {
  var cropedReceiptImg = im.copyCrop(receiptImg, 0, (i * 200), 470, 200);
  var bytes = im.encodePng(cropedReceiptImg);
  imgList.add(bytes);
}
imgList.forEach((element) {
  bluetooth.printImageBytes(element);
});`

here's my code. it has been changed to match with your variable names. i'm not sure what your img_count variable is but the for loop must go on for the full height of the image.

List<List<int>> imgList = [];

im.Image receiptImg = im.decodePng(imageBytes);

for (var i = 0; i <= receiptImg.height; i += cropHeight) {
    im.Image cropedReceiptImg = im.copyCrop(receiptImg, 0, i, 470, 200);

   Uint8List bytes = im.encodePng(cropedReceiptImg);

   imgList.add(bytes);
}

imgList.forEach((element) {
  bluetooth.printImageBytes(element);
});

It works 😍😍😍 It seems the printer was the problem

[dbirkheuer]

I found a work around. So with my printer it seems the consecutive print misaligns if the height of the image is more than 200 px.

1. So I installed an image manipulation library.
2. Cropped the image into separate 200 px with the Crop copy function 3.printed each one separately. but the final print still looks like it's one image.

Image manipulation library I used: https://pub.dev/packages/image

It's work perfect. THANKS!

[dicky28revo]

I found a work around. So with my printer it seems the consecutive print misaligns if the height of the image is more than 200 px.

1. So I installed an image manipulation library.
2. Cropped the image into separate 200 px with the Crop copy function 3.printed each one separately. but the final print still looks like it's one image.

Image manipulation library I used: https://pub.dev/packages/image

I try this, it gave me blank space between the images, can you share this part of your code with us to see your way of doing it ? this is my code ` var picture = recorder.endRecording(); var img = await picture.toImage(470, position.ceil()); var pngBytes = await img.toByteData(format: ImageByteFormat.png); im.Image receiptImg = im.decodeImage(pngBytes.buffer.asUint8List());

var img_count = position / 200;

List<List<int>> imgList = [];
for (var i = 0; i < img_count.round(); i++) {
  var cropedReceiptImg = im.copyCrop(receiptImg, 0, (i * 200), 470, 200);
  var bytes = im.encodePng(cropedReceiptImg);
  imgList.add(bytes);
}
imgList.forEach((element) {
  bluetooth.printImageBytes(element);
});`

here's my code. it has been changed to match with your variable names. i'm not sure what your img_count variable is but the for loop must go on for the full height of the image.

List<List<int>> imgList = [];

im.Image receiptImg = im.decodePng(imageBytes);

for (var i = 0; i <= receiptImg.height; i += cropHeight) {
    im.Image cropedReceiptImg = im.copyCrop(receiptImg, 0, i, 470, 200);

   Uint8List bytes = im.encodePng(cropedReceiptImg);

   imgList.add(bytes);
}

imgList.forEach((element) {
  bluetooth.printImageBytes(element);
});

why decodePng always return null? even though the imageBytes variable has value