2018-11-15关于H5调用手机相机

最近的一个项目中需要用到拍照上传图片的功能，因为是h5写的页面，不像app那样可以授权获取相机的使用功能，那该如何来调用手机相机功能呢？

想必大家都知道input的type类型中有个file，是我们平常用来上传文件使用的。除此之外input还有capture属性，可以很好来利用，。如“<input name="driver_face" id="driver_face" type="file" capture="camera" accept="image/*" >”这样写，只要是在手机端就可以调用相机来进行拍照。

如果想要样式好看的可以进行样式的封装，把input框隐藏，用自己喜欢的样式代替，如图片等，然后给图片的点击事件来触发input的点击如：“document.getElementById().click()”这样就可以直接调用对应元素的点击事件了。

一下代码参考“<div class="weui-cell">

<div class="weui-cell__hd">

<label class="weui-label">驾车人正脸</label>

</div>

<div class="weui-cell__bd">

<div class="am-form-group am-form-file">

<button type="button" class="am-btn am-btn-danger am-btn-sm">

<i class="am-icon-cloud-upload"></i>拍照

</button>

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

</div>

        <img src="" alt="" id="driver_face_show" style="display:none;width:10rem;height:8rem;">

</div>

</div>

”