Embedding Bitmaps and Images

import {PdfDocument} from "@ironsoftware/ironpdf";
import fs from 'fs';

(async () => {
    // Image file path
    const filePath = 'iron.png';

    // Read bytes from a file using fs.readFile
    fs.readFile(filePath, (err, data) => {
    if (err) {
        console.error('Error reading file:', err);
        return;
    }

    let binaryString = '';
    data.forEach((byte) => {
        binaryString += String.fromCharCode(byte);
      });

    // Convert the binary string to base64
    const base64String = btoa(binaryString);

    // Insert base64 to img element
    const imgHtml = `<img src='data:image/png;base64,${base64String}'>`;

    // Render HTML content with the embedded image to a PDF
    const pdf = PdfDocument.fromHtml(imgHtml).then(
        (returnedPdf)=>{
            // Save the PDF
            returnedPdf.saveAs("embedded_example_1.pdf")
        });
    });
})();

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

Embedding Bitmaps and Images

To ensure that HTML content does not require an internet connection to retrieve data, images can be embedded into HTML as base64. Embedding an image in HTML as base64 requires loading the image and converting its information to base64.

Below is a complete example that demonstrates how to read an image file, convert it to a base64 string, and then embed it into an HTML document. Finally, it shows how to generate a PDF from this HTML using IronPDF.

Explanation:

Image to Base64 Encoding:
- encodeImageToBase64(filePath): A function that reads the image file and converts it to a base64 string asynchronously.
- Uses fs.readFile to read the image file. If successful, converts the data to a base64 string and resolves it.
HTML Content Setup:
- createHtmlContent(base64Data): Constructs HTML content with the embedded base64 image data within an img tag.
PDF Generation:
- generatePdf(filePath): Main function that orchestrates the process by first calling encodeImageToBase64 and then createHtmlContent, followed by creating a PDF via IronPdf.
- Uses IronPdf.PdfDocument.fromHtml to generate a PDF document from the HTML content.
- Saves the generated PDF using pdf.saveAs.
Execution:
- Calls generatePdf with the path to the desired image file.