Lưu tệp PNG bằng FileSaver.js

Question

Tôi đang cố gắng sử dụng FileSaver.js để tải xuống tệp PNG đang được phân phối từ ứng dụng nhanh của tôi. Các tệp đang được gửi dưới dạng chuỗi được mã hóa base64, nhưng khi tôi cố gắng sử dụng FileSaver.js để lưu chúng, chúng sẽ bị hỏng.

Đây là cách tôi đang cố gắng để cứu họ:

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

Tôi cũng đã sử dụng phương pháp này tiết kiệm những hình ảnh, nhưng nó không hoạt động nếu base64encodedString trở nên quá lớn:

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

Tôi đang làm gì sai với FileSaver.js?

Answer 1

Tôi nhận thấy rằng trước tiên bạn có thể muốn viết nó lên Canvas.

Click Here

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

vải thành một blob

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

sau đó bạn có thể sử dụng FileSaver.js để lưu nó

và cuối cùng là lưu nó

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

Một fiddle đẹp cũng được tạo ra cho điều này trong bài viết Click Here For Fiddle