gitmyhub

html-to-image

TypeScript ★ 7.2k updated 24d ago

✂️ 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.

TypeScriptJavaScriptnpmsetup: easycomplexity 2/5

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