How to download a base64-encoded image?
147,028
Solution 1
-
If you want to download it using JavaScript (without any back-end) use:
window.location.href = 'data:application/octet-stream;base64,' + img;
where
img
is your base64 encoded image. -
If you want to allow the user to specify a file name, use the
download
attribute of thea
tag:<a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</a>
- Notice: The download attribute is not supported by very old browsers
Solution 2
Simple way to do this with Javascript...
var a = document.createElement("a"); //Create <a>
a.href = "data:image/png;base64," + ImageBase64; //Image Base64 Goes here
a.download = "Image.png"; //File name Here
a.click(); //Downloaded file
Solution 3
It is so simple just use function below:
// Parameters:
// contentType: The content type of your file.
// its like application/pdf or application/msword or image/jpeg or
// image/png and so on
// base64Data: Its your actual base64 data
// fileName: Its the file name of the file which will be downloaded.
function downloadBase64File(contentType, base64Data, fileName) {
const linkSource = `data:${contentType};base64,${base64Data}`;
const downloadLink = document.createElement("a");
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();
}
Solution 4
I found this solution from the sourcecode of how Chrome takes full-page screenshots.
const base64string = "";
const pageImage = new Image();
pageImage.src = 'data:image/png;base64,' + base64string;
pageImage.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = pageImage.naturalWidth;
canvas.height= pageImage.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.drawImage(pageImage, 0, 0);
console.log(canvas, pageImage)
saveScreenshot(canvas);
}
function saveScreenshot(canvas) {
let fileName = "image"
const link = document.createElement('a');
link.download = fileName + '.png';
console.log(canvas)
canvas.toBlob(function(blob) {
console.log(blob)
link.href = URL.createObjectURL(blob);
link.click();
});
};
Solution 5
You can try this :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Download Text File DataURL Demo</title>
<style>
body{ font: menu; }
</style>
<script src='//js.zapjs.com/js/download.js'></script>
</head>
<body>
<h1>Download Text File DataURL Demo</h1>
<main></main>
<script>
download("data:application/octet-stream;base64,YOUR BASE64URL", "dlDataUrlText.jpeg", "application/octet-stream;base64");
</script>
</body>
</html>
download tag downloads the image using the script included.
For reference you can try this URL : http://danml.com/download.html
Comments
-
Mario almost 2 years
I have a base64-encoded image from the server for which I want to force the download through JavaScript. Is is possible?
-
Mario over 11 yearsThank you but the first option doesn't force the download
-
Charlie over 7 yearswindows.location.href is not downloading image instead showing all the text
-
canbax over 4 yearsIf the file is too big like 4M chars it gives error
-
canbax over 4 yearsIf the file is too big like 4M chars it gives error
-
canbax over 4 yearsyou can try it. Try to download big images. appuals.com/…
-
Travis Bear almost 4 yearsI know you didn't write this. And I'm willing to believe it works. But.... seriously? Creating a virtual link and then doing a virtual click? Seems really hacky.
-
Sentient almost 4 years@TravisBear It's all right here: source.chromium.org/chromium/chromium/src/+/master:third_party/…
-
tscpp over 3 yearsAttackers currently on js.zapjs.com might attempt to install dangerous programs on your computer that steal or delete your information.
-
rubo77 over 3 yearsJust edit the a tag in the 2. solution and add
id="d"
and then calldocument.getElementById("d").click();
-
Harsh Jadon about 3 yearsNo one should use the second option, its a very heavy to use option. like, it lags a normal computer when downloading a 1080px encoded jpg file.
-
Kasper Seweryn about 3 years@canbax might it be due to too long URL? In such case you could try that: stackoverflow.com/a/36183085/5565538
-
canbax about 3 years@KasperSeweryn Thanks. I think I found that earlier.
-
Buwaneka Sudheera about 3 yearsThis is the only answer that helped me in my situation. Thanks
-
Sudam Dissanayake over 2 yearsfetch(base64File) .then(res => res.blob()) .then(res => { saveAs(res, 'QR'); }) Would save some lines.
-
ahmednawazbutt about 2 yearsthankx man! you are a life savor. BTW, we dont need ````
data:${contentType};base64,${base64Data}
; ```` instead ````${base64Data}
; ```` is enough