Saving PNG files with FileSaver.js
13,228
I've found that you'll probably want to write it to a Canvas first.
base_image = new Image();
base_image.src = Base64String
canvas into a blob
var canvas = document.getElementById('YourCanvas');
context = canvas.getContext('2d');
// Draw image within
context.drawImage(base_image, 0,0);
then you can use FileSaver.js to save it
and finally save it
x_canvas.toBlob(function(blob) {
saveAs(blob, "screenshot.png");
}, "image/png");
A nice fiddle was also created for this in that post Click Here For Fiddle
Author by
martin
Updated on June 18, 2022Comments
-
martin almost 2 years
I'm trying to use FileSaver.js to download PNG files that are being served from my express app. The files are being sent as base64 encoded strings, but when I try to use FileSaver.js to save them they become corrupted.
This is the way I'm trying to save them:
var blob = new Blob([base64encodedString], {type: "data:image/png;base64"}); saveAs(blob, "image.png");
I've also used this method of saving the images, but it doesn't work if the base64encodedString becomes too large:
var download = document.createElement('a'); download.href = 'data:image/png;base64,' + base64encodedString; download.download = 'reddot.png'; download.click();
What am I doing wrong with the FileSaver.js?