将画布另存为jpg到桌面

Save canvas as jpg to desktop

本文关键字：桌面 jpg 另存为      更新时间：2023-09-26

我正在尝试从HTML5canvas将图像（JPEG）保存到桌面。我可以在新窗口window.open(canvas.toDataURL('png'), "");中打开，但如何将其保存到桌面？谢谢

下载属性

HTML5中有一个新的下载属性，允许您为链接指定文件名。

我做这个是为了保存画布。它有一个链接（"下载为图像"）-

<a id="downloadLnk" download="YourFileName.jpg">Download as image</a>

和功能：

function download() {
    var dt = canvas.toDataURL('image/jpeg');
    this.href = dt;
};
downloadLnk.addEventListener('click', download, false);

您甚至可以通过设置属性downloadLnk.download = 'myFilename.jpg'来动态更改文件名。

存档中的演示。

如果有帮助的话，请检查一下，一个jsfiddle实现了相同的需求。http://jsfiddle.net/5whKM/

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"/>
<script>
  var img = document.images[0];
  img.onclick = function() {
    var url = img.src.replace(/^data:image'/[^;]/, 'data:application/octet-stream');
    location.href = url;
  };
</script>

在这种情况下，您应该做的是将用户window.location=canvas.toDataURL('png')发送到您希望他们"下载"的文件的位置。因此，打开新窗口的解决方案是你应该做的，也是"下载"的含义

例如，如果你想让他们为一个文件保存EXE，你只需要让他们点击一个锚，浏览器就会处理请求文件和下载文件的过程。你也可以用JavaScript来做这件事，但只为用户弹出SaveAs是一个安全和用户体验问题。

还可以看看：浏览器/HTML强制从src="下载图像；数据：图像/jpeg；base64…"；

相关文章：