最近的一个项目中需要用到拍照上传图片的功能,因为是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>
”