[小记] 微信小程序 - 人脸识别前端（一）初体验

微信小程序 - 人脸识别前端（一）初体验

记录尝试使用拍照模式进行人脸比对的过程—此方式有一定缺陷：调用系统摄像头，会保留照片于系统相册等

功能：人脸识别 + 打卡签到
说明：前端仅做拍照和转码操作等，后台接口调用腾讯人脸 api 进行***静态活体检测*** 以及***人脸比对*** 操作。
优化方案：拍照方式优化

视图层-wxml

<view class="btn-box-signOn"><view class="btn-area btn-area-active" id="buttonContainer" wx:if="{{activeFlag==='01'}}" data-signflag="on" bindtap="startFaceRec" hover-class="btn-hover"><text class="btn-text-sign">签到</text></view><view class="btn-area btn-area-false" id="buttonContainer2" wx:elif="{{activeFlag==='02'}}"><text class="btn-text-sign">签到</text></view><view class="btn-area btn-area-signed" id="buttonContainer3" wx:elif="{{activeFlag==='03'}}"><text class="btn-text-signed">已签到</text><text class="btn-textTime">{{ signTime }}</text></view>
</view>

逻辑层-js

  // 数据datadata: {activeFlag: '02', // 签到btnactiveFlagOff: '02', // 签退btnsignTime: '08:55',thisDate: '', // 日期thisDay: '', // 星期thisTime: '', // 时间restMins: 0,overFlag: '还有', //"还有" - "已超时"signedShow: '已签到，祝您工作愉快', // "已签到，祝您工作愉快" - "已签退，祝您生活愉快"imgBase: 'base64 String',},// 启动人脸识别startFaceRec: function (event) {var that = this;let signFlag = event.currentTarget.dataset.signflag;console.log(signFlag);// 法1-本页面识别默认后置识别wx.showModal({title: '提示',content: '我们将调取您的照像机',confirmColor: '#1567D1',cancelColor: '#E5E5E5',success (res) {if (res.confirm) {console.log('用户点击确定');that.faceRecognition(signFlag);} else if (res.cancel) {console.log('用户点击取消');return false;}}});},// 人脸识别faceRecognition: function (flag) {console.log('开始人脸识别...');var that = this;wx.chooseImage({count: 1, //图片数量sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['camera'], // 图片来源-相机，默认可以是本地'album'或相机'camera'success: (res) => {// 成功回调函数wx.showLoading({title: '识别中...',});var tempFilePaths = res.tempFilePaths; // 所有图片返回的相对路径数组// 将图片转换为 base64 编码wx.getFileSystemManager().readFile({filePath: tempFilePaths[0], //选择图片返回的相对路径encoding: 'base64', //编码格式success: res => { //成功的回调// console.log('data:image/png;base64,=>' + res.data)// this.setData({// imgBase: res.data// });let base64Code = res.dataconsole.log('base64Code=>', base64Code);// 上传 base64 图片编码给后端处理wx.request({url: '.../face/test', // 后台人脸识别的接口地址method: 'POST',data: {"faceImage": base64Code,"userNo": app.globalData.staffInfo.userNo},header: {'content-type': 'application/json;charset=UTF-8;' // 默认值},success (res) {wx.hideLoading(); // 处理成功关闭加载图示console.log(res.data);// if(res.data.error_msg === '人脸验证成功') {if(res.data.code === '200') {// 识别成功操作let signTime = util.timeMins(new Date());if(flag === 'on') {that.setData({activeFlag: '03',signTime: signTime,signedShow: '已签到，祝您工作愉快', // "已签到，祝您工作愉快" - "已签退，祝您生活愉快"});} else if(flag === 'out') {that.setData({activeFlagOff: '03',signOffTime: signTime,signedShow: '已签退，祝您生活愉快', // "已签到，祝您工作愉快" - "已签退，祝您生活愉快"});}wx.showToast({title: '识别成功',icon: 'success',duration: 2000});} else if(res.data.code === '402') {wx.showToast({title: '识别失败,请自拍！',icon: 'none',duration: 2000});} else if(res.data.code === '999') {wx.showToast({title: '人脸验证失败！',icon: 'none',duration: 2000});} else {wx.showToast({title: '识别失败！',icon: 'fail',duration: 2000});}}});}});},complete: (res) => {// 图片选择调用结束的回调函数（调用成功、失败都会执行）},})},

[小记] 微信小程序 - 人脸识别前端（一）初体验相关推荐

微信小程序 - 人脸识别前端（二）拍照方式优化
微信小程序 - 人脸识别前端(二)拍照方式优化前文提及的识别方式较 low ,另外会留下识别痕迹,此处使用 <camera>组件进行优化. 前文地址:前文参考文章:zhoujie-人脸 ...
微信小程序人脸识别/采集改进版-支持人脸中心位置校验，人脸图片采集（速度更快），人脸搜索
目录 1. 微信小程序人脸识别 1. 初始化人脸识别 2. 创建 camera 上下文 CameraContext 对象 3.获取 Camera 实时帧数据 4.人脸识别,使用前需要通过 wx.ini ...
小程序加入人脸识别_微信小程序人脸识别登陆模块
微信小程序---人脸识别登陆的实现关键词:微信小程序人脸识别百度云接口前言这是一篇关于一个原创微信小程序开发过程的原创文章.涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口.小程序的 ...
人工智能微信小程序人脸识别之人脸属性检测（附源码）
随着人工智能和大数据分析技术越来越广泛,众多的生活场景都存在着这些技术的身影,比如像现在比较流行的人脸识别技术,其底层的算法实现的支撑,为众多的业务场景铺垫了基础,像支付宝的刷脸支付,本文是百度的人脸 ...
小程序加入人脸识别_微信小程序+人脸识别
为什么在原有的基础上增加人脸识别呢,因为我也厌倦了账号+密码的登录方式,所以想试一试在原有的功能上采用人脸识别登录. 识别过程借助于百度AI,服务器依旧是 SSM 框架.废话少说下面直接进入主题服务 ...
微信小程序-人脸识别+输出人脸匹配信息
1.在微信小程序创建 camera页面 camera.wxml代码为: <camera device-position="{{show}}" flash="off& ...
微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
微信小程序_自定义组件_初体验
自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段个人认为,自定义组件是区分菜鸟与高手的分水岭第一篇先介绍小程序自定义组件的基本使用自定义组件的使用可以分为如下几个步骤创建组件 ...
微信小程序---人脸识别（WX.STARTFACIALRECOGNITIONVERIFY）
1.由于人脸核验功能涉及到用户的敏感.隐私信息,因此调用此接口的业务方,需要满足一定的条件,申请小程序的人脸识别api.开通小程序后台的接口权限入口后,开发者可以登录mp.weixin.qq.com小 ...

[小记] 微信小程序 - 人脸识别前端（一）初体验

微信小程序 - 人脸识别前端（一）初体验

视图层-wxml

逻辑层-js

[小记] 微信小程序 - 人脸识别前端（一）初体验相关推荐

最新文章

热门文章