How do i convert From a base64 string to Image using Javascript

Question

I have a base64 string now I want to convert that base 64 string to Image, any ideas what I can do?

Possible duplicate of [convert base64 to image in javascript/jquery](https://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery) — ellipsis, Jan 14 '19 at 11:35
Have you tried googling the title of this question? Please read [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/a/261593/3082296) — adiga, Jan 14 '19 at 12:36

score 0 · Answer 1 · answered Jan 14 '19 at 11:36

0

Try this

<img id="img"></img>
string base64="";
img.setAttribute('src', "data:image/jpg;base64," + base64);

answered Jan 14 '19 at 11:36

ellipsis

12,049
2
17
33

score 0 · Answer 2 · answered Jan 14 '19 at 11:37

0

Your html can handle the base64 as long as you have 'data:image/png;base64,' as part of the img src. Sample below.

<img src="data:image/png;base64, base64goeshere" alt="blah" />

answered Jan 14 '19 at 11:37

MrBlonde

21
6

score 0 · Answer 3 · answered Jan 14 '19 at 11:37

just append data:image/png;base64, before your base64 string and add it into src of your image.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAG1BMVEXMzMyWlpaqqqq3t7fFxcW+vr6xsbGjo6OcnJyLKnDGAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABAElEQVRoge3SMW+DMBiE4YsxJqMJtHOTITPeOsLQnaodGImEUMZEkZhRUqn92f0MaTubtfeMh/QGHANEREREREREREREtIJJ0xbH299kp8l8FaGtLdTQ19HjofxZlJ0m1+eBKZcikd9PWtXC5DoDotRO04B9YOvFIXmXLy2jEbiqE6Df7DTleA5socLqvEFVxtJyrpZFWz/pHM2CVte0lS8g2eDe6prOyqPglhzROL+Xye4tmT4WvRcQ2/m81p+/rdguOi8Hc5L/8Qk4vhZzy08DduGt9eVQyP2qoTM1zi0/uf4hvBWf5c77e69Gf798y08L7j0RERERERERERH9P99ZpSVRivB/rgAAAABJRU5ErkJggg==" alt="">

score 0 · Answer 4 · edited Dec 12 '19 at 15:36

Please use the below function and pass base64 as dataurl and name of file as filename in the below function.

function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
}

How do i convert From a base64 string to Image using Javascript

4 Answers4