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 prints the base64 format, How to convert that base64 to image and how to use that path in javascript clientside.

Answer 1

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

Want to be a Full Stack Developer? Check out the Full Stack developer course from Intellipaat.