javascript - 将画布另存为 jpg 到桌面

Question

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

Answer 1

下载属性

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'。

档案中的演示。

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..."