移动端利用 input 标签调用手机摄像头拍照，实现人脸验证的功能

近期在做项目时，有一个需求需要实现人脸识别功能，该功能的底层原理就是利用手机的拍照功能，获取用户的人脸图片，然后调用公安部的图像库进行逐一比对。实现这个功能只需要两步，第一步就是获取用户人脸图片；第二步就是将图片传给后端进行人脸比对。由于现在手机拍照的像素很高，拍出的照片都是几M，故在实现该功能的过程中，需要对图片进行压缩，该文是利用canvas对图片进行压缩。具体实现代码如下：

vue中调用相机进行拍照

<input type="file" accept="image/*" capture="user" @change="inputChange" ref="ipt">

知识扩展：

capture 属性是一个字符串，accept 属性指出了 input 是图片或者视频类型，capture 则它指定了使用哪个摄像头去获取这些数据。值 user 表示应该使用前置摄像头和/或麦克风。值 environment 表示应该使用后置摄像头和/或麦克风。如果缺少此属性，则 user agent 可以自由决定做什么。如果请求的前置模式不可用，则用户代理可能退回到其首选的默认模式。

js代码 

inputChange() {
  let file = this.refs.ipt.files[0];
  this.uploadAttachImg(file)
}
// 压缩图片
uploadAttachImg(file) {
  let that = this;
  let _base64 = '';
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    if(that.file.size / 1024 / 1024 <= 0.2) { // 小于 200k
      _base64 = e.target.result;
      that.getFaceResult(_base64); // 上传服务 
    }else {
      let img = document.createElement('img');
      img.src = e.target.result;
      let scale = 0.9;
      img.onload = function() {
        var originWidth = this.width;
        var originHeight = this.height;
        var maxWidth = 900;
        var maxHeight = (originHeight / originWidth) * 900;
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', maxWidth);
        canvas.setAttribute('height', maxHeight);
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,canvas.width,canvas.height);          
        ctx.drawImage(img,0,0,canvas.width,canvas.height);
        _base64 = canvas.toDataURL('image/jpeg')
        while(_base64.length > 1024*1024*0.18) {
          scale -= 0.01;
          _base64 = canvas.toDataURL('image/jpeg', scale);
        }
        that.getFaceResult(_base64); // 上传服务
      }
    }
  }
}
getFaceResult(data) {
  axios({
    'method': 'POST',
    'url': url,
    'data': data,
    'timeout': 15000
  })
  .then(res => {})
}