Javascript Tutorial to Convert Div Canvas to Downloadable PNG Image Using Filesaver.js and dom-to-image.js Library Full Project For Beginners



Welcome folks today in this blog post we will be converting div canvas to downloadable png image using filesaver.js and dom-to-image.js library. All the full source code of the application is shown below.





Get Started





In order to get started you need to make an index.html file and copy paste the following code






<div id="my-node">
  You will get a image downloaded.

<button id="foo">download img</button>


#my-node {
  background: blue;
  width: 100px;
  height: 100px;
  color: #fff;



var node = document.getElementById('my-node');
var btn = document.getElementById('foo');

btn.onclick = function() {
node.innerHTML = "I'm an image now."
    .then(function(blob) {
      window.saveAs(blob, 'my-node.png');




Here is a demo: this JSFiddle.


In this fiddle, two libraries are used:


Leave a Reply