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，具体的实现这里就不贴了。