Javascript 如何使用按钮从画布保存图像？

我有一个“保存”按钮，我需要它允许用户下载画布图像作为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'/>");
})

$（'#保存'）。在（“单击”，函数（）{
var w=window.open（'about:blank'，'image from canvas'）；
w、 文件。填写（“”）；
})

它将画布图像打开到一个新页面中，并允许下载图像（否则将图像显示为黑色图像）。

---

有没有一种方法可以让用户在单击“保存”按钮时直接下载图像，而无需清除当前画布或在新页面中打开？

设置

href

，然后使用

下载

属性是下载画布图像的一个简单技巧，但并不总是在所有浏览器中都有效，我建议您使用保存画布图像

• 根据您的需要，通过CDN或本地包含

  FileSaver

• 进一步在代码中使用

  saveAs（）

  （这在

  FileSaver

  中定义）如下：

代码：

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

---

这会很好。

也许这对你会有帮助。这是使用锚定标记，而不是按钮，因为它使用下载功能中的

href

。@NewToJS我将fiddle代码复制到我的文件中，它几乎完全按照我想要的方式工作！但是有一件事-我的背景是透明的，代码在画布图像后面给了我一个完全黑色的背景-有没有办法解决这个问题？你是否尝试过将

ctx.fillStyle

替换为

ctx.fillStyle=“rgba（0，0，0，0）”例如：我在这里找到了替换背景的代码：@NewToJS如果你用你在评论中写的内容回答这个问题，我会选择它作为最佳答案。这帮了大忙！