# tsayen/dom-to-image

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/tsayen-dom-to-image).**

10,777 stars · 1,688 forks · JavaScript · NOASSERTION

## Links

- GitHub: https://github.com/tsayen/dom-to-image
- awesome-repositories: https://awesome-repositories.com/repository/tsayen-dom-to-image.md

## Topics

`canvas` `css` `dom` `html` `image` `javascript` `raster` `render` `svg` `vector`

## Description

dom-to-image is a programmatic tool for capturing the visual state of HTML elements as downloadable images or raw image data. It functions as a DOM to image converter that renders specific nodes as base64 data URLs, binary blobs, or pixel arrays.

The library transforms HTML elements into raster or vector images by utilizing the HTML5 canvas API. It can retrieve raw byte arrays of a DOM node for low-level image manipulation as an RGBA pixel data extractor.

The project covers web content rasterization and the generation of dynamic screenshots from live HTML content. It handles the conversion of arbitrary DOM nodes into multiple image formats, including data URLs and binary blobs, to facilitate image display or file saving.

## Tags

### Graphics & Multimedia

- [DOM-to-Image Converters](https://awesome-repositories.com/f/graphics-multimedia/dom-to-image-converters.md) — Provides a complete utility for transforming arbitrary DOM nodes into raster or vector image formats. ([source](https://github.com/tsayen/dom-to-image#readme))
- [SVG ForeignObject Renderers](https://awesome-repositories.com/f/graphics-multimedia/svg-foreignobject-renderers.md) — Utilizes SVG foreignObject specifications to allow the browser to render HTML and CSS inside a graphic container.
- [Web Page Screenshot Tools](https://awesome-repositories.com/f/graphics-multimedia/web-page-screenshot-tools.md) — Captures visual snapshots of rendered web page elements as downloadable image files.
- [Multi-Format Image Exports](https://awesome-repositories.com/f/graphics-multimedia/svg-image-exports/multi-format-image-exports.md) — Exports image data in multiple formats including encoded URLs, binary blobs, and raw pixel arrays. ([source](https://github.com/tsayen/dom-to-image#readme))

### Part of an Awesome List

- [Low-Level Pixel Buffer Access](https://awesome-repositories.com/f/awesome-lists/media/pixel-level-image-manipulation/low-level-pixel-buffer-access.md) — Retrieves raw RGBA byte arrays from DOM nodes for high-throughput, low-level pixel manipulation. ([source](https://github.com/tsayen/dom-to-image/blob/master/README.md))

### Web Development

- [Canvas Rasterizers](https://awesome-repositories.com/f/web-development/canvas-rasterizers.md) — Implements a rasterization pipeline that maps DOM layouts to pixel-based drawing commands on an HTML5 canvas.
- [SVG-Based Serialization](https://awesome-repositories.com/f/web-development/dom-serialization/svg-based-serialization.md) — Serializes DOM trees into SVG foreignObject formats to embed live HTML content within vector images.
- [DOM-to-Canvas Renderers](https://awesome-repositories.com/f/web-development/dom-to-canvas-renderers.md) — Translates DOM structures and styles into canvas-based visual representations for pixel-level processing.
- [Computed Style Analyzers](https://awesome-repositories.com/f/web-development/css-development-utilities/style-inspection-interfaces/computed-style-analyzers.md) — Provides programmatic extraction of final computed CSS values from live elements to maintain visual fidelity.
- [CSS Inlining](https://awesome-repositories.com/f/web-development/css-inlining.md) — Injects computed styles directly into HTML elements as inline attributes to ensure consistent rendering in SVG exports.
- [Screenshot Generators](https://awesome-repositories.com/f/web-development/screenshot-generators.md) — Programmatically generates visual snapshots of live HTML content for use in reports or social media previews.

### Content Management & Publishing

- [Raster Image Exports](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/export-formats/raster-image-exports.md) — Transforms vector-based HTML elements into fixed-resolution raster image formats like PNG or JPEG.

### Development Tools & Productivity

- [Image Base64 Encoding](https://awesome-repositories.com/f/development-tools-productivity/output-formatting-utilities/base64-encoders/base64-encoders/image-base64-encoding.md) — Transforms canvas pixel data into base64-encoded data URI strings for easy image export.