微信小程序?qū)崿F(xiàn)人臉識別對比
一、文章前言
此文主要通過小程序?qū)崿F(xià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復(fù)制出來,后面我們需要通過這些憑證來獲取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 | 圖片類型 |
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、接下來要實現(xiàn)選擇圖片及將其轉(zhuǎn)換為base64的功能,因為圖像識別的接口參數(shù)需要base64格式;
需要用到wx.chooseImage以及wx.getFileSystemManager()兩個函數(shù)。這里我們得依次選擇兩張圖片進行對比才能實現(xiàn)效果,因為沒有搭建API,按正常的流程來說,是用戶先上傳自己的人臉信息到人臉庫,然后在驗證的環(huán)節(jié)的時候才需要上傳實時的照片
<view class="containerBox"> <view class="leftBtn" bindtap="loadImage">上傳人臉庫</view> <view class="rightBtn" bindtap="loadImagethis">上傳實時照</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 }); } }); } }) },
<image src="{{imgSrc}}" class="showImg"></image>
參數(shù) | 是否必選 | 類型 | 說明 |
---|---|---|---|
image | 是 | string | 圖片信息(總數(shù)據(jù)大小應(yīng)小于10M,圖片尺寸在1920x1080以下),圖片上傳方式根據(jù)image_type來判斷。 兩張圖片通過json格式上傳 |
3.10、將我們兩次上傳的圖片信息進行拼接并傳遞,接口中所返回的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 | 人臉的唯一標志 |
3.11、將接口所返回的識別結(jié)果在頁面進行展示。
<view class="result" wx:if="{{isShowDetail}}"> <view class="resultTitle">識別分數(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">上傳實時照</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ù):{{score}}</view> <view class="resultTitle">人臉相似度得分,推薦閾值80分</view> </view> <view class="centerBtn" bindtap="identify">圖像識別</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'], //相冊 / 相機拍照模式 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)人臉識別對比的文章就介紹到這了,更多相關(guān)小程序人臉識別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js類定義函數(shù)時用prototype與不用的區(qū)別示例介紹
沒有使用prototype的方法相當(dāng)于類的靜態(tài)方法,相反,使用prototype的方法相當(dāng)于類的實例方法,不許new后才能使用2014-06-06js獲取select默認選中的Option并不是當(dāng)前選中值
這篇文章主要介紹了js如何獲取select默認選中的Option并不是當(dāng)前選中的值,需要的朋友可以參考下2014-05-05JavaScript 中有關(guān)數(shù)組對象的方法(詳解)
下面小編就為大家?guī)硪黄狫avaScript 中有關(guān)數(shù)組對象的方法(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08JavaScript中解析JSON數(shù)據(jù)的三種方法
這篇文章主要介紹了JavaScript中解析JSON數(shù)據(jù)的三種方法,本文講解了eval()方法、new Function方法、JSON.parse()方法等三種方法,需要的朋友可以參考下2015-07-07