How to create a PDF with text on top of an image.

[Herb dela Cruz]

Hi!

I need help in creating a PDF with some text on top of an image. I'm trying to re-create a printed form, and I'm thinking, in order to simplify the process, I'll just have a PNG image of the form's columns and lines, and just place the text on top of the image. I've tried the sample app to insert an image into the PDF, but not to use it as a background.

Any help to do this or a better solution is highly appreciated.

[Irfana Jaffer Sadhik]

We can draw text over the image in the PDF document. we have attached the code snippet to achieve your requirement:

//Create a new PDF document

PdfDocument document = PdfDocument();

//Adds a page to the document

PdfPage page = document.pages.add();

//Draw the image

page.graphics.drawImage(

    PdfBitmap(File('image.jpg').readAsBytesSync()),

    Rect.fromLTWH(

        0, 0, page.getClientSize().width, page.getClientSize().height));

//Draw text

document.pages.add().graphics.drawString(

    'Hello World!!!', PdfStandardFont(PdfFontFamily.helvetica, 20),

    brush: PdfBrushes.black, bounds: Rect.fromLTWH(10, 10, 300, 50));

//Saves the document

File('Output.pdf').writeAsBytes(await document.save());

//Disposes the document

document.dispose();

Try this in your end and let us know the result.

[Herb dela Cruz]

Hi!

Thank you for your reply. Unfortunately, it doesn't work. I get this error: "Error: Unsupported operation: _Namespace" at the line where the image file is to be read and drawn on the PDF page. My image file is in the assets/templates folder.

//Draw the image
page.graphics.drawImage(
   PdfBitmap(File('image.jpg').readAsBytesSync()),
   Rect.fromLTWH(
       0, 0, page.getClientSize().width, page.getClientSize().height));

I'm currently working on developing a Flutter web app. 

[Irfana Jaffer Sadhik]

We have attached a working sample to load image from locataion "assets/templates folder" to achieve your requirement for drawing text on top of an image.

 

Kindly use the following link to download the working sample,
https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdf_demo_sample121691618.zip

 

To know more about working with text and images, kindly refer the following UG links,
https://help.syncfusion.com/flutter/pdf/working-with-text
https://help.syncfusion.com/flutter/pdf/working-with-images

[Herb dela Cruz]

Thank you very much. I will test it ASAIC.

[Herb dela Cruz]

It's working. Thank you very much.