Convert HTML Into Image Using Canvas And SVG – nodeToDataURL

Category: Image , Javascript | January 24, 2020
Views Total:3,134 views
Official Page:Go to website
Last Update:January 24, 2020


Convert HTML Into Image Using Canvas And SVG – nodeToDataURL


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 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')
  targetNode: visualSource
  .then((url) => {
  imageTarget.setAttribute('src', url);

5. Excluded specified nodes when converting.

  excludedNodes: const excluded = document.querySelectorAll('.excluded-element')

6. Override the default CSS styles when converting.

  customStyle: '.element { background: red; }'

You Might Be Interested In:

Leave a Reply