How to download a base64-encoded image?

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

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

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

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

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

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

Failed to load module descriptor class: Didn't find class "com.google.android.gms.dynamite.descriptors.com.google.firebase.auth.ModuleDescriptor"

Break out of a while loop that contains a switch statement

PHP: get number of decimal digits

Error: [ng:areq] from angular controller

How to access the "key" property from a reactjs component

Divergence of an integral related to a Riemann integral $\int_{1}^{\infty}\dfrac{1}{x}dx$

differential equation, compute the time needed to repay the loan

Outer faces in disconnected planar graph

If $|G|=12$ with $|Z(G)|=2$, prove that the group $G$ has only one subgroup of order $3$.

Dual problem of a quadratic problem