Scattare foto da webcam o fotocamera mobile nelle applicazioni Web

Question

Sto sviluppando un'applicazione Web che consente di sfogliare e scattare foto da locali e anche di acquisire immagini tramite la fotocamera. Sto usando il seguente codice e posso catturare la fotocamera del dispositivo.

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

Ora, voglio ottenere l'immagine e onchangeevent, convertire in base64 e vogliono dimostrare in quella pagina stessa.

Gentilmente aiutami ragazzi!

Answer 1

Si può fare in questo modo:

$('#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); 
}}); 

Answer 2

Miles Erickson e Henock Bongi, è necessario prendere reader.readAsDataUrl ($ data); fuori dalla funzione onload in modo che l'incendio onload.

Se non si desidera utilizzare jQuery vedi sotto:

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