小程序人脸识别—检测人脸图片获取图片

最新推荐文章于 2025-09-15 14:46:43 发布

原创

最新推荐文章于 2025-09-15 14:46:43 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了在微信小程序中使用WXML和JS实现的面部识别功能，包括摄像头切换、二维码扫描，以及人脸检测和校验过程中的动画效果。同时展示了如何处理相机权限和帧数据，以及人脸定位和匹配的相关代码.

wxml

<view>
  <view class="flex white">
    <!-- 镜头翻转 -->
    <view bindtap="reverse">镜头翻转</view>
    <view bindtap="clickScanCode">扫二维码</view>
  </view>
  <view class="head-image-box w-100 text-center position-relative">
    <!-- resolution：获取人脸图片后的清晰度 low:低 -->
    <camera device-position="{
   
   {devicePosition ?'back': 'front'}}" class="camera" flash="off" resolution='low' />
    <view class="title">{
   
   {
   
    tipsText }}1</view>
    <image src="{
   
   {faceImage}}" mode="" />
    <cover-view class="cover-box" wx:if="{
   
   {isShow}}">
      <!-- <cover-image class="image-box" src="@/static/images/camera_verify.png"></cover-image> -->

      <!-- cover-view 不支持动画所以只能变通的形式实现 -->
      <!-- <cover-image :style="'transform: translateY('+translateY+'rpx);'" class="line" src="@/static/images/bg_line.png"></cover-image> -->
      <!-- <cover-view class="line"></cover-view> -->
    </cover-view>
    <canvas id="myCanvas" canvas-id="myCanvas" :style="'width:'+screenWidth+'px;'+'height:'+screenHeight+'px'"></canvas>
  </view>
</view>

js

// pages/face/index.js
Page({
   
   

  /**
   * 页面的初始数据
   */
  data() {
   
   
    return {
   
   
      isShow: false,
      tipsText: '', // 错误文案提示
      tempImg: '', // 本地图片路径
      cameraEngine: null, // 相机引擎
      devicePosition: false, // 摄像头朝向
      isAuthCamera: true, // 是否拥有相机权限
      isVerify: false,
      translateY: -24,
      timer: null,
      isFlag: true,
      origin: null,
      base64: "",
      personId: "",
      isFlag2: true,
      screenWidth: 375,
      screenHeight: 640,
      faceImage: '', //人脸图片
    }
  },

  onShow: function () {
   
   
    this.setData({
   
   
      isVerify: false,
      tipsText: "",
      isFlag: true,
    })

    this.lineAnimation();
  },
  onLoad(options) {
   
   
    this.initData();
  },
  onUnload() {
   
   
    this.clearTimer();
  },
  onHide() {
   
   
    this.clearTimer();
  },
  cle