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

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/tsayen-dom-to-image
Generated for open source discovery and AI-assisted research.

dom-to-image is a JavaScript library designed to transform any DOM node into a vector (SVG) or raster (PNG, JPEG) image. It leverages HTML5 canvas to provide a flexible solution for capturing web content. This tool is ideal for developers needing to generate visual representations of specific UI elements.

GitHub: https://github.com/tsayen/dom-to-image
OSRepos URL: https://osrepos.com/repo/tsayen-dom-to-image

## Summary

dom-to-image is a JavaScript library designed to transform any DOM node into a vector (SVG) or raster (PNG, JPEG) image. It leverages HTML5 canvas to provide a flexible solution for capturing web content. This tool is ideal for developers needing to generate visual representations of specific UI elements.

## Topics

- JavaScript
- DOM
- Image Generation
- Canvas
- SVG
- PNG
- Web Development
- Frontend Utility

## Repository Information

Last analyzed by OSRepos: Sun Oct 12 2025 05:41:03 GMT+0100 (Western European Summer Time)
Detail views: 4
GitHub clicks: 7

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## 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

bash
npm install dom-to-image


Then, you can import it into your JavaScript files:

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


### Bower

bash
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.

html
<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

javascript
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](https://github.com/eligrey/FileSaver.js/).

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


### Save as Compressed JPEG

javascript
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.

javascript
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.

javascript
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.

## Links

For more detailed information, contributions, or to report issues, please visit the official repository.

*   **GitHub Repository**: [tsayen/dom-to-image](https://github.com/tsayen/dom-to-image)
*   **Authors**: Anatolii Saienko, Paul Bakaus (original idea)
*   **License**: MIT