How to Convert HTML to Image (PNG, JPEG, WebP)

Why Convert HTML to Image?

There are many scenarios where you need to turn HTML into a static image:

• Invoices & Receipts: Generate PDF-like images from styled HTML templates.
• Social Media Cards: Create dynamic Open Graph images for sharing.
• Reports & Charts: Export dashboards and data visualizations.
• Email Signatures: Convert complex HTML layouts into a single image for compatibility.
• Certificates: Generate personalized certificates with user data.

Method 1: html2canvas (Client-Side)

html2canvas is a popular JavaScript library that renders DOM elements to a canvas, which can then be exported as an image. It runs entirely in the browser.

import html2canvas from 'html2canvas';

const element = document.getElementById('my-element');
const canvas = await html2canvas(element);

// Convert to image
const image = canvas.toDataURL('image/png');

// Or download it
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = image;
link.click();

Pros: No server required, works in the browser.

Cons: Limited CSS support, can't render external fonts or complex layouts reliably. Often produces blurry or incorrect output.

Method 2: Puppeteer (Node.js)

Puppeteer launches a headless Chrome browser, navigates to a page (or renders raw HTML), and takes a screenshot. This is the most accurate method.

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();
const page = await browser.newPage();

// Option A: Load a URL
await page.goto('https://example.com/invoice/123');

// Option B: Set HTML content directly
await page.setContent(`
    <html>
    <body style="padding: 20px; font-family: Arial;">
        <h1>Invoice #123</h1>
        <p>Total: $500</p>
    </body>
    </html>
`);

// Take screenshot
await page.screenshot({ path: 'invoice.png', fullPage: true });
await browser.close();

Pros: Pixel-perfect rendering, full CSS/JS support.

Cons: Requires a server, heavy resource usage, complex to deploy.

Method 3: Playwright

Playwright is similar to Puppeteer but supports multiple browsers (Chromium, Firefox, WebKit) and has a more modern API.

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();

await page.setContent(`
    <div style="background: linear-gradient(to right, #ff7e5f, #feb47b); 
                padding: 40px; color: white; font-size: 32px;">
        Hello, World!
    </div>
`);

await page.screenshot({ path: 'gradient.png' });
await browser.close();

Method 4: Screenshot API (Recommended)

If you don't want to manage headless browsers, a Screenshot API handles everything for you. Just send your HTML or URL and receive an image.

# Using SnapAPI with a URL
curl "https://snapapi.alterra-solutions.com/v1/screenshot?\
url=https://example.com/invoice/123&\
width=800&\
height=600&\
format=png&\
api_key=YOUR_KEY" -o invoice.png

# Or render raw HTML (base64 encoded)
curl -X POST "https://snapapi.alterra-solutions.com/v1/screenshot" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<h1>Hello World</h1>",
    "width": 800,
    "api_key": "YOUR_KEY"
  }' -o output.png

Pros: No infrastructure to manage, scales automatically, perfect rendering.

Cons: Requires API key (free tier available).

Comparison Table

Conclusion

For quick prototypes, html2canvas works. For production systems requiring accuracy and scale, use a Screenshot API or self-host Puppeteer/Playwright.