html-to-image

You can import the library using ES6 modules or CommonJS (ES5).

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

Install the html-to-image package via npm to generate images from DOM nodes using HTML5 canvas and SVG.

npm install --save html-to-image

Requirements

• Promise support.
• SVG <foreignObject> tag support.
• Note: Internet Explorer is not supported because it lacks <foreignObject> support.

Known Issues

• Tainted Canvas: If the DOM includes a <canvas> that is tainted (due to CORS), rendering will fail.
• Data URI Limits: Rendering very large DOM trees may fail due to browser-specific limits on Data URI sizes.

Use toSvg to get an SVG data URL. You can provide a filter function in the options to exclude specific elements from the output.

function filter (node) {
  return (node.tagName !== 'i');
}

htmlToImage
  .toSvg(document.getElementById('my-node'), { filter: filter })
  .then(function (dataUrl) {
    /* do something */
  });

Use toPng to get a PNG image as a base64-encoded data URL. This is useful for displaying the image in an <img> tag or downloading it.

const node = document.getElementById('my-node');

htmlToImage
  .toPng(node)
  .then((dataUrl) => {
    const img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch((err) => {
    console.error('oops, something went wrong!', err);
  });

To use html-to-image in a React component, use a useRef hook to reference the DOM node you want to capture.

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

const App: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null)

  const onButtonClick = useCallback(() => {
    if (ref.current === null) {
      return
    }

    toPng(ref.current, { cacheBust: true, })
      .then((dataUrl) => {
        const link = document.createElement('a')
        link.download = 'my-image-name.png'
        link.href = dataUrl
        link.click()
      })
      .catch((err) => {
        console.log(err)
      })
  }, [ref])

  return (
    <>
      <div ref={ref}>
      {/* DOM nodes you want to convert to PNG */}
      </div>
      <button onClick={onButtonClick}>Click me</button>
    </>
  )
}

Use toJpeg to save a compressed JPEG image. The quality option accepts a number between 0 and 1.

htmlToImage
  .toJpeg(document.getElementById('my-node'), { quality: 0.95 })
  .then(function (dataUrl) {
    var link = document.createElement('a');
    link.download = 'my-image-name.jpeg';
    link.href = dataUrl;
    link.click();
  });

Use toPixelData to get the raw pixel data as a Uint8Array. Every 4 array elements represent the RGBA data of a single pixel.

var node = document.getElementById('my-node');

htmlToImage
  .toPixelData(node)
  .then(function (pixels) {
    for (var y = 0; y < node.scrollHeight; ++y) {
      for (var x = 0; x < node.scrollWidth; ++x) {
        pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
        /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
        pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
      }
    }
  });

Use toBlob to get a PNG image blob, which can be used with libraries like FileSaver.js to trigger a download.

htmlToImage
  .toBlob(document.getElementById('my-node'))
  .then(function (blob) {
    if (window.saveAs) {
      window.saveAs(blob, 'my-node.png');
    } else {
     FileSaver.saveAs(blob, 'my-node.png');
   }
  });

Use toCanvas to get the raw HTMLCanvasElement directly.

htmlToImage
  .toCanvas(document.getElementById('my-node'))
  .then(function (canvas) {
    document.body.appendChild(canvas);
  });

To avoid redundant font parsing and embedding across multiple calls, use getFontEmbedCSS() to extract the CSS once, then pass it to subsequent calls via the fontEmbedCSS option.

const fontEmbedCSS = await htmlToImage.getFontEmbedCSS(element1);
html2Image.toSVG(element1, { fontEmbedCSS });
html2Image.toSVG(element2, { fontEmbedCSS });