对于面部识别我们听起来很可能觉着很高大上,想着应该很困难,其实在百度云上有着提供的免费接口来实现面部识别。这样也就不是很困难了。
一、创建页面(wxml)
camera:
是用来调用相机的,它有device-position,前置或后置,值为front, back。flash,闪光灯,值为auto, on, off。bindstop,摄像头在非正常终止时触发,如退出后台等情况。binderror,用户不允许使用摄像头时触发。我们现在主要的参数是device-position。
switch:
是开关选择器,它有checked,是否选中。type,样式,有效值:switch, checkbox。bindchange,checked 改变时触发 change 事件,event.detail={ value:checked}。color,switch 的颜色,同 css 的 color,四个参数。在这里因为我们做的是手机端的想要控制前后摄像头,所以要用到这个开关。我们在js中会涉及到switch的设置。
最后再加一个button按钮代码就可以了。
二、功能实现页(js代码)
Page({
/**
* 页面的初始数据
*/
data: {
position: 'false',
imageList:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
Change: function (e) {
// console.log('switch1 发生 change 事件,携带值为', e.detail.value)
if (e.detail.value == false) {
this.setData({ position: 'back' });
} else {
this.setData({ position: 'front' });
}
},
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
var imageList = res.tempImagePath;
this.setData({
imageList: res.tempImagePath
})
wx.uploadFile({
url: '这里是自己的网址,此网址功能为将图片路劲存入数据库中,以方便去百度云人脸库中查询人脸',
filePath: res.tempImagePath,//图片路劲
name: 'file',
success: (res)=> {
var data=res.data;
console.log(data);
wx.showModal({
title: '提示',
content: data,
showCancel:false
})
}
})
}
})
}
Change:
我们在开关选择器上绑定了change方法:在change方法中,e.detail.value输出的会是true或者false.所以我们可以利用这一点让开关选择器为false时变为后置摄像头,开关选择器为true时变为前置摄像头。这样我们就实现了在手机端可以随意切换前后摄像头。
takePhoto:
我们在刷脸登陆按钮上绑定了takePhoto方法,在微信小程序文档中也对takePhoto做了举例:
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
}
和我们写的是一样的,wx.createCameraContext:创建并返回 camera 上下文 cameraContext
对象。
在res.tempImagePath中返回的是图片的路劲。这样的我们既可以得到这张图片,并且可以把这张图片存在数据库中,然后去和百度云里边已经有的人脸库去查询,如果人脸库存在图片,那么就可以登录。如果不存在,则不能登录。这就是一个简单的刷脸登陆。
这里在提醒一下,wx.uploadfile就是将图片上传到数据库的api。
到这里一个简单的人脸识别就完成了,有没有觉着很简单呢?有问题欢迎留言提问,大家一起进步,一起学习。来自一个暂时还是计算机小白的欢迎!