Question

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

Answer 1

下载属性

HTML5中有一个新的download attribute，允许您为链接指定文件名。

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

<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'来动态更改文件名。

来自档案馆的

Demo 。

Answer 2

检查这是否有帮助，为同样的要求实施了一个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>

Answer 3

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

例如，如果您希望它们为文件保存EXE，您只需让它们单击一个锚点，浏览器就会处理请求该文件并下载它。你也可以用JavaScript做到这一点，但是为用户弹出SaveAs是一个安全和用户体验问题。

同时检查一下：Browser/HTML Force download of image from src="data:image/jpeg;base64..."

将画布保存为jpg到桌面

3 个答案:

下载属性