How to download a base64-encoded image?

JavascriptHtmlImageBase64

Javascript Problem Overview

I have a base64-encoded image from the server for which I want to force the download through JavaScript. Is is possible?

Javascript Solutions

Solution 1 - Javascript

  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.

  2. If you want to allow the user to specify a file name, use the download attribute of the a 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 - Javascript

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 - Javascript

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 - Javascript

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 - Javascript

I don't know whether am late to answer this, but I think the better solution could be this.

  1. 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;
}

  2. Install File Saver from npm with

    npm install file-saver

  3. Import File Saver

    const { saveAs } = require('file-saver');
/// OR 
import { saveAs } from 'file-saver';

  4. 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

Solution 6 - Javascript

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

Solution 7 - Javascript

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();
}

Solution 8 - Javascript

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>

Solution 9 - Javascript

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>

Solution 10 - Javascript

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: https://stackoverflow.com/questions/8499633/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.

Categories
Recommended Javascript Solutions
Recommended Html Solutions
Recommended Image Solutions
Recommended Base64 Solutions

Previous Solution:

What is most idiomatic way to create an iterator in Go?

IteratorGo

Next Solution:

What is START_STICKY,START_NOT_STICKY and START_REDELIVER_INTENT Service

AndroidAndroid Intent

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMarioView Question on Stackoverflow
Solution 1 - JavascriptMinko GechevView Answer on Stackoverflow
Solution 2 - JavascriptDaniel BrooksView Answer on Stackoverflow
Solution 3 - JavascriptEhsan AhmadiView Answer on Stackoverflow
Solution 4 - JavascriptSentientView Answer on Stackoverflow
Solution 5 - JavascriptGarandeView Answer on Stackoverflow
Solution 6 - JavascriptAmit GandoleView Answer on Stackoverflow
Solution 7 - Javascriptdatta ambareeshView Answer on Stackoverflow
Solution 8 - JavascriptcweitatView Answer on Stackoverflow
Solution 9 - JavascriptPiyush ThawakarView Answer on Stackoverflow
Solution 10 - JavascriptSebastianView Answer on Stackoverflow