html5调用手机摄像头

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。
accept表示,直接打开系统文件目录。

其实html5的input:file标签还支持一个multiple属性,表示可以支持多选,如:

<input type="file" accept="image/*" multiple>

限制只能选择图片

<input type="file" accept="image/*">  

限制只能选择视频

<input type="file" accept="video/*">  

限制只能选择音频

<input type="file" accept="audio/*">  

直接打开摄像头拍照

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

直接打开摄像头录像

<input type="file" accept="video/*" capture="camera">  

图片压缩

document.getElementById('file').addEventListener('change', function() {
var reader = new FileReader();
reader.onload = function (e) {
compress(this.result);
};
reader.readAsDataURL(this.files[0]);
}, false);

不管文件域是用何种方式打开的,都可以在 change 事件中获取到选择的文件或拍摄的照片。

创建一个FileReader对象,我们需要调用readAsDataURL把文件转换为base64图像编码,如data:image/jpeg;base64……这种格式。
onload是一个异步回调,当文件读取完执行该方法内代码。this.result记录读取结果,如果读取失败,该值为null。在这里进行图片压缩的具体操作。

var compress = function (res) {
var img = new Image(),
maxH = 160;
img.onload = function () {
var cvs = document.createElement('canvas'),
ctx = cvs.getContext('2d');
if(img.height > maxH) {
img.width *= maxH / img.height;
img.height = maxH;
}
cvs.width = img.width;
cvs.height = img.height;
ctx.clearRect(0, 0, cvs.width, cvs.height);
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataUrl = cvs.toDataURL('image/jpeg', 0.6);
// 上传略
}
img.src = res;
}

创建一个Image对象,给src属性赋值为读取结果,同样在onload异步回调中编写处理图片的代码。
这里就要开始使用canvas进行图片压缩了。

首先是尺寸按比例缩放,然后把图片绘到画布上,最后调用toDataURL方法压缩图像质量。

context.toDataURL('MIME类型', 图像质量0-1); // 该方法返回base64图像编码

代码里省略了一些校监操作,如文件类型约束和文件大小判断(小于一定值可以不压缩)。
最后就是把数据发送到后端的操作,这里就不说了。

Html5调用摄像头

通过以上的代码已经可以实现调用手机相机拍照、压缩、上传这一整套流程了。
不过在折腾的过程中也发现了一种调用摄像头的方法。注意,是摄像头!使用input调用的是相机。其中的差别就是摄像头是只捕获画面,相机还包括原生的一些拍照、设置等控件。

通过对摄像头的调用可以做很多有趣的事,比如拍照美化、滤镜等。可以说实现一个第三方相机是没问题的。
之前下载过一款安卓相机APP,不到100K的大小,可以实现拍照的一些风格化,也许就是Html5实现的呢。

需要用到的是 getUserMedia API,具体的实现这里就不贴了。

原文地址:https://www.cnblogs.com/hss-blog/p/9984878.html