What is "html2canvas"

html2canvas allows you to take photos of DOM elements using the canvas API, and you can take pictures of the full page. The generated image is not 100% exact because it is not a real screenshot, what it does is redesign the elements.

There are still many CSS and HTML properties that are not supported, however the library is already quite functional.

Compatibility of browsers

The script works well in:

  • Firefox 3.5+
  • Google Chrome
  • Opera 12+
  • IE9+
  • Safari 6+

Example of use:

html2canvas 0.4.1

html2canvas(document.body, {
    "onrendered": function(canvas) {
       document.body.appendChild(canvas);
    }
});

html2canvas 0.5.0+

Starting from 0.5.0 html2canvas uses Promise.js (es6-Promise)

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

Examples

Limitations

A limitation is on the use of images and other external domain resources, for example the html2canvas is running on the website https://exemplo.com/index.html and an image that is on this page see from another domain as for example http://cdn1.exemplo.com:8090/images/foo.png

The moment you use the method canvas.toDataURL() will cause a similar error:

Uncaught Securityerror: Failed to execute 'toDataURL' on 'Htmlcanvaselement': tainted canvases may not be Exported.

To avoid this error if you are using different domains you should use a web proxy (you need a server-side language), examples of ready-to-use libraries:

Documentation and repository