dom-to-image: Convert DOM Nodes to Images with JavaScript and HTML5 Canvas

Introduction

dom-to-image is a powerful JavaScript library that enables developers to convert any DOM node into various image formats, including vector (SVG) and raster (PNG, JPEG) images. Building upon the foundational work of domvas by Paul Bakaus, this library has been completely rewritten to offer enhanced features like web font and image support, alongside significant bug fixes. It provides a robust solution for capturing and rendering dynamic web content as static images.

Installation

You can easily integrate dom-to-image into your project using either NPM or Bower.

NPM

npm install dom-to-image

Then, you can import it into your JavaScript files:

/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');

Bower

bower install dom-to-image

After installation, include either src/dom-to-image.js or dist/dom-to-image.min.js in your HTML page. This will make the domtoimage variable available globally.

<script src="path/to/dom-to-image.min.js"></script>
<script>
  domtoimage.toPng(node)
  //...
</script>

Examples

dom-to-image offers several methods to convert DOM nodes into different image formats, all returning promises that resolve with the corresponding data URLs or blobs.

Convert to PNG and Display

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

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

Convert to Blob and Download

You can also get a PNG image as a blob and download it, for example, using FileSaver.

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

Save as Compressed JPEG

domtoimage.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();
    });

Convert to SVG with a Filter

Filter out specific elements, like <i> tags, when converting to SVG.

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

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

Get Raw Pixel Data

Retrieve the raw pixel data as a Uint8Array for advanced image manipulation.

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

domtoimage.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);
          }
        }
    });

Why Use

dom-to-image stands out as an essential tool for web developers due to its versatility and robust feature set. It simplifies the complex task of rendering dynamic DOM content into static image formats, supporting both high-fidelity SVG vector images and widely used raster formats like PNG and JPEG. The library's promise-based API ensures asynchronous operations are handled gracefully, making integration into modern JavaScript applications seamless. With options for filtering elements, setting background colors, adjusting dimensions, and controlling JPEG quality, developers have fine-grained control over the output. This makes dom-to-image invaluable for tasks such as generating custom screenshots of UI components, creating shareable images of dynamic charts or graphs, or even for automated visual regression testing.