微信小程序 - 人脸识别前端（二）拍照方式优化

微信小程序 - 人脸识别前端（二）拍照方式优化

前文提及的识别方式较 low ，另外会留下识别痕迹，此处使用 <camera>组件进行优化。

前文地址：前文

参考文章：zhoujie-人脸识别

• 此方法需要在单独的页面进行识别操作
• 默认前置摄像头
• 简单使用 cover-image实现 camera 组件样式优化
• 授权指引（相机权限调用授权管理）

视图层-wxml

<view class="container">
  <view class="camera-area">
    <block wx:if="{
    {cameraShow}}">
      <camera device-position="front" flash="off" binderror="cameraErr" class="camera-box">
      </camera>
        <cover-image class='coverImg' src='../../imgs/bg_circle.png'></cover-image>
    </block>
    <view class="camera-off" wx:else></view>
  </view>
  <view class="text-area">
    <view class="text-style">请将面部对准摄像头并置于框内</view>
  </view>
  <view class="btn-area">
    <block  wx:if="{
    {cameraShow}}">
      <button type="primary" class="camera-btn btn-active" bindtap="faceCheck" hidden="{
    {!btnActive}}">拍照识别</button>
      <view class="text-style"  hidden="{
    {btnActive}}">正在识别中...</view>
    </block>
    <block wx:else>
      <view class="camera-btn btn-disactive">拍照识别</view>
    </block>
  </view>
</view>

逻辑层-js

// pages/facePage/facePage.js
var util = require('../../utils/util.js');
Page({
   
  /**
   * 页面的初始数据
   */
  data: {
   
    cameraShow: true,
    btnActive: true,
    recType: '', // 识别类型 on/off
    photoSrc: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    let that = this;
    // 获取缓存的识别类型
    wx.getStorage(