h5调起手机拍照功能

最新推荐文章于 2023-02-10 09:03:12 发布

小呀白呀兔

最新推荐文章于 2023-02-10 09:03:12 发布

阅读量851

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_42125810/article/details/104294072

版权

最近做了h5调起手机拍照功能，记录一下

在这里插入图片描述

<img width="149" height="149" alt="" onclick="chickPhotoGraph()" id="pzImgShow" src="" />
 <input type="file" class="input"  style="display: none" id="pzImg" accept="image/*" capture="camera" onchange="pzImgChang()">

两行html代码，一行是图片，一行是input输入框，我把输入框隐藏掉，点击图片的时候触发事件，执行方法调用input的点击事件，调起拍照功能

function chickPhotoGraph(){
var input = document.getElementById("pzImg");
input.click();

}

input拍照之后执行onchange事件

function pzImgChang() {
var img = document.getElementById('pzImg')
//img 获取到的是图片地址，通过下面的方法获取到时的图片的base64编码

var imgFile = new FileReader();
imgFile.readAsDataURL(img.files[0]);

imgFile.onload = function () {
    var imgData = this.result; //得到base64数据
    var img = document.getElementById("pzImgShow");
    img.src = imgData;//回显到img标签展示照片
}

}