如何使用按钮从画布中保存图像？答案

【问题标题】：How do you save image from canvas with button?如何使用按钮从画布中保存图像？
【发布时间】：2018-04-09 18:25:02
【问题描述】：

我有一个“保存”按钮，我需要它来允许用户将画布图像下载为 PNG 或 JPG 文件。

目前，我找到了这段代码：

$('#save').on("click",function(){
    var w=window.open('about:blank','image from canvas');
    w.document.write("<img src='"+canvas.toDataURL("image/png")+"' alt='from canvas'/>");
})

它将画布图像打开到新页面，并允许下载图像（否则将图像显示为黑色图像）。有没有一种方法可以在用户点击保存按钮时直接下载图片而不清除当前画布或在新页面中打开？

【问题讨论】：

也许这个JsFiddle Demo 对你有用。这是使用锚标记，而不是按钮，因为它在下载功能中使用href。
@NewToJS 我将小提琴代码复制到我的文件中，它几乎完全按照我想要的方式工作！不过有一件事 - 我的背景是透明的，代码在画布图像后面给了我一个完全黑色的背景 - 有没有办法解决这个问题？
您是否尝试过将ctx.fillStyle 替换为ctx.fillStyle = "rgba(0, 0, 0, 0)"; 例如：JsFIddle Demo 2
我从这里找到了替换背景的代码：stackoverflow.com/questions/32160098/…@NewToJS 如果您用您在评论中写的内容回答这个问题，我会选择它作为最佳答案。帮了大忙！

标签： javascript jquery html canvas html5-canvas

【解决方案1】：

设置href 而不是使用download 属性是下载画布图像的一个简单技巧，但它并不总是有效，并且在所有浏览器中，我建议您使用FileSaver 来保存画布图像。

根据您的喜好通过 CDN 或本地添加 FileSaver。
在您的代码中进一步使用saveAs()（在FileSaver 中定义）如下：

代码：

$('#save').on("click", function() {  
  canvas.toBlob(function (blob) {  
    saveAs(blob, 'output.png');  
  }, 'image/png');
});

这会很好。

【讨论】：