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

Take picture from webcam or mobile camera in web applications

本文关键字：网络 相机 照片 移动 摄像头 应用程序      更新时间：2023-09-26

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

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

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

请帮帮我！

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

你可以

这样做：

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


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

相关文章：