Convert HTML Into Image Using Canvas And SVG – nodeToDataURL

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; }'
})