html2canvas image not saving

Question

Image is loading properly when I click the button but I am not able to download it. it's just showing on the div. Everything is working fine just image is not saving.

My HTML and JS:

 <script> document.getElementById("download").addEventListener("click", function() { html2canvas(document.getElementById("output"), {allowTaint: true}).then(function(canvas) { document.getElementById("output2").appendChild(canvas); }); }); </script> 

 <button type="button" id="download" class="btn btn-success">Preview Image</button> <div id="output2"></div> <div id="output" class="dark-mode"> <h1><b>{{heading}}</b></h1> <i class="fa fa-twitter" id="author"></i> <a id="authorname">{{author}}</a> <span id="time" class="date">{{date}}</span> <p>{{news}}</p> <img :src="image" width="100%"/> <p id="img_text">{{caption}}</p> </div> 

Answer 1

To achieve expected result, create save method

 document.getElementById("download").addEventListener("click", function() { html2canvas(document.getElementById("output"), {allowTaint: true}).then(function(canvas) { document.getElementById("output2").appendChild(canvas); saveAs(canvas.toDataURL(), 'file-name.png'); }); }); function saveAs(uri, filename) { var link = document.createElement('a'); if (typeof link.download === 'string') { link.href = uri; link.download = filename; //Firefox requires the link to be in the body document.body.appendChild(link); //simulate click link.click(); //remove the link when done document.body.removeChild(link); } else { window.open(uri); } } 

 #output2 { border: 1px solid black; } 

 <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <button type="button" id="download" class="btn btn-success">Preview Image</button> Output 2 - <div id="output2"></div> <div id="output" class="dark-mode"> <h1><b>{{heading}}</b></h1> <i class="fa fa-twitter" id="author"></i> <a id="authorname">{{author}}</a> <span id="time" class="date">{{date}}</span> <p>{{news}}</p> <img :src="image" width="100%"/> <p id="img_text">{{caption}}</p> </div> 

codepen - https://codepen.io/nagasai/pen/jXavqm

Downloading below image

Please refer below link for different save options Download html2canvas image to desktop