Question

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

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

Answer 1

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

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

代码：

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

这会很好的。

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

1 个答案: