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

Question

我正在开发一个 Web 应用程序，它可以从本地浏览和拍照，我还想通过相机捕捉图像。我使用以下代码，我可以捕获设备相机。

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

现在，我想获取图像和 onchangevent，转换为 base64 并希望在该页面本身中显示。

请帮帮我！

原文由 ganesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以这样做：

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

原文由 Henock Bongi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Miles Erickson 和 Henock Bongi，你需要带上 reader.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]);
};

原文由 Ana Houa 发布，翻译遵循 CC BY-SA 3.0 许可协议