将 html2canvas 图像下载到桌面
[英]Download html2canvas image to desktop
问题描述
I found this https://jsfiddle.net/8ypxW/3/ and I would like to know how to download image to desktop.
我找到了这个https://jsfiddle.net/8ypxW/3/ ，我想知道如何将图像下载到桌面。 I only see save png but no download if it's possible can you give me the script?我只看到保存 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);
}
});
});
});
2 个解决方案
解决方案1
17 已采纳 2016-12-15 15:52:19
The problem was the wrong url of canvas2image.js script in your fiddle.问题是您的小提琴中 canvas2image.js 脚本的 URL 错误。 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.在下面的代码中，您可以看到 2 个“保存 PNG”按钮。 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.一种是使用 Canvas2Image.saveAsPNG 函数，但这种方法的一个小问题是您无法给出保存图像的名称。 The second button is using HTML download attribute , but it is not supported by all browsers.第二个按钮使用HTML 下载属性，但并非所有浏览器都支持。
$(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);
}
}
});
解决方案2
11 2018-07-23 23:42:59
update 2018 2018年更新
Notice that in the new versions of Html2Canvas the onrendered option is deprecated and replaced with promises.请注意，在新版本的Html2Canvas 中， 不推荐使用onrendered选项并替换为 promise。
To be able to download the image to the user computer, you may use something like this:为了能够将图像下载到用户计算机，您可以使用以下方法：
Html 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) Javascript（纯 JavaScript）
Based on Krzysztof answer基于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);
}
}
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.事实上，我能够下载图像，但它是空白的......可能的原因（至少在我的情况下）是内容包装器（ id="#boundary" ）没有定义宽度或高度，因此指定内容包装器的高度和宽度对我有用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.