How to resize a PdfBitmap?

Question

Hi...I'm trying to resize an image before adding it to my PDF. The image is coming from Syncfusion's SfCartesianChartState using the following code:

- - - - - -

final ui.Image data = await key.currentState!.toImage(pixelRatio: 1.6);

final ByteData? bytes = await data.toByteData(format: ui.ImageByteFormat.png);

imageBytes = bytes.buffer.asUint8List(

bytes.offsetInBytes,

bytes.lengthInBytes

);

- - - - - -

Once the image is created, I'm inserting it into my PDF document using the following code:

- - - - - -

PdfBitmap image = PdfBitmap(imageBytes);

layoutResult = image.draw(

page: page,

bounds: Rect.fromLTWH(0, layoutResult.bounds.bottom + 10, page.getClientSize().width, 300)

)!;

- - - - - -

However, while the image does display in the PDF, it appears to be zoomed in. If I change the pixelRatio to 1, I can get it to fit in the specified bounds but this solution doesn't scale across various display sizes (tablets, phones, etc.). So, it seems like I need to resize the image before drawing it to the PDF but I'm not sure how to do that. Can anyone help me with this?

Thanks in advance.

Sowmiya Loganathan · Accepted Answer

We have analyzed your requirement and we can able to resize the image along with PdfLayoutResult. Please refer the below code example for your reference,

Future<void> createPdf() async{

//Create a new PDF document

PdfDocument document = PdfDocument();

//Adds a page to the document

PdfPage page = document.pages.add();

PdfTextElement textElement = PdfTextElement(text: 'Graph', font: PdfStandardFont(PdfFontFamily.timesRoman, 14));

PdfLayoutResult? layoutResult = textElement.draw(page:page, bounds: Rect.fromLTWH(0, 0, page.getClientSize().width, page.getClientSize().height));

PdfBitmap image = PdfBitmap(await _readImageData('Autumn Leaves.jpg'));

//how do I resize the image before adding to the layout???

page.graphics.drawImage(image, Rect.fromLTWH(0, layoutResult!.bounds.bottom + 10, page.getClientSize().width, 200));

//By drawing another element

PdfTextElement textElement1 = PdfTextElement(text: "End");

layoutResult = textElement1.draw(page:page, bounds: Rect.fromLTWH(0, layoutResult.bounds.bottom + 200 + 10, page.getClientSize().width, page.getClientSize().height));

//Save the document

List<int> bytes = await document.save();

//Dispose the document

document.dispose();

//Save the file and launch/download

SaveFile.saveAndLaunchFile(bytes, 'output.pdf');

}

Future<List<int>> _readImageData(String name) async{

final ByteData data = await rootBundle.load('assets/image/$name');

return data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);

}

Output PDF screenshot:

Please try this in your end and let us know the result.

Irfana Jaffer Sadhik · Answer

To resize the image within the PDF, you can achieve it by
specifying the bounds when drawing the image. The image will be adjusted
accordingly, either stretched or scaled, based on the bounds provided in the
PdfGraphics.drawImage method. We recommend utilizing the following code to
ensure the appropriate resizing bounds and address this issue.

//Create a new
  PDF document
  PdfDocument
  document = PdfDocument();
   
  //Adds a page to
  the document
  PdfPage page =
  document.pages.add();
   
  PdfBitmap image =
  PdfBitmap(imageBytes);
   
  //Draw the image
  page.graphics.drawImage(image, Rect.fromLTWH(0, 0,
  100,100));
   
  //Saves the
  document
  File('Output.pdf').writeAsBytes(await
  document.save());
   
  //Disposes the
  document
  document.dispose();

You can refer the following UG documentation for further
details.https://help.syncfusion.com/flutter/pdf/working-with-images
https://pub.dev/documentation/syncfusion_flutter_pdf/latest/pdf/PdfGraphics/drawImage.html

Pieter Bergmans · Answer

Thanks for the reply. I've come across this code in other posts and I tried it but couldn't figure out how to use it with PdfLayout? If I use your code as is, the image is inserted at the top left of the page. I need the image to added to my PdfLayout so it's further down the page. I currently have this...

- - - - - - -

PdfPage page = document.pages.add();
PdfTextElement textElement = PdfTextElement(text: 'Graph');
PdfLayout layoutResult =  textElement.draw(page:page, bounds: Rect.fromLTWH(0, 20, page.getClientSize().width, page.getClientSize().height);
PdfBitmap image = PdfBitmap(imageBytes);

// how do I resize the image before adding to the layout???

layoutResult = image.draw(page: page, 0, layoutResult.bounds.bottom + 10, page.getClientSize().width, 200);

Pieter Bergmans · Answer

This is works perfectly. Thanks for the help!