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
– Rayon, Commented Jan 20, 2014 at 5:58
To resurrect an old post, take a look here: stackoverflow.com/a/19644105 — Luke Madhanga
– Luke Madhanga, Commented Apr 23, 2014 at 8:38

Joseph · Accepted Answer · 2014-01-20 06:06:14Z

212

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, 2014 at 6:06

answered Jan 20, 2014 at 5:55

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user2996174 Over a year ago

Can u explain clearly means the image returns object html element and how to read as image

user2996174 Over a year ago

Here am writing img tag <img id="myImg" src="d:\\face.png" border=1> and am using these code document.getElementById('myImg').src=item_image;//<img tag> but its not working

Joseph Over a year ago

That's because your code removed the data:image... part from item_image.

John Over a year ago

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.

Gabe O'Leary Over a year ago

@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.

|

Tran Anh Hien · Accepted Answer · 2017-02-22 08:11:58Z

27

Html

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

Js

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

answered Feb 22, 2017 at 8:11

Tran Anh Hien

7859 silver badges13 bronze badges

1 Comment

arash yousefi Over a year ago

I totally agree @Andrew

Jürgen 'Kashban' Wahlmann · Accepted Answer · 2017-04-04 14:13:31Z

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.

jare25 · Accepted Answer · 2018-11-08 12:27:21Z

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 8, 2018 at 12:27

jare25

5161 gold badge8 silver badges18 bronze badges

1 Comment

Frank Over a year ago

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.

Tunaki · Accepted Answer · 2016-06-05 12:03:23Z

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 5, 2016 at 12:03

Tunaki

138k46 gold badges370 silver badges443 bronze badges

answered Jun 5, 2016 at 3:01

MRTC

3092 silver badges8 bronze badges

1 Comment

Raz Over a year ago

This is the only answer that actually worked!!!! Now, how to send this as an AJAX request?

John Haugeland · Accepted Answer · 2016-06-05 23:51:57Z

0

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

}

answered Jun 5, 2016 at 23:51

John Haugeland

9,7283 gold badges40 silver badges43 bronze badges

Comments

Arenukvern · Accepted Answer · 2022-08-16 11:09:57Z

-1

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/

answered Aug 16, 2022 at 11:09

Arenukvern

5346 silver badges12 bronze badges

Collectives™ on Stack Overflow

convert base64 to image in javascript/jquery

7 Answers 7

10 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

10 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related