Author: | Hammster |
---|---|
Views Total: | 3,934 views |
Official Page: | Go to website |
Last Update: | August 4, 2023 |
License: | MIT |
Preview:

Description:
A JavaScript library that helps developers convert any HTML element into an image using HTML5 Canvas and SVG API.
How It Works:
- Converts DOM nodes into Data URL
- Loads data URL into an Image
How To Use It:
1. Install and import the nodeToDataURL module.
# Yarn $ yarn add html-element-to-image # NPM $ npm install html-element-to-image --save
import nodeToDataURL from 'html-element-to-image'
2. Or load the UMD version of the library in the document.
<script src="dist/index.umd.min.js"></script>
3. Create an empty img
tag for the image generated by the nodeToDataURL.
<img id="target" />
4. Generate an image from any HTML node you define.
const visualSource = document.getElementById('container') const imageTarget = document.getElementById('target') nodeToDataURL({ targetNode: visualSource }) .then((url) => { imageTarget.setAttribute('src', url); })
5. Excluded specified nodes when converting.
nodeToDataURL({ excludedNodes: const excluded = document.querySelectorAll('.excluded-element') })
6. Override the default CSS styles when converting.
nodeToDataURL({ customStyle: '.element { background: red; }' })
Changelog:
v2.2.0 (08/04/2023)
- Update