用FileSaver.js保存PNG文件

Question

我正在尝试使用FileSaver.js下载我的express应用程序提供的PNG文件。这些文件是作为base64编码的字符串发送的，但是当我尝试使用FileSaver.js保存它们时，它们就被损坏了。

这就是我试图拯救他们的方式：

var blob = new Blob([base64encodedString], {type: "data:image/png;base64"});
saveAs(blob, "image.png");

我也使用了这种保存图像的方法，但是如果base64encodedString变得太大，它就不起作用了：

var download = document.createElement('a');
download.href = 'data:image/png;base64,' + base64encodedString;  
download.download = 'reddot.png';
download.click();

我在FileSaver.js上做错了什么？

Answer 1

我发现你可能想先把它写到画布上。

Click Here

base_image = new Image();
base_image.src = Base64String

画布变成一个斑点

var canvas = document.getElementById('YourCanvas');
context = canvas.getContext('2d');
// Draw image within
context.drawImage(base_image, 0,0);

然后，您可以使用FileSaver.js保存它

并最终保存它

x_canvas.toBlob(function(blob) {
saveAs(blob, "screenshot.png");
}, "image/png");

在那篇文章 Click Here For Fiddle 中也为此创建了一个很好的小提琴