### Install html-to-image
Source: https://github.com/bubkoo/html-to-image/blob/master/README.md
Install the library using npm.
```shell
npm install --save html-to-image
```
--------------------------------
### Example Commit Message with Details
Source: https://github.com/bubkoo/html-to-image/blob/master/CONTRIBUTING.md
An example demonstrating a 'fix' type commit with a breaking change. It includes a subject, body explaining the reason for the change, related issue closing, and a clear BREAKING CHANGE note.
```text
fix($compile): [BREAKING_CHANGE] couple of unit tests for IE9
Older IEs serialize html uppercased, but IE9 does not...
Would be better to expect case insensitive, unfortunately jasmine does
not allow to user regexps for throw expectations.
Document change on bubkoo/html-to-image#123
Closes #392
BREAKING CHANGE:
Breaks foo.bar api, foo.baz should be used instead
```
--------------------------------
### Convert HTML to PNG in React
Source: https://github.com/bubkoo/html-to-image/blob/master/README.md
Example of using html-to-image within a React component to convert a div to a PNG image and trigger a download.
```tsx
import React, { useCallback, useRef } from 'react';
import { toPng } from 'html-to-image';
const App: React.FC = () => {
const ref = useRef(null)
const onButtonClick = useCallback(() => {
if (ref.current === null) {
return
}
toPng(ref.current, { cacheBust: true, })
.then((dataUrl) => {
const link = document.createElement('a')
link.download = 'my-image-name.png'
link.href = dataUrl
link.click()
})
.catch((err) => {
console.log(err)
})
}, [ref])
return (
<>
{/* DOM nodes you want to convert to PNG */}
)
}
```
--------------------------------
### Filter Option Example
Source: https://github.com/bubkoo/html-to-image/blob/master/README.md
Illustrates how to use the `filter` option to selectively include or exclude DOM nodes during image conversion.
```APIDOC
## Filter Option
The `filter` option allows you to specify a function that determines which DOM nodes are included in the output image. Nodes for which the filter function returns `false` are excluded, along with their children.
### Usage
```ts
const filter = (node: HTMLElement) => {
const exclusionClasses = ['remove-me', 'secret-div'];
return !exclusionClasses.some((classname) => node.classList?.contains(classname));
}
// Example with toJpeg
htmlToImage.toJpeg(node, { quality: 0.95, filter: filter});
// Example with toPng
htmlToImage.toPng(node, {filter: filter})
```
**Note:** The filter function is not called on the root node.
```
--------------------------------
### Example Commit Message
Source: https://github.com/bubkoo/html-to-image/blob/master/CONTRIBUTING.md
Follows the angular commit-message-format for a trackable history and automatically generated changelog. Includes type, scope, subject, body, and footer for breaking changes or related issues.
```xml
():