使用FileSaver.js保存PNG文件

时间:2015-10-20 17:23:40

标签: javascript blob filesaver.js

我尝试使用FileSaver.js下载从我的快递应用程序提供的PNG文件。这些文件是作为base64编码的字符串发送的,但是当我尝试使用FileSaver.js保存它们时,它们就会被破坏。

这就是我试图保存它们的方式:

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

我也使用过这种保存图片的方法,但如果base64encodedString变得太大,它就不起作用了:

perl -i -pe 's/\r//g' filename

我在使用FileSaver.js做错了什么?

1 个答案:

答案 0 :(得分:3)

我发现你可能想先将它写入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

中也为此创建了一个不错的小提琴