How can I download content of div using html2canvas and FileSaver in the dowllaods folder instead of in the browser?

Question

I'm struggling to figure this out: When user clicks on button it creates a png of whatever the content is in my "imagecontainer" element. Unfortunately it only adds a canvas with the png to the bottom of my page. How can I prevent it from doing that and let the png get straight into dowloads folder or new window?? Thank you so much. This is my code:

 $(function() { $("#savebutton").click(function() { html2canvas($(".imagecontainer"), { onrendered: function(canvas) { theCanvas = canvas; document.body.appendChild(canvas); canvas.toBlob(function(blob) { save(blob, "Dashboard.png"); }); } }); }); }); 

Answer 1

When you append an element to document.body it's naturally placed in the bottom of the page. Append your canvas to the element you want to contain it. For example to imagecontainer :

$(".imagecontainer").append(canvas);