How to Download a Base64-Encoded Image

How download base64 data as image?

This is not the most optimized solution, But it works.

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

In your case you can try this

var canvas = document.querySelector("canvas");

var signaturePad = new SignaturePad(canvas);

// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
signaturePad.toDataURL("image/jpeg"); // save image as JPEG

source : https://vuejsexamples.com/vue-signature-pad-component/

Javascript: unable to download the base64 decoded image

Here you can get what you are looking for
How to download a base64-encoded image?

• if not please share some codepen link so i can help you out.

Can I download an image if it's in base64 format?

Note: The examples in the snippets will not work live because Stack Overflow sandboxes snippets without allow-downloads, but they should work on your page.

Depending on your exact use case, you have different options. The easiest one would be using an <a> tag with the download attribute instead of a button, like this:

<a download="myImage.gif" href="data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2CmV1unU4zPgISg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7">Download GIF</a>

got(imgUrl, {
    encoding: null
})
.then(response => response.body.toString('base64'))
.then(console.log)

got(imgUrl, {
        encoding: 'base64'
    })
    .then(response => response.body)
    .then(console.log)