微信小程序人脸登录（图片比对）

人脸登录（图片比对）

通过createCameraContext相机和wx.faceDetect(Object object)人脸API配合使用

人脸录入

• 唤起相机并初始化人脸识别，拿到相机接口返回的帧数据进行人脸识别

  • wx.createCameraContext() 相机实例，下面用ctx代替
  • ctx.onCameraFrame 相机实例方法（获取 Camera 实时帧数据），用变量listener接收
  • listener.start() 开始监听帧
  • wx.initFaceDetect() 人脸识别初始化
  • wx.faceDetect() 人脸识别

  Page({
    data: {
      listener: null, // 监听帧
      passFlag: false, // 录制通过状态
    },
    onShow() {
      const that = this
      this.ctx = wx.createCameraContext() // 获取相机实例
      wx.initFaceDetect() // 识别初始化
      let nCounter = 0
      this.data.listener = this.ctx.onCameraFrame((frame) => {
        // console.log(frame.data, frame.width, frame.height)
        wx.faceDetect({ // 人脸识别
          frameBuffer: frame.data,
          width: frame.width,
          height: frame.height,
          enableConf: true,
          enableAngle: true,
          success(res) {
            // 可信度判断
            if (nCounter > 100 && !that.data.passFlag && res.confArray.global > 0.9) {
              that.data.passFlag = true
              that.canvasPutImageData(frame)
            } else {
              res.confArray.global > 0.9 && nCounter++
            }
          },
          fail(res) {
            console.log(res);
          }
        })
      })
      this.data.listener.start() // 监听数据帧
    }
  })
  

• 通过后，生成画布合成图片，上传到服务器

  • wx.canvasPutImageData 将像素数据绘制到画布
  • new Uint8ClampedArray() 像素点处理
  • wx.canvasToTempFilePath() 把当前画布指定区域的内容导出生成指定大小的图片
  • listener.stop() 停止监听帧
  • wx.stopFaceDetect() 停止人脸识别

    // 生成图片上传人脸
    canvasPutImageData(frame) {
      const that = this
      // 绘制画布
      wx.canvasPutImageData({
        canvasId: 'mycanvas',
        x: 0,
        y: 0,
        width: frame.width,
        heihgt: frame.heihgt,
        data: new Uint8ClampedArray(frame.data),
        success() {
          // 获取图片
          wx.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success(res) {
              // 上传图片
              uploadFile(res.tempFilePath).then((uploadRes) => {
                wx.showNavigationBarLoading();
                wx.showLoading({
                  title: '正在录入',
                  mask: true
                })
                // 录入接口
                userFaceAdd({
                  imageUrl: uploadRes.data.url,
                  id: getApp().globalData.userInfo.id
                }).then(({
                  data
                }) => {
                  that.data.listener.stop()
                  wx.stopFaceDetect() // 停止识别
                  wx.hideNavigationBarLoading();
                  wx.hideLoading()
                  wx.showToast({
                    title: '录入成功',
                    icon: 'none',
                    duration: 1500
                  })
                }).catch(() => {
                  wx.hideNavigationBarLoading();
                  wx.hideLoading()
                  wx.showToast({
                    title: '录入失败，重新开始',
                    icon: 'none',
                    duration: 1500
                  })
                  that.data.passFlag = false
                })
              }).catch(() => {
                that.data.passFlag = false
              })
            },
            fail(res) {
              that.data.passFlag = false
              console.log('canvasToTempFilePath', res);
            }
          })
        },
        fail(res) {
          that.data.passFlag = false
          console.log('canvasPutImageData', res);
        }
      })
    }
  

人脸比对

• 唤起相机并初始化人脸识别，拿到相机接口返回的帧数据进行人脸识别（同录入一致）

• 通过后，生成画布合成图片再转换成base64，进行比对

  • wx.canvasPutImageData 将像素数据绘制到画布
  • new Uint8ClampedArray() 像素点处理
  • wx.canvasToTempFilePath() 把当前画布指定区域的内容导出生成指定大小的图片
  • listener.stop() 停止监听帧
  • wx.stopFaceDetect() 停止人脸识别
  • wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')] 利用文件管理器把图片转换成base64

    // 生成图片比对人脸
    canvasPutImageData(frame) {
      const that = this
      // 绘制画布
      wx.canvasPutImageData({
        canvasId: 'mycanvas',
        x: 0,
        y: 0,
        width: frame.width,
        heihgt: frame.heihgt,
        data: new Uint8ClampedArray(frame.data),
        success() {
          // 获取图片
          wx.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success(res) {
              const params = {
                files: ['data:image/jpg;base64,' + wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')],
                id: getApp().globalData.userInfo.id
              }
              wx.showNavigationBarLoading();
              wx.showLoading({
                title: '正在比对',
                mask: true
              })
              // 人脸识别登录
              loginFace(params).then(({
                data
              }) => {
                console.log(data);
                that.data.listener.stop()
                wx.stopFaceDetect() // 停止识别
                wx.setStorageSync('access-token', data)
                wx.hideNavigationBarLoading();
                wx.hideLoading();
              }).catch((res) => {
                wx.hideNavigationBarLoading();
                wx.hideLoading();
                wx.showToast({
                  title: '比对失败，重新效验',
                  icon: 'none',
                  duration: 1500
                })
                that.data.passFlag = false
              })
            },
            fail(res) {
              that.data.passFlag = false
              console.log('canvasToTempFilePath', res);
            }
          })
        },
        fail(res) {
          that.data.passFlag = false
          console.log('canvasPutImageData', res);
        }
      })
    }