1. 微信小程序人脸识别
- 1. 初始化人脸识别
- 2. 创建 camera 上下文 CameraContext 对象
- 3.获取 Camera 实时帧数据
- 4.人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
- 5.完整代码
- 附带绝对定位的圆角图片真机展示问题
2. H5人脸识别

1. 微信小程序人脸识别

方案已废弃: 用到的第三方框架: upng.js及pako.js（速度太慢，容易卡顿）
推荐使用：微信小程序人脸识别改进版

1. 初始化人脸识别

   wx.initFaceDetect()

2. 创建 camera 上下文 CameraContext 对象

   this.cameraEngine = wx.createCameraContext();

3.获取 Camera 实时帧数据

   const listener = this.cameraEngine.onCameraFrame()

4.人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据

   wx.faceDetect()

5.完整代码

<template><view><view class="d-flex justify-content-between align-items-center update-box mt-40 mr-32"><!-- 可用iconfont --><image @click="devicePosition=!devicePosition" class="camera-change-image" mode="widthFix"src="@/static/images/camera_change.png"></image></view><view class="head-image-box w-100 text-center position-relative"><!-- resolution：获取人脸图片后的清晰度 low:低 --><camera v-if='isAuthCamera' :device-position="devicePosition ?'back': 'front'" class="camera" flash="off"resolution='low' /><view class="title mt-40" v-show="!tempImg && tipsText">{{ tipsText }}</view><cover-view class="cover-box" v-show="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></view></view>
</template><script>import upng from "@/common/js/upng.js"export default {name: 'index',data() {return {isShow: false,tipsText: '', // 错误文案提示tempImg: '', // 本地图片路径cameraEngine: null, // 相机引擎devicePosition: true, // 摄像头朝向isAuthCamera: true, // 是否拥有相机权限isVerify: false,translateY: -24,timer: null,isFlag: true,origin: null}},onShow: function() {this.isVerify = false;this.tipsText = "";this.isFlag = true;},onLoad(options) {this.origin = options.origin;this.initData();this.lineAnimation()},onUnload: function() {clearInterval(this.timer);this.timer = null;this.isFlag = false;},methods: {// 初始化相机引擎initData() {// #ifdef MP-WEIXIN// 1、初始化人脸识别wx.initFaceDetect()// 2、创建 camera 上下文 CameraContext 对象this.cameraEngine = wx.createCameraContext();this.isShow = true;// 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) => {if (this.isVerify) returnlet face = faceData.faceInfo[0]if (face.x == -1 || face.y == -1) {this.tipsText = '检测不到人'}if (faceData.faceInfo.length > 1) {this.tipsText = '请保证只有一个人'} else {const {pitch,roll,yaw} = face.angleArray;const standard = 0.5if (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 = '校验中...'this.isVerify = true;// 太快获取的人脸可能比较抽象,给用户一个准备时间setTimeout(() => {//借助upng把流转为二进制数据let pngData = upng.encode([frame.data], frame.width,frame.height),base64 = arrayBufferToBase64(pngData);// 获取到base64后可以已上传，展示，或保存到本地var imageType = getImageType();function getImageType() {let type = "center"if (face.y / frame.height < 0.3333) {type = "top"} else if (face.y / frame.height > 0.6666) {type = "bottom"}return type;}//二进制转base64function arrayBufferToBase64(buffer) {var binary = '';var bytes = new Uint8Array(buffer);var len = bytes.byteLength;for (var i = 0; i < len; i++) {// unicode编码还原binary += String.fromCharCode(bytes[i]);}return "data:image/png;base64," + btoa(binary);}// 小程序没有window对象，需手动实现btoa()方法// 作用: 字符转base64function btoa(string) {const b64 ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="string = String(string);var bitmap, a, b, c,result = "",i = 0,rest = string.length %3; // To determine the final paddingfor (; i < string.length;) {if ((a = string.charCodeAt(i++)) > 255 ||(b = string.charCodeAt(i++)) > 255 ||(c = string.charCodeAt(i++)) > 255)throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.");bitmap = (a << 16) | (b << 8) | c;result += b64.charAt(bitmap >> 18 & 63) + b64.charAt(bitmap >> 12 & 63) +b64.charAt(bitmap >> 6 & 63) + b64.charAt(bitmap & 63);}return rest ? result.slice(0, rest - 3) + "===".substring(rest) : result;};this.tipsText = '校验成功'setTimeout(() => {this.clickPushDetail(imageType);}, 50)}, 300)}}},fail: (err) => {if (this.isVerify) returnif (err.x == -1 || err.y == -1) {this.tipsText = '检测不到人'} else {this.tipsText = err.errMsg || '网络错误，请退出页面重试'}},})})// 5、开始监听帧数据listener.start()// #endif},clickPushDetail(imageType) {if (!this.isFlag) return// 可以跳转到详情页面},lineAnimation() {if (this.timer) returnthis.timer = setInterval(() => {this.translateY += 3;if (this.translateY >= 460) {this.translateY = 10;}}, 12)},}}</script><style>page {background-color: #000000;}</style>
<style lang="scss" scoped>.d-flex {display: flex;}.justify-content-center {justify-content: center;}.align-items-center {align-items: center;}.camera-change-image {width: 48rpx;margin-left: 40rpx;}.mr-32{margin-right: 32rpx;}.mt-40 {margin-top: 40rpx;}.text-center {text-align: center;}.position-relative{position: relative;}.w-100{width: 100%;}.update-box {color: #ffffff;}.head-image-box {position: absolute;top: 10vh;color: white;.camera {width: 100%;height: 872rpx;}.title {font-size: 48rpx;font-weight: bold;}.cover-box {position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);width: 500rpx;height: 500rpx;}.image-box {width: 100%;height: 100%;}.line {position: absolute;top: 0rpx;left: 8rpx;right: 8rpx;width: auto;height: 30rpx;// transform: translateY(-24rpx);// animation: radar-beam 1.5s infinite;// background: linear-gradient(180deg, rgba(13, 110, 217, 0) 0%, rgba(13, 110, 217, 0.4000) 100%);z-index: 2;}// @keyframes radar-beam {//  0% {//        transform: translateY(24rpx);//     }//     100% {//      transform: translateY(450rpx);//    }// }}</style>

附带绝对定位的圆角图片真机展示问题

父元素添加：-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

.image-box {overflow: hidden;border-radius: 50%;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);z-index: 1;.face-image {width: 100%;height: 100%;position: absolute;left: 0;&.top {top: 0;}&.bottom {bottom: 0;}&.center {top: 50%;transform: translateY(-50%);}}}

借鉴于：ZegTsai

2. H5人脸识别

详见：h5人脸识别

微信小程序人脸识别功能（wx.faceDetect）、带扫脸动画、人脸图片获取（upng.js）及位置展示相关推荐

最全的java对接微信小程序客服功能实现（包含自动回复文本消息、图片消息，进入人工客服）
java对接微信小程序客服功能实现(包含自动回复文本消息.图片消息,进入人工客服) 第一步:请求校验(确认请求来自微信服务器) 代码如下: @ApiOperation(value = " 微 ...
微信小程序-000-签到功能-004-新建签到
微信小程序-000-签到功能-004-新建签到-2020-4-23 目录一.wxml 二.js pages.newact.newact 一.wxml <form bindsubmit=&quo ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序语音识别java_微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序-001-抽签功能-006-我的抽签-主界面
微信小程序-001-抽签功能-006-我的抽签-主界面目录一.wxml 二.js pages.chouqian.setqian.setqian 一.wxml <view wx:for=&qu ...
微信小程序与卡券功能小结
微信小程序与卡券功能小结前段时间公司有一个微信小程序的项目,其中有与卡券打通的功能,但是微信的官方文档实在是一言难尽...找了很多资料才解决这个问题,其中涉及到卡券的领取,卡券的核销等,在这里做一个 ...
微信小程序webview识别二维码长按点击识别二维码
场景:微信小程序,使用webview控件.需求:点击图片后长按图片出现"识别二维码" 1.JS代码: <script src="http://res.wx.qq.c ...
微信小程序-001-抽签功能-008-简单登录
微信小程序-001-抽签功能-008-简单登录目录一.wxml 二.js pages.login.login 一.wxml <button open-type="getUserIn ...
微信小程序-000-签到功能-011-我报名过的活动-查看详情
微信小程序-000-签到功能-011-我报名过的活动-查看详情目录一.wxml 二.js pages.joinsetact.joinsetact 一.wxml {{aid}} <button ...

微信小程序人脸识别功能（wx.faceDetect）、带扫脸动画、人脸图片获取（upng.js）及位置展示

目录

1. 微信小程序人脸识别

1. 初始化人脸识别

2. 创建 camera 上下文 CameraContext 对象

3.获取 Camera 实时帧数据

4.人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据

5.完整代码

附带绝对定位的圆角图片真机展示问题

2. H5人脸识别

微信小程序人脸识别功能（wx.faceDetect）、带扫脸动画、人脸图片获取（upng.js）及位置展示相关推荐

最新文章

热门文章