Menu
I found this https://jsfiddle.net/8ypxW/3/ and I would like to know how to download image to desktop. I only see save png but no download if it's possible can you give me the script?
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
});
724
The problem was the wrong url of canvas2image.js script in your fiddle. I created a fiddle with the proper one for you to have a look. In the code below you can see 2 "Save PNG" buttons. One is using Canvas2Image.saveAsPNG function, but the little issue with this method is the fact you cannot give the name of the saved image. The second button is using HTML download attribute, but it is not supported by all browsers.
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
Canvas2Image.saveAsPNG(canvas);
}
});
});
$("#btnSave2").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
saveAs(canvas.toDataURL(), 'canvas.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);
}
}
});
fiddle
151
To be able to download the image to the user computer, you may use something like this:
<html>
<head></head>
<body>
<div id="boundary">
<div class="content">
<p>My content here</p>
</div>
</div>
<button id="download">Download</button>
</body>
</html>
Based on Krzysztof answer
document.getElementById("download").addEventListener("click", function() {
html2canvas(document.querySelector('#boundary')).then(function(canvas) {
console.log(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);
}
}
Indeed i was able to download the image, but it was blank ...the possible cause for this (at least in my case) was that the content wrapper (id="#boundary") has no width or height defined, so specifying a height and a width to the content wrapper did the trick for me.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
