- 本文主要介绍基于百度云人脸识别接口实现微信小程序人脸搜索
- 开发前的准备：
- 参考文档：
- 在写小程序端的代码前，还需要去百度ai平台创建相关应用实例，不清楚的读者可以参考我之前的微信小程序实现图像搜索的文章，当然，建议直接看官方文档，官方文档写得很详细。
- 代码：
1、Wxml：
<view class="container">
<!-- 相机组件 -->
<camera
class="camera"
device-position="front"
flash="off"
binderror="error"
></camera>
<view class="button_container">
<!-- 按钮组件，点击上传人脸库 -->
<button class="button"
bindtap="takePhoto">上传人脸库 </button>
<!-- 按钮组件，进行人脸识别 -->
<button class="button"
bindtap="check">人脸库识别 </button>
</view>
</view>
2、Wxss:
page {
background: white;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.button_container {
margin-top: 600rpx;
display: flex;
flex-direction: column;
}
.camera {
width: 300rpx;
height: 300rpx;
border-radius: 50%;
position: fixed;
top: 100rpx;
}
.button {
margin-top: 20rpx;
width: 100rpx;
height: 60rpx;
background: forestgreen;
color: white;
}
3、Javascript:
// camera.js
Page({
data: {
src: "",
token: "",
base64: "",
msg: "",
},
//上传至人脸库
upload(){
this.takePhoto();
this.faceUpload();
},
//进行人脸识别
check(){
this.takePhoto();
this.faceRecognition();
},
//拍照
takePhoto() {
var that = this;
//创建拍照上下文对象
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: ‘high‘,
//拍照成功
success: (res) => {
console.log(res)
wx.getFileSystemManager().readFile({
filePath: res.tempImagePath,
encoding: ‘base64‘,
success: res => {
console.log(res)
this.setData({
base64: res.data
})
},
//拍照失败
fail: err => {
console.log(err)
this.showToast("调用失败,请稍后重试");
}
})
},
fail: err => {
this.showToast("调用失败,请稍后重试");
}
})
},
//人脸上传
faceUpload(group_id, user_id) {
//调用接口，获取token
wx.request({
url: ‘https://aip.baidubce.com/oauth/2.0/token‘, //百度智能云相关的接口地址
data: {
grant_type: ‘client_credentials‘,
client_id: ‘xxxxxxxxxxxxxxxx‘,//用你创建的应用的API Key
client_secret: ‘xxxxxxxxxxxxxxxx‘//用你创建的应用的Secret Key
},
header: {
‘Content-Type‘: ‘application/json‘ // 默认值
},
//获取到之后，请求接口，向人脸库添加照片
success: res => {
console.log(res)
wx.request({
url: ‘https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=‘ + res.data.access_token,
method: ‘POST‘,
data: {
image: this.data.base64,
image_type: ‘BASE64‘,
group_id:‘xxx‘,//用户组的id
user_id:"xxxx"//给用户指定的id
},
header: {
‘Content-Type‘: ‘application/json‘
},
success: res => {
// console.log(res)
if (res.data.error_msg == ‘SUCCESS‘) {
wx.hideLoading();
this.showToast("上传成功");
} else {
this.showToast("上传失败，请稍后重试");
}
},
fail(err) {
this.showToast("上传失败，请稍后重试");
}
})
},
fail(err) {
// console.log(err)
this.showToast("上传失败，请稍后重试");
}
})
},
//人脸识别
faceRecognition( group_id_list) {
var that = this;
wx.showLoading({
title: ‘识别中‘,
})
//获取token
wx.request({
url: ‘https://aip.baidubce.com/oauth/2.0/token‘, //真实的接口地址
data: {
grant_type: ‘client_credentials‘,
client_id: ‘xxxxxxxxxxxxxx‘,
client_secret: ‘xxxxxxxxxxxxxxxx‘
},
header: {
‘Content-Type‘: ‘application/json‘
},
//有了token之后，进行人脸识别
success: res => {
wx.request({
url: ‘https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=‘ + res.data.access_token,
method: ‘POST‘,
data: {
image: that.data.base64,
image_type: ‘BASE64‘,
group_id_list: ‘xxxx‘//你创建的应用的用户组id
},
header: {
‘Content-Type‘: ‘application/json‘
},
success: res => {
wx.hideLoading();
console.log(res)
that.setData({
msg: parseInt(res.data.result.user_list[0].score)
})
if (that.data.msg > 80) {
let title = "识别通过,匹配率:" + this.data.msg + "%";
this.showToast(title)
} else {
let title = "识别未通过,匹配率:" + this.data.msg + "%";
this.showToast(title)
}
},
fail: err => {
wx.hideLoading();
this.showToast("调用失败,请稍后重试")
}
});
}
})
},
//封装的wx.showToast
showToast(title) {
wx.showToast({
title: title,
icon: ‘none‘,
duration: 3000
})
}
})
请求中body中相关的参数这里就不一一说明了，详情请阅读官方文档。
本文只介绍了简单的人脸搜索实现方法，由于功力有限，还望多多指教。