convert base64 to image in javascript/jquery

Question

I have written some code for image capturing using javascript/jquery Below is the code:

function capture_image(){ 
    alert("capture_image");
    var p = webcam.capture();
    webcam.save();           
    alert("capture complete "+p); //getting true here


     var img = canvas.toDataURL("image");
    var item_image = img.replace(/^data:image\/(png|jpg);base64,/, "") ; 
    alert("item_image"+item_image);
}

The item_image print the base64 format, How to convert that base64 to image and how to use that path in javascript clientside.

Am searching google so many websites but its not working and that code is not suitable for my requirement.

If you want that base64 data as an image then you will have to process thet string at server side and use path of the saved image on server side. You can do this by using Ajax Post method. — Rayon, Jan 20 '14 at 05:58
To resurrect an old post, take a look here: http://stackoverflow.com/a/19644105 — Luke Madhanga, Apr 23 '14 at 08:38

Joseph · Answer 1 · 2014-01-20T06:06:14.260

195

You can just create an Image object and put the base64 as its src, including the data:image... part like this:

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

It's what they call "Data URIs" and here's the compatibility table for inner peace.

edited Jan 20 '14 at 06:06

answered Jan 20 '14 at 05:55

Joseph

117,725
30
181
234

2

Can u explain clearly means the image returns object html element and how to read as image – user2996174 Jan 20 '14 at 06:28
Here am writing img tag and am using these code document.getElementById('myImg').src=item_image;// but its not working – user2996174 Jan 20 '14 at 06:51
That's because your code removed the `data:image...` part from `item_image`. – Joseph Jan 20 '14 at 07:05
@user2996174 It would be better if you set up a demo on JSFiddle first. We don't know what exactly is wrong with your code when my demo works fine. – Joseph Jan 20 '14 at 07:24
Ok, I want to save the image.src as image file in android sdcard using phonegap. – cheliyan Jun 26 '14 at 10:57
8

I think I'm looking for the same thing OP is. I believe he wants the image url to point to a .png, not the original base64 encoded string. Looking for a conversion somewhere in there if it is possible. – John Sep 15 '15 at 18:37
1

@John you would have to save, upload and host the file somewhere as the data URI has no reference to where the file originally came from. – Gabe O'Leary May 03 '16 at 20:00
@GabeO'Leary That's not quite what John meant. He wants to take the base64 data of the image and store it into a png file on the client. I am trying the same thing right now. – Jürgen 'Kashban' Wahlmann Feb 24 '17 at 10:27
@Ivaro18 See my answer above – Jürgen 'Kashban' Wahlmann Apr 04 '17 at 14:14
why do we need `data:image/png;base64,` before the long base64? – localhost Feb 01 '18 at 00:13

score 22 · Answer 2 · answered Feb 22 '17 at 08:11

22

Html

<img id="imgElem"></img>

Js

string baseStr64="/9j/4AAQSkZJRgABAQE...";
imgElem.setAttribute('src', "data:image/jpg;base64," + baseStr64);

answered Feb 22 '17 at 08:11

Tran Anh Hien

687
8
11

1

straight, simple, and functional. Thanks – Andrew Sep 07 '22 at 00:44
I totally agree @Andrew – arash yousefi Jul 13 '23 at 07:25

score 22 · Answer 3 · answered Apr 04 '17 at 14:13

This is not exactly the OP's scenario but an answer to those of some of the commenters. It is a solution based on Cordova and Angular 1, which should be adaptable to other frameworks like jQuery. It gives you a Blob from Base64 data which you can store somewhere and reference it from client side javascript / html.

It also answers the original question on how to get an image (file) from the Base 64 data:

The important part is the Base 64 - Binary conversion:

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

Slicing is required to avoid out of memory errors.

Works with jpg and pdf files (at least that's what I tested). Should work with other mimetypes/contenttypes too. Check the browsers and their versions you aim for, they need to support Uint8Array, Blob and atob.

Here's the code to write the file to the device's local storage with Cordova / Android:

...
window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dirEntry) {

                    // Setup filename and assume a jpg file
                    var filename = attachment.id + "-" + (attachment.fileName ? attachment.fileName : 'image') + "." + (attachment.fileType ? attachment.fileType : "jpg");
                    dirEntry.getFile(filename, { create: true, exclusive: false }, function(fileEntry) {
                        // attachment.document holds the base 64 data at this moment
                        var binary = base64toBlob(attachment.document, attachment.mimetype);
                        writeFile(fileEntry, binary).then(function() {
                            // Store file url for later reference, base 64 data is no longer required
                            attachment.document = fileEntry.nativeURL;

                        }, function(error) {
                            WL.Logger.error("Error writing local file: " + error);
                            reject(error.code);
                        });

                    }, function(errorCreateFile) {
                        WL.Logger.error("Error creating local file: " + JSON.stringify(errorCreateFile));
                        reject(errorCreateFile.code);
                    });

                }, function(errorCreateFS) {
                    WL.Logger.error("Error getting filesystem: " + errorCreateFS);
                    reject(errorCreateFS.code);
                });
...

Writing the file itself:

function writeFile(fileEntry, dataObj) {
    return $q(function(resolve, reject) {
        // Create a FileWriter object for our FileEntry (log.txt).
        fileEntry.createWriter(function(fileWriter) {

            fileWriter.onwriteend = function() {
                WL.Logger.debug(LOG_PREFIX + "Successful file write...");
                resolve();
            };

            fileWriter.onerror = function(e) {
                WL.Logger.error(LOG_PREFIX + "Failed file write: " + e.toString());
                reject(e);
            };

            // If data object is not passed in,
            // create a new Blob instead.
            if (!dataObj) {
                dataObj = new Blob(['missing data'], { type: 'text/plain' });
            }

            fileWriter.write(dataObj);
        });
    })
}

I am using the latest Cordova (6.5.0) and Plugins versions:

I hope this sets everyone here in the right direction.

score 21 · Answer 4 · answered Nov 08 '18 at 12:27

21

Have to add this based on @Joseph's answer. If someone want to create image object:

var image = new Image();
image.onload = function(){
   console.log(image.width); // image is loaded and we have image width 
}
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

answered Nov 08 '18 at 12:27

jare25

506
1
7
17

1

Good call. If I do `console.log(image.width);` directly after setting src I get 0 on the first load in Chrome, but on subsequent page reloads I get the actual width of the image. It seems that the browser is caching the image, but that very first load needs to be listened for because technically setting src is asynchronous, meaning you can't rely on having an image immediately after setting src to a base64 string. Code will continue to execute in synchronous order with an empty image unless you make sure it's properly loaded. – Frank Sep 06 '19 at 13:28

score 13 · Answer 5 · edited Jun 05 '16 at 12:03

13

var src = "data:image/jpeg;base64,";
src += item_image;
var newImage = document.createElement('img');
newImage.src = src;
newImage.width = newImage.height = "80";
document.querySelector('#imageContainer').innerHTML = newImage.outerHTML;//where to insert your image

edited Jun 05 '16 at 12:03

Tunaki

132,869
46
340
423

answered Jun 05 '16 at 03:01

MRTC

209
2
8

2

This is the only answer that actually worked!!!! Now, how to send this as an AJAX request? – Raz Apr 17 '18 at 20:02

score 0 · Answer 6 · answered Jun 05 '16 at 23:51

One quick and easy way:

function paintSvgToCanvas(uSvg, uCanvas) {

    var pbx = document.createElement('img');

    pbx.style.width  = uSvg.style.width;
    pbx.style.height = uSvg.style.height;

    pbx.src = 'data:image/svg+xml;base64,' + window.btoa(uSvg.outerHTML);
    uCanvas.getContext('2d').drawImage(pbx, 0, 0);

}

score -1 · Answer 7 · answered Aug 16 '22 at 11:09

Came to the following solution (please notice - I have not tested on across all browsers).

    // first convert to blob
    const dataToBlob = async (imageData) => {
      return await (await fetch(imageData)).blob();
    };
    
    const blob = await dataToBlob(destination.value);
    
    // then create URL object
    const url = URL.createObjectURL(blob);

Hope it helps someone:)

Inspiration sources:

Creating a BLOB from a Base64 string in JavaScript

https://blog.logrocket.com/cropping-images-in-the-browser-with-vue-js/

convert base64 to image in javascript/jquery

7 Answers7

Linked