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

  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();
        }
      });
    });
  }

[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

[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);
});