div to image

by Emmanuel Garcia

HTML

<script src="https://cdn.bootcss.com/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<div id="my-node">
  You will get a image downloaded.
  
  <img src="https://drive.google.com/uc?id=11HwAktLAFhzsY_YYOb7w_DJ7Gz0f2xNe" width="140" height="auto">
</div>

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

CSS

#my-node {
  background: blue;
  width: 400px;
  height: 300px;
  color: #fff;
}
img{z-index:30000;}

JavaScript

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');
    });
}