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

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

<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>

Leave a Comment