Embedding Bitmaps and Images
When you want to embed an image in HTML using Base64 encoding, you need to acquire the binary data of the image either by reading the image file or receiving it through a network request. In this example, we have imported the image we want to use and acquired its binary data. Then, using the Convert.ToBase64String
method, we successfully converted it to Base64. Through this method, you will be able to add your images to any HTML content that you are using to render PDF documents.
Steps to Embedding Bitmaps and Images
// Read the image file into a byte array
byte[] pngBinaryData = File.ReadAllBytes("replace_with_your_image_path_here.png");
// Convert the image binary data to a Base64 string
string base64String = Convert.ToBase64String(pngBinaryData);
// Construct the Data URI scheme for embedding the image using the Base64 string
string imgDataUri = "data:image/png;base64," + base64String;
// Create an HTML image element with the Base64 data URI as its source
string imgHtml = $"<img src='{imgDataUri}'>";
// Create a new instance of the PDF rendering engine
var renderer = new ChromePdfRenderer();
// Render the HTML with the embedded image as a PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(imgHtml);
// Save the PDF document to a file
pdf.SaveAs("YourPdfFileName.pdf");
// Read the image file into a byte array
byte[] pngBinaryData = File.ReadAllBytes("replace_with_your_image_path_here.png");
// Convert the image binary data to a Base64 string
string base64String = Convert.ToBase64String(pngBinaryData);
// Construct the Data URI scheme for embedding the image using the Base64 string
string imgDataUri = "data:image/png;base64," + base64String;
// Create an HTML image element with the Base64 data URI as its source
string imgHtml = $"<img src='{imgDataUri}'>";
// Create a new instance of the PDF rendering engine
var renderer = new ChromePdfRenderer();
// Render the HTML with the embedded image as a PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(imgHtml);
// Save the PDF document to a file
pdf.SaveAs("YourPdfFileName.pdf");
CONVERTER NOT RUNNING
Explanation
Read the Image File:
- Use
File.ReadAllBytes
to read the contents of an image file into a byte array,pngBinaryData
.
- Use
Convert to Base64:
Convert.ToBase64String
is used to convert the binary data into a Base64-encoded string,base64String
.
Create Data URI:
- Construct a Data URI scheme by prepending
"data:image/png;base64,"
to the Base64 string, resulting inimgDataUri
.
- Construct a Data URI scheme by prepending
Prepare HTML:
- Create an HTML
<img>
tag,imgHtml
, with the Data URI as thesrc
attribute, embedding the image directly into the HTML.
- Create an HTML
Render HTML to PDF:
- Initialize a
ChromePdfRenderer
instance and useRenderHtmlAsPdf
to convert the HTML string into aPdfDocument
.
- Initialize a
- Save the PDF:
- Finally, save the rendered PDF document using the
SaveAs
method, specifying the desired file name.
- Finally, save the rendered PDF document using the
For a more comprehensive guide, including additional examples and sample code, visit this How-to Guide.