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

 

 

index.html

 

 

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

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

<style>

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


</style>


<script>

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

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


</script>

 

 

Here is a demo: this JSFiddle.

 

In this fiddle, two libraries are used:

dom-to-imagehttps://github.com/tsayen/dom-to-image
FileSaver.jshttps://github.com/eligrey/FileSaver.js/

Leave a Reply