bubkoo/html-to-image

★ 7,134TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      Capture DOM elements
      Export as image
      No extension needed
    Output formats
      PNG and JPEG
      SVG
      Canvas and pixel data
    Tech Stack
      TypeScript
      npm
    Use Cases
      Download page sections
      Export charts as images
      Capture styled reports

mindmap root((repo)) What it does Capture DOM elements Export as image No extension needed Output formats PNG and JPEG SVG Canvas and pixel data Tech Stack TypeScript npm Use Cases Download page sections Export charts as images Capture styled reports

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a Download as PNG button that lets users save a chart or dashboard widget as an image file

USE CASE 2

Capture a styled HTML invoice or report as a JPEG to attach to an email

USE CASE 3

Export a specific section of a page as an SVG for use in a design tool

USE CASE 4

Snapshot part of a React component as a canvas element to display or upload elsewhere

Tech stack

TypeScriptJavaScriptnpm

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

This is a JavaScript library that takes any visible element on a web page and converts it into an image, without requiring the user to take a screenshot or install any browser extension. You point it at a specific part of the page, call one of its functions, and it hands back an image file you can download or display elsewhere. The library offers several output formats: PNG, JPEG, SVG, a raw HTML canvas element, and raw pixel data as a numeric array. Each format is exposed as its own function, such as toPng or toJpeg, so you pick whichever format your use case needs. All of them return a promise, meaning they work asynchronously and you handle the result once it is ready. The README includes short code examples for each format, including one for use inside a React component. You can control several aspects of the output through an options object. A filter function lets you exclude specific elements or entire branches of the page, which is useful for hiding buttons or private sections before capturing. Other options let you set a background color, override width and height, scale the output to a different resolution, adjust JPEG quality, and control how web fonts are embedded into the image so the text renders correctly even without a live internet connection. The library is installed through npm and works in any modern browser environment. It was forked from an older project called dom-to-image and continues to be maintained as a TypeScript package. The README does not describe a server-side or command-line mode, it is intended for use inside a running web page.

Copy-paste prompts

Prompt 1

Using html-to-image, show me how to add a Download PNG button to my webpage that captures a specific div with id chart and saves it as a file.

Prompt 2

I have a React dashboard and I want to let users export a specific widget as a JPEG. Show me how to use the toJpeg function from html-to-image inside a React component.

Prompt 3

How do I use html-to-image to exclude certain child elements from the captured image, for example, hiding action buttons before the screenshot?

Prompt 4

I want to capture an HTML element as a PNG at twice the screen resolution for a high-DPI display. How do I set the pixel ratio option in html-to-image?

Prompt 5

How do I use html-to-image to capture a section of the page that includes custom web fonts and make sure the text renders correctly in the output image?

Open on GitHub → Explain another repo

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

Verify against the repo before relying on details.