微信小程序?qū)崿F(xiàn)人臉識(shí)別對(duì)比
更新時(shí)間：2022年10月21日 14:22:22 作者：摔跤貓子
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識(shí)別對(duì)比,此文主要通過小程序?qū)崿F(xiàn)對(duì)比人臉相似度，并返回相似度分值，可以基于分值判斷是否為同一人，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
一、文章前言
此文主要通過小程序?qū)崿F(xiàn)對(duì)比人臉相似度，并返回相似度分值，可以基于分值判斷是否為同一人。人臉登錄、用戶認(rèn)證等場景都可以用到。
二、具體流程及準(zhǔn)備
2.1、注冊百度開放平臺(tái)及微信公眾平臺(tái)賬號(hào)。
2.2、下載及安裝微信Web開發(fā)者工具。
2.3、如需通過SDK調(diào)用及需準(zhǔn)備對(duì)應(yīng)語言的開發(fā)工具。
三、開發(fā)步驟
3.1、訪問百度開放平臺(tái)選擇人臉識(shí)別并領(lǐng)取免費(fèi)資源。
3.2、填寫表單所需要的各項(xiàng)信息創(chuàng)建應(yīng)用。
3.3、創(chuàng)建完畢后回到應(yīng)用列表，將API Key 以及Serect Key復(fù)制出來，后面我們需要通過這些憑證來獲取Token。
3.4、信息準(zhǔn)備好后，打開微信開發(fā)者工具，新建項(xiàng)目，選擇不使用模板、不使用云服務(wù)。
3.5、在pages文件夾下面創(chuàng)建一個(gè)文件夾并新建對(duì)應(yīng)的page文件。
3.6、在JS文件中的onLoad函數(shù)中請(qǐng)求獲取Token的接口，這時(shí)候就需要用到我們剛才所申請(qǐng)的ApiKey等信息； 了。
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
let that = this;
let ApiKey='這里填你所申請(qǐng)的ApiKey';
let SecretKey='這里填你所申請(qǐng)的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、編譯程序，檢查接口是否有正常返回，下圖所標(biāo)記的字段就是我們所需要的token了，它的有效期為30天，記得要及時(shí)更新。
3.8、查看人臉對(duì)比接口請(qǐng)求說明及注意事項(xiàng)。
- 請(qǐng)求體格式化：Content-Type為application/json，通過json格式化請(qǐng)求體。
- Base64編碼：請(qǐng)求的圖片需經(jīng)過Base64編碼，圖片的base64編碼指將圖片數(shù)據(jù)編碼成一串字符串，使用該字符串代替圖像地址。您可以首先得到圖片的二進(jìn)制，然后用Base64格式編碼即可。需要注意的是，圖片的base64編碼是不包含圖片頭的，如data:image/jpg;base64,。
- 圖片格式：現(xiàn)支持PNG、JPG、JPEG、BMP，不支持GIF圖片。
| 參數(shù) | 是否必選 | 類型 | 說明 |
|---|---|---|---|
| image | 是 | string | 圖片信息 |
| image_type | 是 | string | 圖片類型 |
| image_type | 否 | string | 人臉的類型 |
| quality_control | 否 | string | 圖片質(zhì)量控制 |
| liveness_control | 否 | string | 活體檢測控制 |
[
{
"image": "sfasq35sadvsvqwr5q...",
"image_type": "BASE64",
"face_type": "LIVE",
"quality_control": "LOW",
"liveness_control": "HIGH"
},
{
"image": "sfasq35sadvsvqwr5q...",
"image_type": "BASE64",
"face_type": "IDCARD",
"quality_control": "LOW",
"liveness_control": "HIGH"
}
]
3.9、接下來要實(shí)現(xiàn)選擇圖片及將其轉(zhuǎn)換為base64的功能，因?yàn)閳D像識(shí)別的接口參數(shù)需要base64格式；
需要用到wx.chooseImage以及wx.getFileSystemManager()兩個(gè)函數(shù)。這里我們得依次選擇兩張圖片進(jìn)行對(duì)比才能實(shí)現(xiàn)效果，因?yàn)闆]有搭建API，按正常的流程來說，是用戶先上傳自己的人臉信息到人臉庫，然后在驗(yàn)證的環(huán)節(jié)的時(shí)候才需要上傳實(shí)時(shí)的照片
<view class="containerBox"> <view class="leftBtn" bindtap="loadImage">上傳人臉庫</view> <view class="rightBtn" bindtap="loadImagethis">上傳實(shí)時(shí)照</view> </view>
loadImage() {
let that = this;
wx.chooseImage({
count: 0,
sizeType: ['original', 'compressed'], //原圖 / 壓縮
sourceType: ['album', 'camera'], //相冊 / 相機(jī)拍照模式
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
});
}
});
}
})
},
<image src="{{imgSrc}}" class="showImg"></image>
| 參數(shù) | 是否必選 | 類型 | 說明 |
|---|---|---|---|
| image | 是 | string | 圖片信息(總數(shù)據(jù)大小應(yīng)小于10M，圖片尺寸在1920x1080以下)，圖片上傳方式根據(jù)image_type來判斷。 兩張圖片通過json格式上傳 |
3.10、將我們兩次上傳的圖片信息進(jìn)行拼接并傳遞，接口中所返回的score就是我們所需要的人臉相似度得分了。
let that = this;
let requestData = [{
'image': that.data.baseData,
'image_type': 'BASE64'
},
{
'image': that.data.baseDatathis,
'image_type': 'BASE64'
}
];
wx.request({
url: 'https://aip.baidubce.com/rest/2.0/face/v3/match?access_token=' + that.data.token,
method: 'POST',
header: {
'content-type': 'application/json;charset=UTF-8;'
},
data: requestData,
success: function (identify) {
}
})
| 字段 | 類型 | 說明 |
|---|---|---|
| score | float | 人臉相似度得分，推薦閾值80分 |
| face_list | array[] | 人臉信息列表 |
| face_token | string | 人臉的唯一標(biāo)志 |
3.11、將接口所返回的識(shí)別結(jié)果在頁面進(jìn)行展示。
<view class="result" wx:if="{{isShowDetail}}">
<view class="resultTitle">識(shí)別分?jǐn)?shù)：{{score}}</view>
<view class="resultTitle">人臉相似度得分，推薦閾值80分</view>
</view>
四、完整代碼
<!--index.wxml-->
<view class="containerBox">
<view class="leftBtn" bindtap="loadImage">上傳人臉庫</view>
<view class="rightBtn" bindtap="loadImagethis">上傳實(shí)時(shí)照</view>
</view>
<view>
<image src="{{reproduction}}" class="showImg"></image>
<image src="{{imgSrc}}" class="showImg"></image>
</view>
<view class="result" wx:if="{{isShowDetail}}">
<view class="resultTitle">識(shí)別分?jǐn)?shù)：{{score}}</view>
<view class="resultTitle">人臉相似度得分，推薦閾值80分</view>
</view>
<view class="centerBtn" bindtap="identify">圖像識(shí)別</view><!--index.wxss-->
/* pages/pubu/index.wxss */
.containerBox{
width:750rpx;
display:flex;
height:62rpx;
margin-top:20rpx;
}
.leftBtn{
width:181rpx;
height:62rpx;
color:#4FAFF2;
border:1rpx solid #4FAFF2;
border-radius:10rpx;
text-align: center;
line-height:62rpx;
font-size:28rpx;
margin-left: 158rpx;
}
.rightBtn{
width:181rpx;
height:62rpx;
color:white;
border:1rpx solid #4FAFF2;
border-radius:10rpx;
text-align: center;
line-height:62rpx;
font-size:28rpx;
margin-left: 73rpx;
background:#4FAFF2;
}
.centerBtn{
width:181rpx;
height:62rpx;
color:white;
border:1rpx solid #29D124;
border-radius:10rpx;
text-align: center;
line-height:62rpx;
font-size:28rpx;
margin-left: 284rpx;
background:#29D124;
margin-top:20rpx;
}
.showImg{
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'], //相冊 / 相機(jī)拍照模式
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
});
}
});
}
})
},
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)人臉識(shí)別對(duì)比的文章就介紹到這了,更多相關(guān)小程序人臉識(shí)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解javascript replace高級(jí)用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章對(duì)js編寫等方便詳細(xì)的說明了幾個(gè)技巧，方便大家提高效率，學(xué)習(xí)簡易化書寫代碼2013-03-03
js類定義函數(shù)時(shí)用prototype與不用的區(qū)別示例介紹
沒有使用prototype的方法相當(dāng)于類的靜態(tài)方法，相反，使用prototype的方法相當(dāng)于類的實(shí)例方法，不許new后才能使用2014-06-06
js獲取select默認(rèn)選中的Option并不是當(dāng)前選中值
這篇文章主要介紹了js如何獲取select默認(rèn)選中的Option并不是當(dāng)前選中的值,需要的朋友可以參考下2014-05-05
JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽庫實(shí)例
這篇文章主要介紹了JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽庫,以實(shí)例形式分析了JavaScript設(shè)置水平、垂直拖拽及限制拖拽范圍的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了js 概率計(jì)算(簡單版),需要的朋友可以參考下2017-09-09
JavaScript 中有關(guān)數(shù)組對(duì)象的方法(詳解)
下面小編就為大家?guī)硪黄狫avaScript 中有關(guān)數(shù)組對(duì)象的方法(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
阻止事件(取消瀏覽器對(duì)事件的默認(rèn)行為并阻止其傳播)
取消瀏覽器對(duì)事件的默認(rèn)行為(響應(yīng))(比如a標(biāo)簽的跳轉(zhuǎn)等)并停止事件的繼續(xù)傳播，下面有一個(gè)不錯(cuò)的示例大家可以感受下2013-11-11
JavaScript中解析JSON數(shù)據(jù)的三種方法
這篇文章主要介紹了JavaScript中解析JSON數(shù)據(jù)的三種方法,本文講解了eval()方法、new Function方法、JSON.parse()方法等三種方法,需要的朋友可以參考下2015-07-07
這篇文章其實(shí)是要講閉包的一些初級(jí)應(yīng)用，但是為了將閉包，我們還是從嵌套函數(shù)開始說吧，縱使所有的JavaScript函數(shù)都可以說是閉包，但是只有當(dāng)一個(gè)嵌套函數(shù)被導(dǎo)出到它所定義的作用域之外時(shí)，這種閉包才是有趣的。2010-11-11