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

Question

I'm developing a React App, and I have a backend in NodeJS. In my Mongo Schema I have an array that stores multiple strings, these strings are some images. I saved them as base64. Now I want to display them in my app, works perfectly fine with src from img tag, but I want to create a button that allows the user to download those pictures, is there any solution to this? Can I convert back that string and make it downloadable? Thank you very much for you time, I'm waiting for your ideas!

Answer 1

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>

If you need to keep using a button and you want to trigger the download programmatically, you can create an <a> tag (without displaying it) and trigger a click:

const a = document.createElement('a')
a.download = 'myImage.gif'
a.href = 'data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2CmV1unU4zPgISg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQPbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7'
a.click()

(If you need to support older browsers, you may have to temporarily insert the tag into the DOM and trigger the click in a setTimeout(..., 0).)

You can also use object URLs like it's shown here but it's probably easier to go the data URI route since you already have such a URI.