How to download a base64-encoded image?
Question
I have a base64-encoded image from the server for which I want to force the download through JavaScript. Is is possible?
10 answers
solution1
106 2012-12-23 12:49:26
If you want to download it using JavaScript (without any back-end) use:
window.location.href = 'data:application/octet-stream;base64,' + img;where
imgis your base64 encoded image.If you want to allow the user to specify a file name, use the
downloadattribute of theatag:<a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</a>- Notice: The download attribute is not supported by very old browsers
solution2
81 2019-11-12 16:55:00
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 filesolution3
38 2020-03-17 09:34:02
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();
}
solution4
10 2019-08-07 01:46:52
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();
});
};
solution5
9 2020-01-15 08:56:50
I have a base64-encoded image from the server for which I want to force the download through JavaScript. Is is possible?
solution6
9 2021-04-02 13:47:11
I don't know whether am late to answer this, but I think the better solution could be this.
Create a file from the base64string
const convertBase64ToFile = (base64String, fileName) => { let arr = base64String.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length; let uint8Array = new Uint8Array(n); while (n--) { uint8Array[n] = bstr.charCodeAt(n); } let file = new File([uint8Array], fileName, { type: mime }); return file; }Install File Saver from npm with
npm install file-saverImport File Saver
const { saveAs } = require('file-saver'); /// OR import { saveAs } from 'file-saver';Using File Saver download the file
const downloadBase64Data = (base64String, fileName) => { let file = convertBase64ToFile(base64String, fileName); saveAs(file, fileName); }
If this Answer has worked for you please upvote it and mark it as correct to help others easily find it
solution7
6 2018-11-16 12:29:06
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
solution8
6 2020-11-25 07:26:46
In my Angular App, I am getting the base 64 files from server.
In Html:-
<button type="button" (click)="downloadFile(fileName,base64data,fileType)"></button>
In Ts:-
downloadFile(fileName:string,data: any,fileFormat:string): void {
const linkSource = 'data:'+fileFormat+';base64'+data;
const downloadLink = document.createElement("a");
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();
}
solution9
2 2019-02-08 15:34:57
If you already have it in base64, add the image tag in front of the base64. attach it to the element
png64 = "data:image/" + png64;
$('#downloadPNG').attr('href', png64);
Add the file name that you want when downloading to the download tag.
<a download="chart.png" id="downloadPNG">Export img</a>
solution10
2 2019-09-06 09:54:04
In my React App, I was getting the base 64 images from an API, I stored it in a global prop and downloaded it with the help of <a> tag.
<a href={`data:application/octet-stream;base64,${this.props.base64image}`} download={"imageName"}>Click to Download the image</a>
solution11
0 2019-12-18 13:39:29
At first: This question is extremly browser dependent, I tried many: so I came up to answer this question that way:
You should put the base64-Data inside the src-Tag of an IMG-Element: How to display Base64 images in HTML? Then you can right click the Image and click "Save Image..." (or similar) in these browsers:
- Chrome 79
- Edge 44
- Firefox 71
- IE 11
- Safari 13
Also on Android with Chrome and Firefox. Biggest file working was 23 MB PNG-File in IE 11 and Safari 13. But Firefox and Chrome did also work for 86 MB JPEG.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.