convert base64 to image in javascript/jquery

javascript jquery base64
user2996174 picture user2996174 · Jan 20, 2014 · Viewed 262.4k times · Source

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.

Answer

Joseph picture Joseph · Jan 20, 2014

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.

Related questions

Image convert to Base64

<input type="file" id="asd"/> I would like to get the image in base64 once the user chose that (before submitting the form) Something like : $(input).on('change',function(){ var data = $(this).val().base64file(); // it is not …

Read More
Convert HTML5 Canvas into File to be uploaded?

The standard HTML file upload works as follows: <g:form method="post" accept-charset="utf-8" enctype="multipart/form-data" name="form" url="someurl"> <input type="file" name="file" id="file" /> </form> In my case I loaded …

Read More
JS - get image width and height from the base64 code

I have a base64 img encoded that you can find here. How can I get the height and the width of it?

Read More