html-to-image
✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
A JavaScript library that converts any visible element on a web page into a PNG, JPEG, SVG, or canvas image, no screenshot tool or browser extension required, just a function call from your code.
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.
Where it fits
- Add a Download as PNG button that lets users save a chart or dashboard widget as an image file
- Capture a styled HTML invoice or report as a JPEG to attach to an email
- Export a specific section of a page as an SVG for use in a design tool
- Snapshot part of a React component as a canvas element to display or upload elsewhere