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

2exbekwf  于 2022-12-10  发布在  Java
关注(0)|答案(3)|浏览(139)

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

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

现在,我想获取图像和onchangeevent,将其转换为base64,并在该页面中显示。
请帮帮我伙计们!

ffscu2ro

ffscu2ro1#

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

0lvr5msh2#

Miles Erickson和Henock Bongi,您需要使用reader.readAsDataUrl($data);以激发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]);
};
u0njafvf

u0njafvf3#

您可以这样做:

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

相关问题