tsayen/dom-to-image

★ 10,777JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((dom-to-image))
    What it does
      DOM to PNG
      DOM to JPEG
      DOM to SVG
    How it works
      Clones element
      Embeds fonts
      Canvas capture
    Use cases
      Export buttons
      Report generation
      Visual testing
    Audience
      Web developers
    Browser support
      Chrome
      Firefox

mindmap root((dom-to-image)) What it does DOM to PNG DOM to JPEG DOM to SVG How it works Clones element Embeds fonts Canvas capture Use cases Export buttons Report generation Visual testing Audience Web developers Browser support Chrome Firefox

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add an export-to-PNG button so users can download a chart or dashboard section as an image file.

USE CASE 2

Generate JPEG screenshots of specific page sections programmatically for report generation or sharing features.

USE CASE 3

Capture an SVG snapshot of a UI component for visual testing or documentation purposes.

Tech stack

JavaScriptCanvas APISVG

Getting it running

Difficulty · easy Time to first run · 5min

Only works in Chrome and Firefox, Safari and Internet Explorer are not supported.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

dom-to-image is a JavaScript library that takes any element on a web page and converts it into a PNG, JPEG, or SVG image file, all inside the browser without sending anything to a server. You point it at a specific part of the page, call one of its functions, and get back an image you can display, download, or process further. The library works by cloning the target element, carefully copying all the styles applied to it, and then placing that clone inside an SVG structure that browsers can render as an image. It also handles web fonts by downloading them and embedding them directly into the output, and does the same for background images. The final result is captured using an off-screen HTML canvas, which is how the pixel-level output like PNG or JPEG is produced. From a developer's perspective, each function returns a promise, so you chain .then() to handle the result when it is ready. You can export as a PNG data URL, a JPEG with adjustable quality, an SVG string, a binary blob for downloading, or raw pixel data as an array of numbers. An optional filter function lets you exclude specific elements from the output before rendering. The library works in Chrome and Firefox. It explicitly does not support Internet Explorer, which lacks the SVG feature the library depends on. Safari support is also absent due to that browser's stricter security rules around the same feature, though the README suggests using the SVG export mode and rendering it on the server as a workaround. It has no external dependencies for its core functionality, though you need a browser that supports Promises and the SVG foreignObject tag. The license is MIT. This library is aimed at web developers who need to take screenshots of specific interface sections programmatically, such as for export features, report generation, or sharing.

Copy-paste prompts

Prompt 1

Using dom-to-image, add a Download as PNG button to my webpage that captures a div with id 'report' when clicked. Show the HTML and JavaScript.

Prompt 2

I want to export a specific section of my page as a JPEG with quality 0.9 using dom-to-image. Show me the JavaScript promise chain to do that.

Prompt 3

How do I use dom-to-image to exclude certain child elements from the screenshot output? Show me the filter function option.

Prompt 4

Using dom-to-image, capture a div as a PNG data URL and display it in an img tag on the same page. Show the full code.

Open on GitHub → Explain another repo

← tsayen on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.