Render HTML to an image

Characteristics and constraints of available tools

The Puppeteer champion

When a precise and polished rendering is non-negotiable, Puppeteer with Chrome Headless leads the pack. This method prioritizes closer matching of the original HTML, supporting advanced styles and JavaScript execution.

chrome --headless --screenshot --window-size=1280x1024 --no-sandbox --default-background-color=0 page.html


This command line argument gives you a screenshot of 'page.html' with the desired resolution and a transparent background.

Superior APIs

For quick turnarounds, consider API services such as ApiFlash or EvoPDF. They offer fast yet accurate HTML to image conversions, though the costs can pile up with extensive usage.

SVGs for XHTML

For XHTML content rendering, SVGs come handy. They are paired with the <foreignObject> tag to render the XHTML content, and drawn onto a canvas.

// Prepare your camera 📸 SVG is striking a pose!
var rawData = new XMLSerializer().serializeToString(document.querySelector('svg'));
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.onload = function() {
    // Say cheese! 🧀
    ctx.drawImage(img, 0, 0);
    canvas.toBlob(function(blob) {
        var imageURL = URL.createObjectURL(blob);
        var newImg = document.createElement('img');
        newImg.onload = function() {
            URL.revokeObjectURL(imageURL);
        };
        newImg.src = imageURL;
        document.body.appendChild(newImg);
    });
};
img.src = 'data:image/svg+xml;base64,' + btoa(rawData);


SVGs provide a good way to transform XHTML to an image using JavaScript and canvas.

Special considerations

When working with HTML to image rendering, consider the stylistic and sizing constraints, the time taken by page loading, and the limitations of various APIs and tools.

Sizing the content

When capturing an element whose size may change according to the page dynamics, you need to adjust the viewport size accordingly:

// Get those measurements! 📏📐
const dimensions = await page.evaluate(() => {
    const element = document.querySelector('#capture');
    return {
        width: element.offsetWidth,
        height: element.offsetHeight
    };
});
await page.setViewport(dimensions);


This helps to ensure the resulting image is tailored to desired specifications.

Tackling time lag

Sometimes, the page load timing can affect image capture, resulting in missing out on asynchronously loaded content. To ensure all elements are loaded before capture, you can set a specific delay or wait for an element to load:

// Patience is virtue, wait for the gift 🎁of element
await page.waitForSelector('#capture', { visible: true });


Styles and handling fonts

Getting the styles and fonts right is crucial. Especially when dealing with web fonts like Google Fonts, make sure to inline your styles and fonts for consistent results across multiple platforms.