Javascript 在web应用程序中使用网络摄像头或移动摄像头拍照

我正在开发一个web应用程序，它可以在本地浏览和拍照，而且我想通过相机拍摄图像。我使用下面的代码，我可以捕捉设备摄像头

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

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

---

请帮帮我，伙计们

您可以这样做：

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

---

Miles Erickson和Henock Bongi，您需要使用reader.readAsDataUrl（$data）；退出onload功能，以便onload启动

如果不想使用jQuery，请参见以下内容：

函数readFile（文件）{
var reader=new FileReader（）；
reader.onload=readSuccess；
函数readSuccess（evt）{
document.getElementById（“您的img\u id”）.src=evt.target.result
};
reader.readAsDataURL（文件）；
} 
document.getElementById（'cameraInput'）。onchange=函数（e）{
readFile（e.srcielement.files[0]）；
};此处的可能副本是一个有趣的库，它可以做到这一点。可能的重复不是重复，因为他想在页面上显示图像，可能不需要先上传。可能的重复是由于任何原因，您正在使用折旧的
bind
vs
on
？谢谢！我以前用过这个，现在我用的是
on
而不是
bind
。回复一篇2年的帖子有什么意义？无论哪种方式，最好使用URL.createObjectURL而不是使用FileReader。这一点对于像我这样花20分钟找出reader.onload没有出错原因的人来说是参考的：）是的，你是对的，我忘了从onload函数中取出它。谢谢