可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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); } }); }); });
回答1:
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
Best regards
Krzysztof
回答2:
update 2018
Notice that in the new versions of Html2Canvas the onrendered option is deprecated and replaced with promises.
To be able to download the image to the user computer, you may use something like this:
Html
<html> <head></head> <body> <div id="boundary"> <div class="content"> <p>My content here</p> </div> </div> <button id="download">Download</button> </body> </html>
Javascript (plain JavaScript)
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); } }
Issue encountered
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.
