Add an Image to a PDF Document

[Samuel]

Hello 

I want to  add an image from my Blazor Webassembly wwwRoot Path to an new PDF Document.

I want to add by Filestream but the access is not working. Can anyone show me how to do this?

Regards Samuel

[Gowthamraj Kumar]

Hi Samuel,

We can add the image (PNG or JPEG) into PDF document by using Syncfusion PDF library. Please refer below steps to add a image file as resource to Blazor client side application,

1. Create a new folder with “Resources” name.
2. Right click on that folder in VS and add new item with resource file.

3. It will adding a Resource.resx file under Resources folder.
4. Now you can add the resource from .resx file.

5. After adding the files (image file), please set access modified and save the file.
6. Now you can get the files in razor page using Resource class.

Please find the sample for adding image in PDF document on Blazor client side application from below link,

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp_Client889303968

//Get Image data from resource.

byte[] imageData = Resources.Resource.Xamarin_JPEG;

MemoryStream imageStream = new MemoryStream(imageData);

//Create PdfImage from the stream.

PdfImage img = new PdfBitmap(imageStream);

//Draw the image to pdf graphics.

graphics.DrawImage(img, new RectangleF(10, 70, 400, 300));

Note: Run the application à Go to Fetch Data page (https://localhost:7214/fetchdata) à  Click Export to PDF button to convert the image to PDF document and it automatically download in a web browser.

Please refer to the below documentation details,

UG: https://help.syncfusion.com/file-formats/pdf/working-with-images

https://help.syncfusion.com/file-formats/pdf/create-pdf-document-in-blazor#steps-to-create-pdf-document-in-blazor-client-side-application

The above sample will add the image to PDF document in Blazor client side. Please let us know if you need any further assistance in this.

Regards,

Gowthamraj K