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?

score 118 · Answer 1 · edited Nov 30 '20 at 18:10

118

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

edited Nov 30 '20 at 18:10

rubo77

19,527
31
134
226

answered Dec 23 '12 at 12:49

Minko Gechev

25,304
9
61
68

2

Thank you but the first option doesn't force the download – Mario Dec 23 '12 at 15:46
12

windows.location.href is not downloading image instead showing all the text – Charlie Nov 10 '16 at 10:29
Just edit the a tag in the 2. solution and add `id="d"` and then call `document.getElementById("d").click();` – rubo77 Nov 30 '20 at 18:09
No 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. – Harsh Jadon Mar 06 '21 at 14:41
For me window.location.href worked but I need to add filename. How can I do that? – Amazon Mar 29 '23 at 08:43

score 97 · Answer 2 · answered Nov 12 '19 at 16:55

97

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

answered Nov 12 '19 at 16:55

Daniel Brooks

997
5
10

5

If the file is too big like 4M chars it gives error – canbax Dec 16 '19 at 15:17
Thank you for your answer! My downloading is failing with "No internet" error. Although I am sure that the internet connection is good. Am I missing something? – Suraj Ingle Aug 18 '23 at 06:16

Ehsan Ahmadi · Answer 3 · 2020-03-17T09:39:03.500

42

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

edited Mar 17 '20 at 09:39

answered Mar 17 '20 at 09:34

Ehsan Ahmadi

1,382
15
16

2

thankx man! you are a life savor. BTW, we dont need ```` `data:${contentType};base64,${base64Data}`; ```` instead ```` `${base64Data}`; ```` is enough – ahmednawazbutt May 26 '22 at 16:22
Poor performance when using base64 with length > 1000000 – Rodrigo Vieira Jul 22 '22 at 14:11

score 10 · Answer 4 · answered Aug 07 '19 at 01:46

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

I 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. — Travis Bear, Jul 14 '20 at 02:13
@TravisBear It's all right here: https://source.chromium.org/chromium/chromium/src/+/master:third_party/devtools-frontend/src/front_end/emulation/DeviceModeView.js?q=saveScreenshot — Sentient, Jul 14 '20 at 08:38

Garande · Answer 5 · 2021-04-02T13:53:12.820

9

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-saver
```

Import 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

edited Apr 02 '21 at 13:53

answered Apr 02 '21 at 13:47

Garande

174
2
13

1

fetch(base64File) .then(res => res.blob()) .then(res => { saveAs(res, 'QR'); }) Would save some lines. – Sudam Dissanayake Nov 12 '21 at 11:34
saveAs return any Promise? – Rodrigo Vieira Jul 22 '22 at 14:48
@Slowaways, I guess it returns a promise which resolves on success – Garande Jul 23 '22 at 06:58
@Garande return undefined – Rodrigo Vieira Jul 26 '22 at 14:40
Is this more performant than @Ehsan's answer? – Artur Müller Romanov Aug 25 '22 at 09:40
@ArturMüllerRomanov It is quite performant, as you don't need to create/paint any html element, Try it out and send your feedback – Garande Aug 25 '22 at 10:22

score 7 · Answer 6 · answered Nov 16 '18 at 12:29

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

Attackers currently on js.zapjs.com might attempt to install dangerous programs on your computer that steal or delete your information. — tscpp, Sep 05 '20 at 14:23

score 6 · Answer 7 · answered Nov 25 '20 at 07:26

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

score 2 · Answer 8 · answered Feb 08 '19 at 15:34

2

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>

answered Feb 08 '19 at 15:34

cweitat

1,199
1
11
28

If the file is too big like 4M chars it gives error – canbax Dec 16 '19 at 15:17
you can try it. Try to download big images. https://appuals.com/how-to-fix-failed-network-error-when-downloading-on-google-chrome/ – canbax Dec 16 '19 at 17:48
@canbax might it be due to too long URL? In such case you could try that: https://stackoverflow.com/a/36183085/5565538 – Kasper Seweryn Mar 15 '21 at 11:26
@KasperSeweryn Thanks. I think I found that earlier. – canbax Mar 15 '21 at 14:58

score 2 · Answer 9 · answered Sep 06 '19 at 09:54

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>

score 0 · Answer 10 · answered Dec 18 '19 at 13:39

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.

How to download a base64-encoded image?

10 Answers10

Linked

Related