dom-to-image

dom-to-image is a browser library that converts an arbitrary DOM node into a raster (PNG/JPEG) or vector (SVG) image, entirely client-side with no server rendering or screenshot service required. It works by cloning the target node, inlining computed styles, embedding web fonts and images as data URLs, and wrapping the serialized markup in an SVG foreignObject that can be rasterized onto a canvas.

Originally based on Paul Bakaus’s domvas experiment and rewritten from scratch, it has become a long-standing dependency for exporting UI snapshots, charts, and reports directly from the browser without a headless-browser backend.

What You Get

• toPng/toJpeg/toSvg/toBlob/toPixelData functions returning promises
• Automatic inlining of web fonts and background/img images as data URLs
• A node filter callback to exclude specific DOM subtrees from the capture
• Style overrides (width, height, bgcolor, custom style object) applied before rendering
• Cache-busting option for fetching fresh copies of remote images

Common Use Cases

• Exporting a chart, card, or report section as a downloadable image
• Generating shareable social preview images from rendered UI
• Producing client-side screenshots for bug reports or PDF export pipelines
• Snapshotting DOM state in visual regression tooling

Under The Hood

Architecture The library is a single ~770-line file (src/dom-to-image.js) organized as an IIFE exposing toSvg/toPng/toJpeg/toBlob/toPixelData. The core flow clones the target DOM node, walks it recursively via cloneNode/processClone to copy computed styles and pseudo-elements onto each cloned element, resolves and inlines external resources (fonts via fontFaces, images via images module) as base64 data URLs, serializes the result with XMLSerializer, and wraps it in an SVG foreignObject that is either returned directly (toSvg) or drawn onto an offscreen canvas and read back as a PNG/JPEG data URL or Uint8Array pixel buffer.

Tech Stack Zero runtime dependencies — pure browser-standard JavaScript (Promises, DOM, Canvas, SVG). Dev tooling is dated (Grunt, Karma, Bower, JSHint, Mocha/Chai with PhantomJS-era browser launchers), reflecting the library’s 2015-era origins; the package has had no functional releases since 2.6.0 in 2017 despite a 2024 maintenance commit.

Code Quality Tests exist under spec/ (dom-to-image.spec.js) running in Karma against Chrome/Firefox, comparing rendered output pixel-for-pixel via js-imagediff and falling back to OCR (ocrad.js) where pixel comparison is browser-dependent. Code uses consistent module-per-concern internal helpers (fontFaces, images, inliner, util) but has minimal inline documentation and no TypeScript types; error handling is mostly promise rejection with logging left to the caller.

API Design The public surface is small and consistent: five top-level functions all taking (node, options) and returning a promise, with a shared options shape (filter, bgcolor, width/height, style, quality, cacheBust, imagePlaceholder). This makes the library easy to pick up from the README alone, though the impl namespace exposing internals for testing blurs the public/private boundary.