html-to-image is a robust JavaScript library designed to convert a given HTML DOM node into various image formats, including PNG, JPEG, SVG, or directly onto an HTML5 canvas element. It serves as an actively maintained and enhanced fork of the earlier `dom-to-image` project, focusing on more maintainable code and improved feature support. The library is currently stable at version 1.11.13, with recent releases indicating a consistent cadence of bug fixes and minor improvements, though major version increments are less frequent. Its key differentiators include comprehensive handling of complex CSS (e.g., `-webkit-mask` support as of v1.11.13), flexibility in output types (data URLs, blobs, or canvas elements), and an emphasis on addressing common pitfalls like iframe cloning and image processing. It is primarily used in browser environments to programmatically capture visual representations of web content for download, display, or further processing.
npm install html-to-imageVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to dynamically create a DOM node with various styles and an image, then use `html-to-image` to convert it into a PNG data URL, and finally display the generated image on the page.
Ensure all external resources have appropriate CORS headers ('Access-Control-Allow-Origin'). For images, try adding `crossOrigin='anonymous'` attribute to `<img>` tags if the server supports it, or use the `imagePlaceholder` option to handle failures. Alternatively, embed resources as data URLs if feasible.Ensure all web fonts are completely loaded and active before invoking `html-to-image` functions. You might need to introduce a delay, use a font loading utility, or pass a `fontFamilies` option to explicitly declare fonts if issues persist.
Optimize the target DOM node by simplifying its structure, reducing image resolutions, or capturing only a specific, smaller section. Consider options like `skipFonts` or `skipImages` during development or for performance-critical scenarios.
Verify the validity and accessibility of URLs for all CSS-defined images. Ensure cross-origin resources adhere to CORS policies or embed them as data URLs if practical. Inspect the browser's network tab for failed requests during image generation.
Update `html-to-image` to version 1.11.6 or newer for improved iframe handling. For cross-origin iframes, direct capture is generally restricted by browser security. Consider alternative strategies like rendering the iframe content separately if you control its source.
Configure the server hosting the external resources to include `Access-Control-Allow-Origin: *` or a specific origin. For `<img>` tags, add the `crossOrigin='anonymous'` attribute, which will trigger a CORS request for the image. If embedding SVGs with `foreignObject`, ensure they are properly encoded and self-contained.
Verify that the target DOM node exists and is correctly referenced using `document.getElementById('your-id')` or `document.querySelector('your-selector')`. Ensure that the element is fully rendered and available in the DOM before `html-to-image` functions are called, typically after a `DOMContentLoaded` event or within a React/Vue `useEffect` hook.Ensure all images are fully loaded before initiating the capture. You can pre-load images or use `Promise.all` with `img.onload` events. Check image URLs for correctness. Address CORS issues as described in the 'Tainted canvases' warning. The `imagePlaceholder` option can provide a fallback for failed images.
Verify that all relevant CSS stylesheets and web fonts are fully loaded and applied to the DOM node before capture. For custom fonts, ensure proper `@font-face` definitions and font file availability. Simplify complex CSS properties where possible. Ensure you are using the latest version of `html-to-image` for improved CSS compatibility.
No dependency data recorded yet.