使用 FileSaver.js 保存 PNG 文件

Posted 2023-05-07

【中文标题】使用 FileSaver.js 保存 PNG 文件

【英文标题】：Saving PNG files with FileSaver.js

【发布时间】：2015-10-20 17:23:39

【问题描述】：

我正在尝试使用 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 有什么问题？

【问题讨论】：

检查 base64 字符串并确保它显示图像，如果需要，您可以使用在线 base64 转换器。在您将其发送到文件保护程序之前它可能已损坏，因此请先检查它是否有效。

@JoshLeeDucks 我一直在尝试使用在线工具对其进行转换，但没有取得任何成功，但是当我使用第二种方法下载（最小）图像时，它可以工作，所以它应该也适用于 Blob 方法。

【参考方案1】：

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

Click Here

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

画布成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");

在那篇帖子 Click Here For Fiddle 中也为此创建了一个不错的小提琴