基于微信小程序?qū)崿F(xiàn)人臉數(shù)量檢測的開發(fā)步驟
更新時間：2022年12月02日 10:23:14 作者：摔跤貓子
最近項目需求是統(tǒng)計當前攝像頭中的人臉個數(shù),所以下面這篇文章主要給大家介紹了關(guān)于基于微信小程序?qū)崿F(xiàn)人臉數(shù)量檢測的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
一、文章前言
此文主要通過小程序?qū)崿F(xiàn)檢測圖片中的人臉數(shù)量并標記出位置信息。
當近視的小伙伴看不清遠處的人時，用小程序一鍵識別就可以在手機上看清楚啦，是不是很實用呢。
典型應(yīng)用場景：如人臉屬性分析，基于人臉關(guān)鍵點的加工分析，人臉營銷活動等。
二、具體流程及準備
2.1、注冊百度開放平臺及微信公眾平臺賬號。
2.2、下載及安裝微信Web開發(fā)者工具。
2.3、如需通過SDK調(diào)用及需準備對應(yīng)語言的開發(fā)工具。
三、開發(fā)步驟
3.1、訪問百度開放平臺選擇人臉識別并領(lǐng)取免費資源
3.2、填寫表單所需要的各項信息創(chuàng)建應(yīng)用。
3.3、創(chuàng)建完畢后回到應(yīng)用列表，將API Key 以及Serect Key復制出來，后面我們需要通過這些憑證來獲取Token。
3.4、信息準備好后，打開微信開發(fā)者工具，新建項目，選擇不使用模板、不使用云服務(wù)。
3.5、在pages文件夾下面創(chuàng)建一個文件夾并新建對應(yīng)的page文件。
3.6、在JS文件中的onLoad函數(shù)中請求獲取Token的接口，這時候就需要用到我們剛才所申請的ApiKey等信息了。
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
let that = this;
let ApiKey='這里填你所申請的ApiKey';
let SecretKey='這里填你所申請的SecretKey';
wx.request({
url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + ApiKey+'&client_secret='+SecretKey,
method: 'POST',
success: function (res) {
that.setData({
AccessToken:res.data.access_token
});
}
});
},
3.7、編譯程序，檢查接口是否有正常返回，下圖所標記的字段就是我們所需要的token了，它的有效期為30天，記得要及時更新。
3.8、查看人臉識別檢測接口請求說明及注意事項。
- 請求體格式化：Content-Type為application/json，通過json格式化請求體。
- Base64編碼：請求的圖片需經(jīng)過Base64編碼，圖片的base64編碼指將圖片數(shù)據(jù)編碼成一串字符串，使用該字符串代替圖像地址。您可以首先得到圖片的二進制，然后用Base64格式編碼即可。需要注意的是，圖片的base64編碼是不包含圖片頭的，如data:image/jpg;base64,。
- 圖片格式：現(xiàn)支持PNG、JPG、JPEG、BMP，不支持GIF圖片。
| 參數(shù) | 是否必選 | 類型 | 說明 |
|---|---|---|---|
| image | 是 | string | 圖片信息 |
| image_type | 是 | string | 圖片類型 |
| max_face_num | 否 | uint32 | 最多處理人臉的數(shù)目，默認值為1，最大120 |
| display_corp_image | 否 | string | 是否顯示檢測人臉的裁剪圖base64值；0：不顯示（默認）1：顯示 |
3.9、接下來要實現(xiàn)選擇圖片及將其轉(zhuǎn)換為base64的功能，因為圖像識別的接口參數(shù)需要base64格式；
借助wx.chooseImage及wx.getFileSystemManager()兩個函數(shù)，實現(xiàn)選擇圖片跟轉(zhuǎn)換格式的效果。
在wxml實現(xiàn)兩個按鈕及對應(yīng)的響應(yīng)函數(shù)。
<view class="containerBox"> <view class="leftBtn" bindtap="loadImage"> <image src="../../images/xj.png" class="btnImg"></image> 上傳圖像 </view> <view class="rightBtn" bindtap="identify"> <image src="../../images/face.png" class="btnImg"></image> 人臉檢測 </view> </view>
loadImage() {
let that = this;
wx.chooseImage({
count: 0,
sizeType: ['original', 'compressed'], //原圖 / 壓縮
sourceType: ['album', 'camera'], //相冊 / 相機拍照模式
success(res) {
that.setData({
imgSrc: res.tempFilePaths[0]
});
//將圖片轉(zhuǎn)換為Base64格式
wx.getFileSystemManager().readFile({
filePath: res.tempFilePaths[0],
encoding: 'base64',
success(data) {
let baseData = data.data; //'data:image/png;base64,' + data.data;
that.setData({
baseData: baseData
});
}
});
}
})
},
3.10、將圖片參數(shù)進行拼接并調(diào)用接口。
let that = this;
let requestData = {
'image': that.data.baseData,
'image_type': 'BASE64',
'max_face_num':120,
'display_corp_image':1,
}
;
wx.request({
url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=' + that.data.token,
method: 'POST',
header: {
'content-type': 'application/json;'
},
data: requestData,
success: function (identify) {
}
})
3.11、將結(jié)果進行打印輸出，其中的face_num字段就是所檢測到的人臉數(shù)量，face_list就是所檢測到人臉詳細信息，是通過數(shù)組的形式進行返回的。
| 字段 | 類型 | 說明 |
|---|---|---|
| face_num | int | 檢測到的圖片中的人臉數(shù)量 |
| face_list | array[] | 人臉信息列表 |
| face_token | string | 人臉的唯一標志 |
3.12、將接口所返回的檢測結(jié)果在頁面進行展示，這時候要用到一個循環(huán)把所返回的裁剪圖進行遍歷。
效果如下圖，接口其中還有很多所返回的參數(shù)沒有進行展示，有興趣的小伙伴可以都試一下。
<view class="result" wx:if="{{isShowDetail}}">
<view class="resultTitle">人臉數(shù)量：{{faceNum}}</view>
</view>
<image wx:for="{{face_list}}" src="data:image/png;base64,{{item.corp_image_base64}}" class="resultImg"></image>
四、完整代碼
<view class="containerBox">
<view class="leftBtn" bindtap="loadImage">
<image src="../../images/xj.png" class="btnImg"></image>
上傳圖像
</view>
<view class="rightBtn" bindtap="identify">
<image src="../../images/face.png" class="btnImg"></image>
人臉檢測
</view>
</view>
<view>
<image src="{{reproduction}}" class="showImg"></image>
</view>
<view class="result" wx:if="{{isShowDetail}}">
<view class="resultTitle">人臉數(shù)量：{{faceNum}}</view>
</view>
<image wx:for="{{face_list}}" src="data:image/png;base64,{{item.corp_image_base64}}" class="resultImg"></image>
<!--index.wxss-->
/* pages/pubu/index.wxss */
.containerBox{
width:750rpx;
display:flex;
height:62rpx;
margin-top:20rpx;
}
.leftBtn{
display: flex;
width:181rpx;
height:62rpx;
color:white;
border:1rpx solid #4FAFF2;
background:#4FAFF2;
border-radius:10rpx;
text-align: center;
line-height:62rpx;
font-size:28rpx;
margin-left: 108rpx;
}
.rightBtn{
display: flex;
width:181rpx;
height:62rpx;
color:white;
border:1rpx solid #4FAFF2;
border-radius:10rpx;
text-align: center;
line-height:62rpx;
font-size:28rpx;
margin-left: 172rpx;
background:#4FAFF2;
}
.btnImg{
width:50rpx;height:50rpx;margin-top:6rpx;margin-left:6rpx;
}
.showImg{
width:600rpx;
height:400rpx;
margin-left:75rpx;
margin-top:50rpx;
border-radius:10rpx;
}
.resultImg{
width:300rpx;
height:300rpx;
margin-left:50rpx;
margin-top:25rpx;
border-radius:50%;
}
.result{
margin-top:20rpx;
}
.resultTitle{
margin-left:75rpx;
margin-top:10rpx;
color:#2B79F5;
font-size:25rpx;
}
.productTableTr{
height: 80rpx;line-height: 80rpx;border-bottom: 5rpx solid #F8F8F8;display:flex;
}
.leftTr{
width: 583rpx;height: 80rpx;line-height: 80rpx;
}
.rightTr{
width: 119rpx;height: 80rpx;line-height: 80rpx;color: #FF2525;font-size: 26rpx;
}
.leftTrText{
color: #2B79F5;font-size: 28rpx;margin-left: 15rpx;width: 283rpx;
}
.productDetailTable{
width: 702rpx;margin-left: 24rpx;border:5rpx solid #F8F8F8;border-radius: 6rpx;
}
.copyBtn{
color:white;background:#2B79F5;border-radius:8rpx;width:100rpx;height:50rpx;margin-top:15rpx;
}
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
token: '',
imgSrc: '',
isShowDetail: false,
baseData: '',
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
let that = this;
let grant_type = 'client_credentials';
let client_id = '';
let client_secret = '';
wx.request({
url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=' + grant_type + '&client_id=' + client_id + '&client_secret=' + client_secret,
method: 'post',
header: {
'content-type': 'application/json'
},
success: function (res) {
that.setData({
token: res.data.access_token
});
}
})
},
loadImage() {
let that = this;
wx.chooseImage({
count: 0,
sizeType: ['original', 'compressed'], //原圖 / 壓縮
sourceType: ['album', 'camera'], //相冊 / 相機拍照模式
success(res) {
that.setData({
imgSrc: res.tempFilePaths[0]
});
//將圖片轉(zhuǎn)換為Base64格式
wx.getFileSystemManager().readFile({
filePath: res.tempFilePaths[0],
encoding: 'base64',
success(data) {
let baseData = data.data; //'data:image/png;base64,' + data.data;
that.setData({
baseData: baseData
});
}
});
}
})
},
//人臉檢測
identify() {
let that = this;
let requestData = {
'image': that.data.baseData,
'image_type': 'BASE64',
'max_face_num':120,
'display_corp_image':1,
};
wx.request({
url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=' + that.data.token,
method: 'POST',
header: {
'content-type': 'application/json;'
},
data: requestData,
success: function (identify) {
console.log(identify);
that.setData({
isShowDetail: true,
faceNum:identify.data.result.face_num,
face_list:identify.data.result.face_list
});
}
})
},
總結(jié)
到此這篇關(guān)于基于微信小程序?qū)崿F(xiàn)人臉數(shù)量檢測的文章就介紹到這了,更多相關(guān)小程序人臉數(shù)量檢測內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄猨s中獲取jsp表單中radio類型的值簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
js利用clipboardData實現(xiàn)截屏粘貼功能
這篇文章主要為大家詳細介紹了js利用clipboardData實現(xiàn)截屏粘貼功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了JavaScript中的數(shù)組操作介紹,本文講解了join()、reverse()、sort()、concat()、slice()、splice()等幾個函數(shù)的操作實例,需要的朋友可以參考下2014-12-12
JS實現(xiàn)的文字間歇循環(huán)滾動效果完整示例
這篇文章主要介紹了JS實現(xiàn)的文字間歇循環(huán)滾動效果,涉及javascript結(jié)合時間函數(shù)定時觸發(fā)實現(xiàn)頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-02-02
JavaScript編碼風格精選指南(編寫可維護的代碼規(guī)范)
javascript編碼規(guī)范能夠增強代碼的簡潔性、可讀性、可擴展性,項目做到后期,每修改一次,所耗費的成本就越高,編碼規(guī)范能節(jié)省這樣的成本,并且能很好拓展升級原有系統(tǒng)功能,javascript編碼規(guī)范也是開源社區(qū)大家約定俗成的規(guī)則！2024-06-06
Javascript 構(gòu)造函數(shù),公有,私有特權(quán)和靜態(tài)成員定義方法
其中公有方法聲明的部分采用的兩種方式，在實際應(yīng)用中一般采取一種方式就可以了，如果兩種方式都要采用的話，應(yīng)注意順序，防止前面寫的方法被清空或覆蓋。2009-11-11
這篇文章主要為大家詳細JavaScript中this指向的簡單理解，感興趣的小伙伴們可以參考一下2016-08-08
Ajax異步提交表單數(shù)據(jù)的說明及方法實例，需要的朋友可以參考一下2013-06-06
javascript使用for循環(huán)批量注冊的事件不能正確獲取索引值的解決方法
這篇文章主要介紹了javascript使用for循環(huán)批量注冊的事件不能正確獲取索引值的解決方法,對比分析了出現(xiàn)問題的代碼與修改后的代碼,并給出了采用閉包實現(xiàn)的方法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
本文主要介紹了javascript實現(xiàn)下雨效果的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03