HTML5调用手机相机拍照

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

前端调用手机相机拍照

实现方式常见有两种：

一种是通过video控件，通过捕获video的流，截取video中的图像实现拍照，

还有一种是通过input[file]控件调用移动端的摄像头，实现拍照。

两种方法各有利弊，第一种可以实现对拍照界面的重写（比如添加拍照界面的遮罩层提示框等）

但是，第一种方式在IPhone环境下不兼容，不能使用。

第二种方式实际上是调用input[type='file']，会弹出一个选择框让用户选择是调用相机还是调用相册，

好处就是兼容优于上一种，不好的地方就是这种方法无法控制拍照，想要在移动端实现只能拍照不能选择照片或者在拍照界面添加引导遮罩层的方法是行不通了。

这里说一下第二种方式的实现方式：

首先在页面上添加一个input控件实现调用相机。

自定义方式调用相机：

var takePictureOnclick = function(){
var takePicture = document.getElementById('takepicture');
... // 添加需要处理的代码
takePicture.click();
}

然后在js中添加对这个input的onchange事件，监听拍完照之后获取照片的流。

// 监听照片拍摄,并获取照片流
var takePicture = document.getElementById('takepicture');
var takePictureUrl = function () {
takePicture.onchange = function (event) {
var files = event.target.files, file;
if (files && files.length > 0) {
file = files[0];
try {
var URL = window.URL || window.webkitURL;
var blob = URL.createObjectURL(file);// 获取照片的文件流
compressPicture(blob);// 压缩照片
}
catch (e) {
try {
var fileReader = new FileReader();
fileReader.onload = function (event) {// 获取照片的base64编码
compressPicture(event.target.result);// 压缩照片
};
fileReader.readAsDataURL(file);
}
catch (e) {
alert(common.MESSAGE.title.error, '拍照失败,请联系客服或尝试更换手机再试!');
}
}
}
}
27 }();