开发者社区> 瓜子三百克> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

使用uniapp开发微信小程序的人脸采集功能/人脸识别功能

简介: 使用uniapp开发微信小程序的人脸采集功能/人脸识别功能
+关注继续查看

开发环境:

开发框架:uniapp

开发平台:微信小程序


标签和样式先上:

标签:


<template>
    <view class="page-content">
  <view class="containerV">
    <view class="headerV">
    <view class="top-tips1">
        <view>请将正对手机,头部匹配摄像区域</view>
    </view>
    <view class="top-tips2">
        为了捍卫你的不要脸,请拍摄本人头像
    </view>
    </view>
    <view class="contentV">
    <view class="mark"></view>
    <image v-if="tempImg" mode="widthFix" :src="tempImg" />
    <camera v-if='isAuthCamera' :device-position="devicePosition ?'front': 'back'" class="camera"
        flash="off" resolution='high' />
    <view v-show="!tempImg && tipsText" class="tipV">{{ tipsText }}</view>
    </view>
    <view class="footerV">
    <view style="width: 100%;">
        <view v-if="!tempImg" style="width: 100%;">
      <view class="privacyV">
        <view class="icon"></view>
        <view class="text">
        照片隐私<text @click="handleJumpSecurityClick">安全保障</text>中…
        </view>
      </view>
      <view class="bottom-tips-2">该照片作为你不要脸的铁证</view>
      <view class="take-photo-bgV">
        <!-- 图片上传 -->
        <view v-show="true" class="btn-change-upload" @click="handleChooseImage" />
        <!--拍照-->
        <view class="btn-take-photo" @click="handleTakePhotoClick" />
        <!-- 切换镜头 -->
        <view class="btn-change-camera" @click="handleChangeCameraClick" />
      </view>
        </view>
        <view class="confirmV" v-else>
      <view class="btn-cancel" @click="handleCancelClick">
        取消
      </view>
      <view class="btn-ok" @click="handleOkClick">
        确定
      </view>
        </view>
    </view>
    </view>
  </view>
    </view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
样式:
<style lang="scss" scoped>
    .page-content {
  width: 100%;
  height: 100%;
  .containerV {
    width: 100%;
    height: 100%;
    .headerV {
    .top-tips1 {
        margin-top: 60rpx;
        color: #1C1C1C;
        font-size: 36rpx;
        text-align: center;
    }
    .top-tips2 {
        margin-top: 20rpx;
        color: #00AAFF;
        font-size: 28rpx;
        text-align: center;
    }
    }
    .contentV {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 661rpx;
    margin-top: 30rpx;
    .tipV {
        bottom: 30rpx;
        position: absolute;
        line-height: 90rpx;
        padding-left: 24rpx;
        padding-right: 24rpx;
        max-width: calc(100vw - 50rpx * 2);
        text-align: center;
        font-size: 30rpx;
        background: #000000;
        opacity: 0.75;
        color: #FFFFFF;
        border-radius: 16rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        z-index: 5;
    }
    .camera {
        width: 100%;
        height: 100%;
    }
    .mark {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 750rpx;
        height: 100%;
        background: url("@/static/face/view_face_background.png") no-repeat center bottom;
        background-size: 750rpx 661rpx;
    }
    image {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 3;
    }
    }
    .footerV {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .privacyV {
        padding-top: 30rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .text {
      font-size: 30rpx;
      color: #1C1C1C;
      text-align: center;
      line-height: 42rpx;
      margin-left: 15rpx;
      text {
        font-size: 30rpx;
        color: #00AAFF;
        text-align: center;
        line-height: 42rpx;
      }
        }
        .icon {
      width: 40rpx;
      height: 47rpx;
      background: url("@/static/face/icon_face_security.png") no-repeat;
      background-size: 100% auto;
        }
    }
    .bottom-tips-2 {
        margin-top: 20rpx;
        color: #999999;
        text-align: center;
        font-size: 26rpx;
    }
    .take-photo-bgV {
        width: 100%;
        margin-top: 30rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .btn-take-photo {
      // 由于左边没有按钮,所以左边要便宜更大,以便是拍照按钮居中
      margin: 0rpx 80rpx 0rpx 80rpx;
      width: 196rpx;
      height: 196rpx;
      background: url("https://pro-file-qn.ztjy61.com/1003020211103145058685NNR9vlTm.png") no-repeat;
      background-size: 100% auto;
        }
        .btn-change-upload {
      left: 130rpx;
      width: 80rpx;
      height: 80rpx;
      background: url("@/static/face/icon_face_upload_picture.png") no-repeat;
      background-size: 100% auto;
        }
        .btn-change-camera {
      right: 130rpx;
      width: 80rpx;
      height: 80rpx;
      background: url("@/static/face/icon_face_switch_cameras.png") no-repeat;
      background-size: 100% auto;
        }
    }
    .confirmV {
        margin: 200rpx 100rpx 0rpx 100rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .btn-cancel {
      font-size: 32rpx;
      color: #1C1C1C;
        }
        .btn-ok {
      font-size: 32rpx;
      color: #00AAFF;
        }
    }
    }
  }
    }
</style>


js逻辑:

关键点代码中已经注释



<script>
    export default {
  name: 'index',
  components: {
  },
  data() {
    return {
    tipsText: '', // 错误文案提示
    tempImg: '', // 本地图片路径
    cameraEngine: null, // 相机引擎
    devicePosition: false, // 摄像头朝向
    isAuthCamera: true, // 是否拥有相机权限
    }
  },
  onLoad(options) {
    this.initData()
  },
  methods: {
    // 初始化相机引擎
    initData() {
    // #ifdef MP-WEIXIN
    // 1、初始化人脸识别
    wx.initFaceDetect()
    // 2、创建 camera 上下文 CameraContext 对象
    this.cameraEngine = wx.createCameraContext()
    // 3、获取 Camera 实时帧数据
    const listener = this.cameraEngine.onCameraFrame((frame) => {
        if (this.tempImg) {
      return;
        }
        // 4、人脸识别,使用前需要通过 wx.initFaceDetect 进行一次初始化,推荐使用相机接口返回的帧数据
        wx.faceDetect({
      frameBuffer: frame.data,
      width: frame.width,
      height: frame.height,
      enablePoint: true,
      enableConf: true,
      enableAngle: true,
      enableMultiFace: true,
      success: (faceData) => {
        let face = faceData.faceInfo[0]
        if (faceData.x == -1 || faceData.y == -1) {
        this.tipsText = '检测不到人'
        }
        if (faceData.faceInfo.length > 1) {
        this.tipsText = '请保证只有一个人'
        } else {
        const {
            pitch,
            roll,
            yaw
        } = face.angleArray;
        const standard = 0.5
        if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard ||
            Math.abs(yaw) >= standard) {
            this.tipsText = '请平视摄像头'
        } else if (face.confArray.global <= 0.8 || face.confArray.leftEye <=
            0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <= 0.8 ||
            face.confArray.rightEye <= 0.8) {
            this.tipsText = '请勿遮挡五官'
        } else {
            this.tipsText = '请拍照'
            // 这里可以写自己的逻辑了
        }
        }
      },
      fail: (err) => {
        if (err.x == -1 || err.y == -1) {
        this.tipsText = '检测不到人'
        } else {
        this.tipsText = err.errMsg || '网络错误,请退出页面重试'
        }
      },
        })
    })
    // 5、开始监听帧数据
    listener.start()
    // #endif
    },
    // 切换设备镜头
    handleChangeCameraClick() {
    this.devicePosition = !this.devicePosition;
    },
    // 图片上传
    handleChooseImage() {
    uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: (res) => {
      if (res.errMsg === 'chooseImage:ok') {
        uni.showLoading({
        title: '照片上传中...'
        })
        console.log("===========:", res.tempFilePaths[0])
        this.handleOkClick()
      }
        },
        fail: (res) => {
        },
    });
    },
    // 拍照点击
    handleTakePhotoClick() {
    if (this.tipsText != "" && this.tipsText != "请拍照") {
        return;
    }
    uni.getSetting({
        success: (res) => {
      if (!res.authSetting['scope.camera']) {
        this.isAuthCamera = false
        uni.openSetting({
        success: (res) => {
            if (res.authSetting['scope.camera']) {
          this.isAuthCamera = true;
            }
        }
        })
      }
        }
    })
    this.cameraEngine.takePhoto({
        quality: "high",
        success: ({
      tempImagePath
        }) => {
      this.tempImg = tempImagePath
      console.log("=======tempImg:", this.tempImg)
        }
    })
    },
    // 点击确定上传
    handleOkClick() {
    uni.showLoading({
        mask: true,
        title: '校验中...'
    })
    // 更新人脸识别图片请求协议:传七牛图片链接    
    setTimeout(function() {
        uni.hideLoading()
        uni.showToast({
      icon: "none",
      title: "假装图片上传成功",
      duration: 2000,
        })
    }, 3000);
    },
    // 点击 - 取消上传
    handleCancelClick() {
    this.tempImg = ''
    },
    // 点击 - 人脸安全保障按钮
    handleJumpSecurityClick() {
    uni.showToast({
        icon: "none",
        title: "假装跳转人脸安全保障",
        duration: 2000,
    })
    },
  }
    }
</script>


拓展:

可以将图片上传至服务器,由服务器做人脸识别,这样功能就齐全了。


人脸采集


demo:

1、gitee:https://gitee.com/chenzm_186/face-detect-mini

2、csdn:https://download.csdn.net/download/weixin_38633659/85385944


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
5.4【微信小程序全栈开发课程】首页完善(四)--清零功能
点击清零按钮,出现提示框,提示是否确认清零 确认的话,请求后端,在数据库records表中增加一条新的记录,这条记录的分数字段mark为0 取消的话,不进行任何操作 清零功能不删除历史记录
30 0
3.6【微信小程序全栈开发课程】登录功能(四)--显示登录成功弹窗
用户登录完成之后,我们添加一个登录成功的弹窗。
33 0
6.6【微信小程序全栈开发课程】记录页面(六)--修改备注
1、引入工具函数 编辑RecordList.vue文件,引入util.js文件中的post、showModal这两个工具函数
18 0
7.2【微信小程序全栈开发课程】小程序上线--配置云服务器、域名
项目完成后,如果希望别人能访问到我们的项目,那就要将项目上线,需要准备两个工具: 云服务器 已备案的域名
35 0
坚果系列-发布uniapp【uniapp 专题 02】
概述 打包为原生App,发布为H5 1.打包为原生App 在HBuilderX工具栏,点击发行,选择原生app-云端打包,如下图:
33 0
uni-app:微信小程序分享页面到微信好友和朋友圈
uni-app:微信小程序分享页面到微信好友和朋友圈
42 0
微信小程序转换uni-app详细指南
小程序转换uni-app的步骤 微信小程序的语法,其实是vue.js语法的裁剪定制版,在数据绑定、自定义组件等很多方面都有相似之处。以下是一个小程序源码转换步骤指南: 客户端代码转换 新建一个uni-app项目,把之前的app.
6567 0
《Android App开发入门:使用Android Studio 2.X开发环境》——2-7 使用 USB 线将程序部署到手机上执行
本节书摘来自华章计算机《Android App开发入门:使用Android Studio 2.X开发环境》一书中的第2章,第2-7节,作者 施威铭,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1705 0
微信小程序把玩(一)Hello WeApp
原文:微信小程序把玩(一)Hello WeApp 本篇默认已经成功安装微信小程序工具 新建项目 AppID查看公众开发平台设置查看(https://mp.
898 0
131
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载