HTML DOM To Image

Convert any HTML DOM node into an image in PNG, JPEG, SVG, or Blob format.

Use Cases

Users request to convert HTML content to an image, take a screenshot of a web page element, generate a PNG/JPEG cover image, or export a specified DOM node as an image file.

Installation

Install html-to-image in the project directory:

npm install html-to-image

Core Workflow

Step 1: Target the DOM Node

Get the HTML element to convert using a selector:

const node = document.querySelector('#target-element');

Step 2: Choose Output Format

Step 3: Trigger Download

htmlToImage.toPng(node, { cacheBust: true })
  .then((dataUrl) => {
    const link = document.createElement('a');
    link.download = 'my-image.png';
    link.href = dataUrl;
    link.click();
  })
  .catch((err) => console.error('oops, something went wrong!', err));

Common Rendering Options

filter Example (Exclude Specific Elements)

const filter = (node) => {
  const exclude = ['remove-me', 'secret-div'];
  return !exclude.some(c => node.classList?.contains(c));
};

htmlToImage.toJpeg(node, { quality: 0.95, filter });

React Integration

import { useCallback, useRef } from 'react';
import { toPng } from 'html-to-image';

const ExportButton = () => {
  const ref = useRef<HTMLDivElement>(null);

  const onClick = useCallback(() => {
    if (!ref.current) return;
    toPng(ref.current, { cacheBust: true })
      .then((dataUrl) => {
        const link = document.createElement('a');
        link.download = 'my-image.png';
        link.href = dataUrl;
        link.click();
      })
      .catch(console.error);
  }, []);

  return (
    <>
      <div ref={ref}>
        {/* Content to convert */}
      </div>
      <button onClick={onClick}>Download Image</button>
    </>
  );
};

Notes

• Including a CORS-tainted will cause rendering to fail
• Extremely large DOM nodes may fail due to dataURI length limits
• IE browser is not supported (incompatible with SVG )