# html-element-to-image
📷 Capture an image of any given HTML element.
## Install
```bash
// npm
npm install html-element-to-image
// yarn
yarn add html-element-to-image
```
## 📖 Example
Codepen: https://codepen.io/Hammster/pen/ZEYvxLa
ESM
```js
import nodeToDataURL from 'html-element-to-image'
const visualSource = document.getElementById('source')
const imageTarget = document.getElementById('target')
const excluded = document.querySelectorAll('.unwanted-element')
nodeToDataURL({
targetNode: visualSource,
excludedNodes: excluded,
customStyle: '.highlighted-element { background: red; }'
})
.then((url) => {
imageTarget.setAttribute('src', url);
})
```
UMD
> Exposes the function `nodeToDataURL` to the window/global
## 🔬 Differences to Other Libraries
Compared to [html-to-image](https://github.com/bubkoo/html-to-image), [dom-to-image](https://github.com/tsayen/dom-to-image) and [dom-to-image-more](https://github.com/1904labs/dom-to-image-more) this library uses a different approach, which leads to a big performance increase. Instead of making a [deep copy](https://en.wikipedia.org/wiki/Object_copying#Deep_copy) of the targeted element with applied styles via `el.getComputedStyle()`. This library uses the available DOM for serialization. Before and after the serialization, obfuscated classes get added to hide the parts we don't want to be displayed.
Another difference is that this library has no issue at all with `SVG Sprite Sheets` and `ShadowDOM` since we use the given DOM already.
## 🛡️ Limitation
- If the DOM node you want to render includes a `