JSFiddle - React, Tailwind, and code Playground

by Durga Mishra

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imagesave">
...
</div>
<button id="save">Save</button>

CSS

#imagesave {
  background-color: red;
  height: 400px;
  width: 400px;
}

JavaScript

$('#save').click(function() {
  html2canvas($('#imagesave')[0], {
    width: 1200,
    height: 1200
  }).then(function(canvas) {
    var a = document.createElement('a');
    a.href = canvas.toDataURL("image/png");
    a.download = 'myfile.png';
    a.click();
  });
});