我正在开发一个从本地浏览和拍照的网络应用程序,我也希望通过相机捕获图像。我使用以下代码,我可以捕获设备相机。
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">
现在,我想获取图像和onchangeevent,转换为base64并希望在该页面中显示。
请帮助我们!
我正在开发一个从本地浏览和拍照的网络应用程序,我也希望通过相机捕获图像。我使用以下代码,我可以捕获设备相机。
<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,你需要带读者.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]);
};