web-dev-qa-db-fra.com

Prendre des photos à partir d'une webcam ou d'une caméra mobile dans des applications Web

Je suis en train de développer une application Web qui permet de parcourir et de prendre des photos à partir du local et je souhaite également capturer des images via l'appareil photo. Im en utilisant le code suivant et je peux capturer la caméra de l'appareil.

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

Maintenant, je veux obtenir l'image et onchangeevent, convertir en base64 et vouloir afficher dans cette page elle-même.

Veuillez m'aider les gars!

javascriptjqueryhtmlhtml5camera
13
ganesh

Vous pouvez le faire comme ceci:

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

Miles Erickson et Henock Bongi, vous devez prendre reader.readAsDataUrl ($ data); hors de la fonction de charge afin que le feu se charge.

Si vous ne souhaitez pas utiliser jQuery, voir ci-dessous:

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