dom-to-image

When calling rendering functions, you can pass an options object with the following keys:

Get an SVG data URL with a filter: You can provide a filter function in the options to exclude specific elements from the output.

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

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

Get raw pixel data (Uint8Array): Returns a Uint8Array where every 4 elements represent the RGBA data of a pixel.

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 */
            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
          }
        }
    });

All top-level functions accept a DOM node and an optional rendering options object. They return Promises that resolve with the resulting data URL or blob.

Get a PNG data URL:

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

Get a PNG Blob (useful for downloading):

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

Get a 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();
    });

When calling conversion methods like toSvg, toPng, toJpeg, or toBlob, you can pass an options object to customize the output:

Note: filter and style are particularly useful for excluding specific elements or forcing specific layouts during the capture process.

The following functions are available in the imagediff API:

• createCanvas(): creates a new Canvas element.
• createImageData(width, height): creates a new ImageData object.
• isImage(object): tests if an object is an Image.
• isCanvas(object): tests if an object is a Canvas.
• isContext(object): tests if an object is a CanvasRenderingContext2D.
• isImageData(object): tests if an object is ImageData.
• isImageType(object): tests if an object is any of the above types.
• toImageData(object): converts an image type object to a new ImageData object.
• equal(a, b, tolerance): tests image type objects for equality; tolerance is in pixels.
• diff(a, b, options): performs an image diff on a and b, returning a - b.
  • options.align: set to 'top' to top-align images of different sizes.
• noConflict(): removes imagediff from the global space and returns the imagediff instance.
• imageDataToPNG(imageData, outputFile, [callback]) (NodeJS only): renders imageData to a PNG file at outputFile.