将画布保存为jpg格式到桌面

Question

我正在尝试从HTML5canvas保存一张图片(JPEG)到桌面。我可以在一个新的窗口中打开window.open(canvas.toDataURL('png'), "");，但是怎么将它保存到桌面？谢谢。

- Rajkamal

---

据我所知，您无法选择保存此类文件的位置，但是您是否尝试过解决此问题？如果有，请发布它们。 - Daedalus

请查看此链接：https://dev59.com/BWcs5IYBdhLWcg3wgkMQ#12796748 - Nippey

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

演示来自档案。

- user1693593

---

我如何在按钮事件中使用这个？ - Rajkamal

@Rajkamal演示已添加到答案中。 - user1693593

感谢您的帮助，最终我找到了{{link1：<input id="saveBtn" type="button" onclick="download()"/>}}。 - Rajkamal

它现在可以工作了 <a id="saveJpg" download="myImage.jpg" onclick="download()"><input id="saveBtn" type="button" /></a> - Rajkamal

你提供的小提琴图片似乎包含了一个高质量偏头痛所需的所有颜色！ - MyDaftQuestions

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>

- Ashish Chopra

---

jsfiddle链接显示未找到 :( - Roman Gaufman

Answer 3

在这种情况下，你应该将window.location=canvas.toDataURL('png')发送给用户，以下载你想要的文件。因此，打开一个新窗口是你应该做的事情，也就是所谓的“下载”。

例如，如果你想让用户保存一个exe文件，你只需让他们点击一个锚点，浏览器会处理请求文件并下载它。你也可以用JavaScript来做，但弹出SaveAs对于用户来说是一个安全和用户体验问题。

还可以查看这个链接：Browser / HTML Force download of image from src="data:image/jpeg;base64..."

- Lzh

---

该方法被 CORS 策略阻止。 - Nir O.