Take picture from webcam or mobile camera in web applications

Question

I'm developing a web application which browse and take pictures from local and also I want to capture images through the camera. Im using the following code and i can capture device camera.

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

Now, I want to get the image and onchangeevent, convert to base64 and want to show in that page itself.

Kindly help me guys!

Answer 1

Miles Erickson and Henock Bongi, you need to take reader.readAsDataUrl($data); out of the onload function in order that the onload fire.

If you don't want to use jQuery see below:

function readFile(file) {                                                       
    var reader = new FileReader();
    reader.onload = readSuccess;                                            
    function readSuccess(evt) {     
        document.getElementById("your_img_id").src = evt.target.result                   
    };
    reader.readAsDataURL(file);                                              
} 

document.getElementById('cameraInput').onchange = function(e) {
    readFile(e.srcElement.files[0]);
};

Answer 2

You can do it like this:

$('#cameraInput').on('change', function(e){
 $data = e.originalEvent.target.files[0];
  $reader = new FileReader();
  reader.onload = function(evt){
  $('#your_img_id').attr('src',evt.target.result);
  reader.readAsDataUrl($data);
}});