我发现了这个https://jsfiddle.net/8ypxW/3/，我想知道如何将图像下载到桌面。我只看到保存png但没有下载，如果有可能你能给我脚本吗？
$(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);
}
});
});
});
答案 0 :(得分：10)
问题是你的小提琴中的canvas2image.js脚本的错误网址。我创造了一个适合你的小提琴，让你看看。在下面的代码中，您可以看到2＆＃34;保存PNG＆＃34;纽扣。一个是使用Canvas2Image.saveAsPNG函数，但这个方法的一个小问题是你无法给出保存图像的名称。第二个按钮使用HTML download attribute，但并非所有浏览器都支持。
$(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);
}
}
});
最好的问候 的Krzysztof
答案 1 :(得分：6)
要能够将图像下载到用户计算机，您可以使用以下方式：
<html>
<head></head>
<body>
<div id="boundary">
<div class="content">
<p>My content here</p>
</div>
</div>
<button id="download">Download</button>
</body>
</html>
基于Krzysztof答案
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);
}
}
实际上我能够下载图像，但是空白 ...（至少在我看来，这可能是由于内容包装器（ id =“ #boundary“ ）没有定义宽度或高度，因此为内容包装器指定了 height 和 width 就可以了对我来说。