How to capture an image in javascript

This library offers an easy way to generate images or SVGs from document nodes in Base64 format, allowing for the creation of images from HTML tags without needing any external server calls. It works seamlessly across modern browsers.

Capturing an Image from a DOM Element with JavaScript

To implement this functionality, we will use the dom-to-image library. This library can turn any DOM node into an SVG or raster image (PNG, JPEG), and it's based on the domvas library by Paul Bakaus, but with improvements such as web font and image support.

You can get the library by installing it through NPM:

npm install dom-to-image

Alternatively, you can download the .zip file or access the official GitHub repository.

How It Works

The library uses SVG's ability to include arbitrary HTML content inside the <foreignObject> tag. The process of rendering a DOM node involves several key steps:

1. Cloning the DOM node: The original node and its children are recursively cloned.
2. Copying styles: Styles for the node and its sub-nodes are computed and transferred to the corresponding clones, including pseudo-elements.
3. Embedding web fonts: All web fonts referenced by @font-face are detected, downloaded, base64-encoded, and embedded into the clone.
4. Embedding images: Image URLs in <img> elements or background CSS properties are inlined as data URLs.
5. Serialization: The cloned node is serialized to XML, wrapped in a <foreignObject> tag, and then inside an SVG element, which is converted into a data URL.
6. Optional image rendering: For PNG or pixel data, an off-screen canvas is used to render the SVG, and the resulting content is read from the canvas.

The top-level functions of dom-to-image accept a DOM node and rendering options, returning promises that resolve with corresponding data URLs.

Convert Element to PNG

Use the domtoimage.toPng method to convert a DOM node to a PNG image:

<div id="my-node">
    <p>Some HTML content or images.</p>
</div>

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

Convert Element to JPEG

Use domtoimage.toJpeg to convert the DOM node to a JPEG image. You can specify options, such as the quality:

<div id="my-node">
    <p>Some HTML content or images.</p>
</div>

<script>
    var node = document.getElementById('my-node');
    var options = { quality: 0.95 };

    domtoimage.toJpeg(node, options).then(function (dataUrl) {
        // Handle the JPEG data URL (data:image/jpeg;base64,...)
    });
</script>

Convert Element to Blob

To retrieve a Blob (instead of a Base64 string), you can use the domtoimage.toBlob method. This is useful when you need to download the image as a file:

<div id="my-node">
    <p>Some HTML content or images.</p>
</div>

<script>
    var node = document.getElementById('my-node');
    
    domtoimage.toBlob(node).then(function (blob) {
        window.saveAs(blob, 'my-node.png');
    });
</script>

In this example, the FileSaver library is used to allow users to download the image.

The library has been tested on recent versions of Chrome and Firefox, with Chrome performing better for large DOM structures due to its faster SVG rendering support. Note that Internet Explorer is not supported, as it does not support the <foreignObject> tag in SVG.