javascript - 使用 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

我发现您可能想先将其写入 Canvas。

Click Here

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

Canvas 变成一个blob

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");

在那篇文章中也为此创建了一个不错的 fiddle Click Here For Fiddle