# bubkoo/html-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/bubkoo-html-to-image).**

7,033 stars · 661 forks · TypeScript · mit

## Links

- GitHub: https://github.com/bubkoo/html-to-image
- awesome-repositories: https://awesome-repositories.com/repository/bubkoo-html-to-image.md

## Topics

`canvas` `dataurl` `dom` `image` `javascript` `picture` `screenshot` `svg`

## Description

html-to-image is a JavaScript library and client-side screenshot utility that transforms DOM elements into image formats such as PNG, JPEG, or SVG. It functions as a DOM-to-canvas renderer, using the browser's native rendering capabilities to convert document nodes into rasterized images or canvas elements.

The library leverages SVG foreignObject serialization to capture live DOM content, which is then rasterized into pixel-based formats. It includes specialized exporters for generating binary Blobs or raw RGBA pixel data as typed arrays.

The tool provides configurations for image appearance, including background colors, dimensions, and quality. It also features a filtering system to exclude specific document nodes from the final output and manages external asset loading through font embedding optimizations and custom resource fetching configurations.

## Tags

### User Interface & Experience

- [HTML-to-Image Converters](https://awesome-repositories.com/f/user-interface-experience/html-content-processing/html-content-processing/html-to-image-converters.md) — Converts document elements into image formats like PNG, JPEG, or Blobs for display or download. ([source](https://github.com/bubkoo/html-to-image/blob/master/package.json))
- [Element](https://awesome-repositories.com/f/user-interface-experience/emoji-support/rendering-filters/element.md) — Excludes specific document nodes and their children from the final output using custom predicate functions. ([source](https://github.com/bubkoo/html-to-image#readme))
- [DOM Node Filtering](https://awesome-repositories.com/f/user-interface-experience/ui-element-selectors/predicate-based-filtering/dom-node-filtering.md) — Recursively traverses the DOM tree and excludes specific elements from the serialization process based on custom logic.

### Content Management & Publishing

- [Raster Image Exports](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/export-formats/raster-image-exports.md) — Implements the process of generating fixed-resolution raster images from vector SVG sources.

### Graphics & Multimedia

- [DOM-to-Image Converters](https://awesome-repositories.com/f/graphics-multimedia/dom-to-image-converters.md) — Transforms specific document nodes into image formats such as PNG, JPEG, SVG, or raw pixel data. ([source](https://github.com/bubkoo/html-to-image#readme))

### Web Development

- [Canvas Rasterizers](https://awesome-repositories.com/f/web-development/canvas-rasterizers.md) — Draws serialized SVG images onto an HTML5 canvas to convert vector data into pixel-based raster images.
- [Client-Side Image Generation](https://awesome-repositories.com/f/web-development/client-side-image-generation.md) — Turns live web content into downloadable image files like PNG or JPEG for users to save.
- [SVG-Based Serialization](https://awesome-repositories.com/f/web-development/dom-serialization/svg-based-serialization.md) — Converts HTML elements into an SVG foreignObject to embed live DOM content inside a vector graphic format.
- [DOM-to-Canvas Renderers](https://awesome-repositories.com/f/web-development/dom-to-canvas-renderers.md) — Converts document nodes into canvas elements to enable further programmatic drawing or image processing. ([source](https://github.com/bubkoo/html-to-image/blob/master/README.md))
- [Screenshot Utilities](https://awesome-repositories.com/f/web-development/screenshot-utilities.md) — Provides a browser-based utility for capturing visual snapshots of specific webpage elements as downloadable image files.
- [Client-Side Image Generators](https://awesome-repositories.com/f/web-development/client-side-image-generators.md) — Converts DOM nodes into canvas or pixel data for programmatic image processing entirely within the browser.
- [Fetching Behavior Configurations](https://awesome-repositories.com/f/web-development/data-fetching-caching/data-fetching/fetching-behavior-configurations.md) — Provides configurations to control how and when external asset requests are executed during the DOM-to-image conversion. ([source](https://github.com/bubkoo/html-to-image/blob/master/CHANGELOG.md))
- [Asset Fetching Pipeline](https://awesome-repositories.com/f/web-development/external-resource-loading/asset-fetching-pipeline.md) — Implements a pipeline for fetching external resources with support for cache busting and fallback placeholders. ([source](https://github.com/bubkoo/html-to-image#readme))
- [Visual Snapshot Capture](https://awesome-repositories.com/f/web-development/headless-browsers/visual-snapshot-capture.md) — Renders document elements as image files to create visual snapshots of specific page sections. ([source](https://github.com/bubkoo/html-to-image/blob/master/.gitignore))

### Data & Databases

- [Canvas Data Exports](https://awesome-repositories.com/f/data-databases/data-import-and-export/canvas-data-exports.md) — Transforms canvas pixel data into binary Blobs for delivery as PNG or JPEG files.
- [Pixel Accessors](https://awesome-repositories.com/f/data-databases/image-preprocessing-utilities/pixel-normalizers/pixel-analyzers/pixel-accessors.md) — Reads raw RGBA values from a canvas context into a Uint8ClampedArray for direct per-pixel data access.

### Testing & Quality Assurance

- [Screenshot Capture](https://awesome-repositories.com/f/testing-quality-assurance/automation-interaction-tools/screenshot-capture.md) — Captures specific HTML elements as images to create visual snapshots or previews of a website.