人脸采集-拍照上传校验

问题：人脸采集的时候，首次授权拒绝之后，不再弹出授权提示
解决方案：调用 wx.openSetting二次授权
问题： 调用wx.openSetting二次授权成功之后，返回之后camera组件还是失败状态 重新打开后才能用
解决方案：在camera的用户不允许使用摄像头时触发的事件binderror里面销毁camera组件

Tip:目前人脸采集有很多种方案，可以接微信自己的也可以使用第三方的，我们对接的是Aibee

效果如下：

点击上传的时候，调用Aibee的接口，进行对比，如果采集的人脸的信息和库里已有的信息匹配则采集成功，否则采集失败

贴上代码：

<!--pages/camera/camera.wxml-->
<view class="camera_wrap">
    <!-- 图像部分 -->
    <view class="camera_box">
        <camera device-position="front"  flash="auto" binderror="error" bindstop="stopImg"       style="width:100%; height: 100%;"  wx:if="{{!flagSrc&&isAuth}}"></camera>
          <!-- 拍照成功时显示 -->
        <image mode="widthFix" wx:if="{{flagSrc}}" src="{{src}}"  style="width:100%; height: 100%;"></image>
    </view>
  
      <!-- 尾部 -->
    <view class="footer_box">
          <view class="pic_box"  wx:if="{{!flagSrc}}">
               <button  bindtap="takePicture" class="take_btn">
                  <image src="/images/camera/camera.png"></image>
              </button>
              <view class="font_f">拍照上传</view>
          </view>
          <view class="pic_box"  wx:if="{{flagSrc}}">
               <button  bindtap="uploadImg" class="take_btn">
                  <image src="/images/camera/up.png"></image>
              </button>
              <view class="font_f">确认上传</view>
          </view>
          <view class="re_pic"  wx:if="{{flagSrc}}">
                <button  bindtap="reTakePhoto" class="re_btn">
                    <image src="/images/camera/reload.png"></image>
                </button>
                <view class="font_gr">重新拍摄</view> 
          </view>
    </view>
</view>

var utils = require('../../utils/httpUtil.js');
// camera.js
const app = getApp()
Page({
  data: {
    // canIUse: wx.canIUse('button.open-type.getUserInfo'),
    nickName: "",
    src: "",//图片的链接
    token: "",
    base64Src: "",
    msg: "",
    type: 0,//0注册   1更新
    flagSrc: false,//是否拍照成功，显示预览 true预览，false 拍照
    isAuth:false,//是否授权
  },
  onLoad: function (options) {
    console.log(options)
  },
  onShow: function () {
    let that = this;
    if (this.options.type == "register") {
      this.setData({
        type: 0
      })
    } else {
      this.setData({
        type: 1
      })
    }
    // // 获取用户的授权信息
    wx.getSetting({
      success: (res) => {
        console.log(res)
        if (res.authSetting['scope.camera'] == false) {
          // 未授权，提示去授权
          that.setData({
            isAuth:false
          })
        }else{
          this.setData({
            isAuth:true
          })
        }
      }
    })

  },
  getAibeeTemperature(){
    let that = this;
     wx.showLoading({
      title: '上传中...',
    })
    utils.PostApi({
      url: "接口地址",
      data: {
        facePic: that.data.base64Src,
        phone: wx.getStorageSync('phone'),
        realName: wx.getStorageSync('realName')
      },
      success: function (res) {
        console.log(res)
          if (res.data.code == "200") {
            wx.hideLoading();
            var aibiUid =res.data.data.user_id;
            var faceImage = res.data.data.image_url;
            var faceId = res.data.data.face_id;
            if (that.data.type==0){
              wx.redirectTo({
                url: `/pages/register/register?aibiUid=${aibiUid}&faceImage=${faceImage}&faceId=${faceId}&typeback=success`,
              }) 
            }else{
              wx.redirectTo({
                url: `/pages/informationEntry/informationEntry?aibiUid=${aibiUid}&faceImage=${faceImage}&faceId=${faceId}&typeback=success`,
              }) 
            }
              console.log(res.data.data)
          }else{
              wx.hideLoading();
              if (that.data.type == 0) {
                wx.redirectTo({
                  url: `/pages/register/register?typeback=fail`,
                })
              } else {
                wx.redirectTo({
                  url: `/pages/informationEntry/informationEntry?typeback=fail`,
                })
              }
          }
      }
    })

   },
  //拍照
  takePicture(){
    var that = this;
    console.log(this.data.flagSrc)
    // // 获取用户的授权信息
    wx.getSetting({
      success: (res) => {
        console.log(res)
        if (res.authSetting['scope.camera'] == false) {
            // 未授权，提示去授权
            wx.showModal({
              title: '应用申请使用你的摄像头',
              content: '将会上传你摄录的照片及视频',
              success: function (res) {
                if (res.cancel) {
                  wx.showToast({
                    title: '拒绝授权',
                    icon: 'none',
                    duration: 1000
                  })
                  if (that.options.type == "register") {
                    wx.redirectTo({
                      url: '/pages/register/register?typeback=fail',
                    })
                  } else {
                    wx.redirectTo({
                      url: '/pages/informationEntry/informationEntry?typeback=fail',
                    })
                  }
                } else if (res.confirm) {
                  wx.openSetting({
                    success: function (dataAu) {
                      console.log(dataAu)
                      if (dataAu.authSetting["scope.camera"] == true) {
                        wx.showToast({
                          title: '授权成功',
                          icon: 'success',
                          duration: 1000
                        })
                        that.setData({
                          isAuth: true
                        })
                      } else {
                        wx.showToast({
                          title: '授权失败',
                          icon: 'none',
                          duration: 1000
                        })
                      
                      }
                    }
                  })
                }
              }
            })

        }else{
           that.setData({
             isAuth:true
           })
          that.takePhotos();
        }
      }
    })
    
  },
  takePhotos(){
    let that = this;
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        console.log(res)
        this.setData({
          src: res.tempImagePath,//获取图片
          flagSrc: true
        })
        // //图片base64编码
        wx.getFileSystemManager().readFile({
          filePath: res.tempImagePath, //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => { //成功的回调
            console.log(res)
            // 调用接口
            that.setData({
              base64Src: res.data
            })
          }
        })
      },//拍照成功结束
      fail: (err) => {
        console.log(err)
      }

    })//调用相机结束

  },
  // 上传
  uploadImg(){
     this.getAibeeTemperature()
  },
  // 重新拍照
  reTakePhoto(){
      this.setData({
        flagSrc: false,
        src: "",//图片的链接
        base64Src: "",
      })
    console.log(this.data.flagSrc)
  },
  // 用户不允许时触发
  error(e) {
    // 销毁组件
    this.setData({
      isAuth: false
    })
  },
  stopImg(e){
    console.log(e)
  }


})

/* pages/camera/camera.wxss */
page,.camera_wrap{
  width: 100%;
  height: 100%;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.69) 100%);
}
.camera_wrap .camera_box{
  width:100%;
  height: 60%;
}
.camera_wrap .footer_box{
   width:100%;
  height: 40%; 
  background: #fff;
  position: relative;
}
.camera_wrap .footer_box .pic_box{
width: 200rpx;
  padding-top:90rpx;
  box-sizing: border-box;
   margin: 0 auto;
}
.camera_wrap .footer_box .take_btn{
  width: 200rpx;
  height: 200rpx;
  display: block;
  padding: 0;
  margin: 0 auto;
  background-color:#fff;
  border-radius: 0;
}
.camera_wrap .footer_box .take_btn image{
  width: 100%;
  height: 100%;
}
.camera_wrap .footer_box .pic_box .font_f{
  color:#0066E5;
  font-size:36rpx;
  text-align: center;
}


.camera_wrap .footer_box .re_pic{
  width: 140rpx;
  box-sizing: border-box;
  position: absolute;
  left:90rpx;
  top:148rpx;
  text-align: center;
}
.camera_wrap .footer_box .re_pic .re_btn{
  width: 64rpx;
  height: 64rpx;
  display: block;
  padding: 0;
  margin: 0 auto;
  background-color:#fff;
  border-radius: 0;
  line-height: 0;
}
.camera_wrap .footer_box .re_btn image{
  width: 100%;
  height: 100%;
}
.camera_wrap .footer_box .re_pic .font_gr{
   margin-top:10rpx;
   font-size: 28rpx;
   color: #32343B;
}

流程图如下:

上传之后的流程没在图里画，这里做下说明，点击上传的时候，调用Aibee的接口，进行对比，如果采集的人脸的信息和库里已有的信息匹配则采集成功，否则采集失败