使用FileSaver.js保存PNG文件

我正在嘗試使用FileSaver.js從我的快捷應用中下載PNG文件。這些文件是以base64編碼的字符串形式發送的，但是當我嘗試使用FileSaver.js來保存它們時，它們會被損壞。使用FileSaver.js保存PNG文件

這是我試圖挽救它們的方式：

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錯？

來源

2015-10-20 martin

檢查base64字符串並確保它顯示圖像，如果需要，可以使用在線base64轉換器。它在發送到文件保護程序之前可能已損壞，因此請檢查它是否有效。 –

@JoshLeeDucks我一直在嘗試使用在線工具進行轉換，但沒有取得任何成功，但是當我使用第二種方法下載（最小）圖像時，它的工作原理也適用於Blob方法。 – martin

我發現你可能想先寫入到Canvas。

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

來源

2015-10-20 18:13:10

使用FileSaver.js保存PNG文件

回答

相關問題