在网络应用程序中从网络摄像头或移动相机拍照

时间:2016-02-07 12:57:59

标签: javascript jquery html html5 camera

我正在开发一个从本地浏览和拍摄照片的网络应用程序,我也希望通过相机捕获图像。我使用以下代码,我可以捕获设备相机。

'

现在,我想获取图像和onchangeevent,转换为base64并希望在该页面中显示。

请帮助我们!

2 个答案:

答案 0 :(得分:7)

你可以这样做:

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

答案 1 :(得分:5)

Miles Erickson和Henock Bongi,你需要带读者.readAsDataUrl($ data);超出onload函数,以便onload触发。

如果您不想使用jQuery,请参阅下文:



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