小程序实现人脸检测

先简单介绍一下我们实现的功能，我们通过微信小程序调用百度人脸检测接口，当人脸在屏幕适当的位置，界面上的图案会变成绿色，然后会提示是上传成功的字样。

第一步我们需要注册百度api人脸识别接口，然后编写以下代码。

face.js

//index.js
//获取应用实例
const app = getApp()
Page({data: {imgsrc:"../common/jpg/scan_ing.png",src:"",windowWidth: 0,windowHeight:0,trackshow: "进行人脸追踪",canvasshow:true,access_token:''},onLoad() {var that = thiswx.showLoading({title: '努力加载中',mask: true})//屏幕宽度var sysInfo = wx.getSystemInfoSync()that.setData({windowWidth: sysInfo.windowWidth,windowHeight: sysInfo.windowHeight,})that.ctx = wx.createCameraContext()
// 每次更新access_tokenwx.request({url: "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=" + app.globalData.baidukey + "&client_secret=" + app.globalData.baidusecretkey,method: 'POST',dataType: "json",header: {'content-type': 'application/json'},success: function (res) {// console.log(res.data.access_token);// app.globalData.access_token = res.data.access_token;that.setData({access_token: res.data.access_token});}})//打印access_tokenconsole.log(app.access_token);wx.hideLoading()var that =thisthat.setData({trackshow: "停止人脸追踪",canvasshow: true})that.takePhoto()that.interval = setInterval(this.takePhoto, 500);},takePhoto() {console.log("takePhoto")var that = thisvar takephonewidthvar takephoneheightthat.ctx.takePhoto({quality: 'low',success: (res) => {// console.log(res.tempImagePath),// 获取图片真实宽高wx.getImageInfo({src: res.tempImagePath,success: function (res) {takephonewidth= res.width,takephoneheight = res.height}})console.log(takephonewidth, takephoneheight)wx.getFileSystemManager().readFile({filePath: res.tempImagePath, //选择图片返回的相对路径encoding: 'base64', //编码格式success: res => { //成功的回调// console.log('data:image/png;base64,' + res.data),wx.request({url: "https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=" + that.data.access_token,data: {image:res.data,image_type:"BASE64",max_face_num:1},method: 'POST',dataType: "json",header: {'content-type': 'application/json' },success: function (res) {console.log(res.data);if (res.data.error_code === 0) { var ctx = wx.createContext()ctx.setStrokeStyle('#31859c')ctx.lineWidth = 3for (let j = 0; j < res.data.result.face_num; j++){var cavansl = res.data.result.face_list[j].location.left / takephonewidth * that.data.windowWidthvar cavanst = res.data.result.face_list[j].location.top / takephoneheight * that.data.windowHeightvar cavansw = res.data.result.face_list[j].location.width / takephonewidth * that.data.windowWidthvar cavansh = res.data.result.face_list[j].location.height / takephoneheight * that.data.windowHeightctx.strokeRect(cavansl, cavanst, cavansw, cavansh)}// wx.drawCanvas({//   canvasId: 'canvas',//   actions: ctx.getActions()// })var x1 = res.data.result.face_list[0].location.left / takephonewidth * that.data.windowWidth;var y1 = res.data.result.face_list[0].location.top / takephoneheight * that.data.windowHeight;var sw = (res.data.result.face_list[0].location.width / takephonewidth * that.data.windowWidth);var sh = (res.data.result.face_list[0].location.height / takephoneheight * that.data.windowHeight);var centerX = x1+sw*0.5;var centerY = y1+sh*0.5;var screenX = that.data.windowWidth * 0.5;var screenY = that.data.windowHeight * 0.5;//左右角度var x = res.data.result.face_list[0].angle.yaw;//俯仰角度var y = res.data.result.face_list[0].angle.pitch;if(((x>=-12.0&&x<=12.0)&&(y>=-8.0&&y<=15.0)&&(sw<=that.data.windowWidth*0.5&&sh<=that.data.windowHeight*0.5))&&(((centerX>=screenX-20.0)&&(centerX<=screenX+20.0))&&(centerY>=screenY-80.0)&&(centerY<=screenY+80.0))){that.setData({imgsrc:"../common/jpg/scan_sucess.png",});that.upload();} else{that.setData({imgsrc:"../common/jpg/scan_ing.png",});}var ctx = wx.createContext()ctx.setStrokeStyle('#31859c')ctx.lineWidth = 3// wx.drawCanvas({//   canvasId: 'canvas',//   actions: ctx.getActions()// })}else{that.setData({imgsrc:"../common/jpg/scan_ing.png",});}},})}})}})},upload(){console.log('上传照片');var that = this;clearInterval(that.interval);wx.showLoading({title: '上传中',})setTimeout(function () {wx.hideLoading()//还需添加上传到服务器的代码wx.showToast({title: '上传成功',icon: 'success',duration: 2000,success:function(){wx.reLaunch({url: '../index/index',})}})}, 2000)},onUnload:function(){var that = thisclearInterval(that.interval)},})

上面的图片

识别成功：

识别失败

face.wxml

<!--face.wxml-->
<view class="page-body"><view class="page-body-wrapper"><camera device-position="front" flash="off" binderror="error" style="width:100%;height:{{windowHeight}}px;"><cover-view  style="display: flex;align-items: center;justify-content: center;  width: 100%;height:{{windowHeight}}px;"><cover-image class="cover-img-view" src="{{imgsrc}}" style="width:90%;height:{{windowHeight*0.8}}px;"/></cover-view></camera><canvas wx:if="{{canvasshow}}" style="width: 100%;height:{{windowHeight}}px;position:absolute;" canvas-id="canvas"></canvas></view>
</view>

face.wxml

/**face.wxss**/
.preview-tips {margin: 50rpx 0  30rpx;
}.video {margin: 20rpx auto;width: 100%;height: 300px;
}page {background-color: #F6F8F8;height: 100%;font-size: 32rpx;line-height: 1.6;
}/* .page-body {padding: 20rpx 0;
} */.page-body-wrapper {display: flex;flex-direction: column;align-items: center;width: 100%;
}.btn-area {margin-top: 40rpx;box-sizing: border-box;width: 100%;padding: 0 30rpx;
}

Tips: 如果想要显示脸的识别框，可以把上面代码的所有注释语句都取消注释就可以了

微信小程序实现人脸检测相关推荐

python人脸检测与微信小程序_微信小程序实现人脸检测功能
本文为大家分享了微信小程序实现人脸检测的具体代码,供大家参考,具体内容如下因为本文章的人脸检测技术运用的是百度云人工智能,首先要有百度云的账号. 近期,人脸识别已经升级到了V3,开启了测试,所以也依 ...
php微信里面换行符,如何在字符串中间加换行符js微信小程序实现人脸识别
本文为大家分享了微信小程序人脸识别的具体代码,供大家参考,具体内容如下首先,我们要有开发者工具,今天所说的是后端和前端联合起来实现的. 在PHP的控制器中写一个upload方法,代码如下: publ ...
如何实现基于微信小程序的人脸识别
现在关于人脸识别的SDK其实有很多,诸如face++.百度大脑之类的,他们都能为开发者免费提供人脸识别的接口.阿里也和face++合作,实现了支付宝的刷脸支付. 但是很遗憾,网上关于识别一段视频中的用 ...
微信小程序用户自动检测最新版本并更新2020年最新版亲测
微信小程序新版本发布之后,用户使用依然是旧版本,这是因为在微信中有旧版本的缓存,不会及时更新到新版本.要想让用户更新到新版本,可以通过提示用户在微信中的"发现 - 小程序"入口中将 ...
微信小程序实现人脸识别注册登录
前言这是一篇关于一个原创微信小程序开发过程的原创文章.涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口.小程序的主体是一个用于个人密码存储的密码管理器,在登陆注册阶段,需要调用百度云人脸识别 ...
微信小程序珊瑚文本检测分享（Java案例）
[辰兮要努力]:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端.后台.数据 ...
微信小程序WebSocket心跳检测与断来重连
为什么要心跳检测使用微信小程序WebSocket时,WebSocket在一定的时间没有进行通信就会断开连接,所以需要使用心跳检测. 那么心跳检测是什么呢,心跳检测顾名思义就是和人心脏动一样,客户端在 ...
基于微信小程序的核酸检测系统源码
开发环境及工具: 大等于jdk1.8,大于mysql5.5,idea(eclipse),微信开发者工具技术说明: springboot mybatis 小程序代码注释齐全,没有多余代码,适合学习( ...
微信小程序【人脸识别功能】
前几天偶然看见一个人脸识别的小程序demo,觉得很有趣下载下来想玩玩,结果只是一个框架而已用不了的,花了点时间完善一下吐槽一下wx.uploadFile这个接口,真是个大坑,最开始调用时候,我以为它 ...

微信小程序实现人脸检测

小程序实现人脸检测

第一步我们需要注册百度api人脸识别接口，然后编写以下代码。

face.js

face.wxml

face.wxml

微信小程序实现人脸检测相关推荐

最新文章

热门文章