如何使用 HTML2canvas 将图像保存到用户的本地计算机
Posted
技术标签:
【中文标题】如何使用 HTML2canvas 将图像保存到用户的本地计算机【英文标题】：How to save img to user's local computer using HTML2canvas 【发布时间】：2015-10-17 20:25:22 【问题描述】：我正在使用 html2canvas .4.1 渲染屏幕截图，并希望将图像保存到用户的本地计算机。如何实现？请注意，我是初学者，所以实际代码对我最有帮助。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<button id="save_image_locally">download img</button>
<div id="imagesave">
<img id='local_image' src='img1.jpg'>
</div>
<script>
$('#save_image_locally').click(function()
html2canvas($('#imagesave'),
onrendered: function (canvas)
var img = canvas.toDataURL("image/png");
alert('This will currently open image in a new window called "data:". Instead I want to save to users local computer. Ideally as a jpg instead of png.');
window.open(img);
);
);
</script>
【问题讨论】：
【参考方案1】：注意：此答案来自 2015 年，图书馆已更新。 检查下面的答案以了解替代实现。
试试这个（注意它使用了下载属性。支持下载属性的浏览器见the caniuse support table）
<script>
$('#save_image_locally').click(function()
html2canvas($('#imagesave'),
onrendered: function (canvas)
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'somefilename.jpg';
a.click();
);
);
</script>
【讨论】：
哦，如果要设置 jpeg 质量/文件大小，toDataURL 函数还需要一个介于 0 和 1 之间的质量的第二个参数 谢谢@2pha。这对我有用。非常感激。起初，在原始图像的边界之外节省了一些额外的空间。我能够通过向 div 添加样式来修复。例如，要保存 512x512 的图像，我这样做： 谢谢。但是，当我应用它时，一切正常，但背景是黑色而不是白色。关于如何解决这个问题的任何想法？ @ArkoElsenaar 将 cssbackground-color:white 添加到您的元素中。或在此处查看其他解决方案：***.com/questions/14584946/…
这是完美的解决方案，您可以将 jpg 更改为 png a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");【参考方案2】：
2018 年更新
请注意，在新版本的 Html2Canvas 中，onrendered 选项是 deprecated 并被替换为 promise。
为了能够将图像下载到用户计算机，您可以使用以下内容：
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
基于Krzysztof的回答
document.getElementById("download").addEventListener("click", function()
html2canvas(document.querySelector('#boundary')).then(function(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);
遇到的问题
确实，我能够下载图像，但它是 blank ...可能的原因（至少在我的情况下）是内容包装器（id=" #boundary") 没有定义宽度或高度，因此为 content wrapper 指定 height 和 width 就可以了对我来说。
希望对你有帮助
【讨论】：
这对我来说在 Chrome 68、FireFox 61 和 Safari 11.1 中运行良好。 将“html2canvas(document.querySelector('#boundary'))”替换为“html2canvas(document.querySelector('#boundary'),useCORS: true,allowTaint: true,)”如果你有图片。 是的，该示例运行良好，但看起来它没有捕获所需的屏幕截图，它只捕获了部分 boddry。 应该是新接受的答案。 这在 2021 年仍然适用于 html2canvas v1.3.3。【参考方案3】：这是转换为 PNG 的最新代码。
$("#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);
【讨论】：
以上是关于如何使用 HTML2canvas 将图像保存到用户的本地计算机的主要内容，如果未能解决你的问题，请参考以下文章
html2canvas ，将渲染画布保存为 gif 而不是 png？
如何使用 html2Canvas 和 AWS S3 图像处理 CORS？