- 本文主要介紹基於百度雲人臉識別接口實現微信小程序人臉搜索
- 開發前的准備：
- 參考文檔：
- 在寫小程序端的代碼前，還需要去百度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="upload">上傳人臉庫 </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() {
//調用接口，獲取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() {
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中相關的參數這里就不一一說明了，詳情請閱讀官方文檔。
本文只介紹了簡單的人臉搜索實現方法，由於功力有限，還望多多指教。