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


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

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

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

请帮助我们!


7331
2018-02-07 12:57


起源

可能重复 如何从网络应用访问移动相机? - Mosh Feu
这是一个有趣的图书馆。 https://github.com/jhuckaby/webcamjs - dimshik
可能重复 如何从html图像中获取base64编码数据 - Mazzy
这不是重复,因为他想在页面上显示图像,大概不必先上传它。 - Relaxing In Cyprus
可能重复 访问网页中的网络摄像头 - Sarin Jacob Sunny


答案:


你可以这样做:

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

7
2017-09-25 09:08



您使用折旧的任何原因 bind VS on? - MCB
谢谢!我之前正在使用它 on 代替 bind。 - Henock Bongi


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


4
2018-01-14 17:06



回答一个2岁的帖子有什么意义?无论哪种方式,最好使用URL.createObjectURL而不是使用FileReader - Endless
这一点可供像我这样的人参考,他们花了20分钟搞清楚为什么reader.onload不是很强烈:) - Ana Houa