綜述
之前我們有講到在做一些深度學(xué)習(xí)圖像算法開發(fā)時(shí)，為了更好的將算法效果展示出來，經(jīng)常需要開發(fā)一些演示Demo應(yīng)用，使用在線C/S交互式應(yīng)用開發(fā)（類似于百度、騰訊、阿里的開放平臺(tái)）。C代表Client（客戶端），S代表Server（服務(wù)端），也就是UI處理與底層處理分離的方式，兩端的連接交互媒介就是Http網(wǎng)絡(luò)請(qǐng)求。像這里的算法演示在C端主要實(shí)現(xiàn)界面顯示、交互、發(fā)送請(qǐng)求與圖像繪制，S端主要是實(shí)現(xiàn)請(qǐng)求接收與返回、算法推理。C端主要包含移動(dòng)端App/網(wǎng)頁/小程序，S端就是后臺(tái)算法運(yùn)行服務(wù)器，本文主要介紹C端應(yīng)用實(shí)例（微信小程序人臉識(shí)別開放平臺(tái)）的開發(fā)。
條件準(zhǔn)備
前面既然提到是C/S開放，那么這兩者是缺一不可的。C就是我們本文要講的，S代表后端服務(wù)，在這里主要實(shí)現(xiàn)的是人臉檢測(cè)/五官定位/比對(duì)算法http請(qǐng)求接收接口，用以接收處理前端發(fā)來的算法請(qǐng)求。
服務(wù)器
請(qǐng)求地址：局域網(wǎng)/廣域網(wǎng)
請(qǐng)求協(xié)議（可以根據(jù)需要自行定義）
以下是我自己定義的協(xié)議：
人臉檢測(cè)請(qǐng)求協(xié)議
Request:
{
"command": "detection",// 算法類型
"image": imageBase64Str,// 待檢測(cè)圖片base64字符串碼
"max_face_num": 1,// 最大檢測(cè)人臉數(shù)
"image_url": "",// 待檢測(cè)圖片URL
"face_attribute": 1,// 是否進(jìn)行人臉屬性檢測(cè)
"face_quality": 1// 是否進(jìn)行人臉質(zhì)量檢測(cè)
}
Response:
{
"face_num": 1,//人臉個(gè)數(shù)
"face_list": [
{
"location": {//人臉位置
"x1": 132,
"y1": 305,
"x2": 259,
"y2": 493
},
"score": 0.999789,
"attributes": {//人臉屬性
"mask": 0,//是否戴口罩
"eyeopen": 1,//是否睜眼
"expression": 0,//是否正常表情
"yaw": 5,//偏轉(zhuǎn)角
"pitch": 6,//俯仰角
"roll": 7//翻滾角
},
"quality": {
"brightness": 0,//亮度是否合格
"blur": 0,//清晰度是否合格
"occlusion": {//人臉7區(qū)域遮擋情況
"left_eye": 1,
"right_eye": 1,
"nose": 1,
"mouth": 1,
"left_cheek": 1,
"right_cheek": 1,
"chin": 1
}
}
}
],
"request_id": "123456" //請(qǐng)求ID
}
人臉五官定位請(qǐng)求協(xié)議
Request：
{
"command": "landmark",// 算法類型
"image": image base64,// 待檢測(cè)圖片base64字符串碼
"image_url": "",// 待檢測(cè)圖片URL
"max_face": 1// 最大檢測(cè)人臉數(shù)
}
Response
{
"face_num": 1,//人臉個(gè)數(shù)
"face_list": [
{
"landmark": [//人臉關(guān)鍵點(diǎn)坐標(biāo)位置
{
"x": 50,
"y": 108
},
{
"x": 49,
"y": 114
},
......
{
"x": 71,
"y": 111
},
{
"x": 109,
"y": 110
}
]
}
],
"request_id": "123456"http://請(qǐng)求ID
}
人臉比對(duì)請(qǐng)求協(xié)議
Request:
{
"command": "compare",// 算法類型
"image1": image base64,// 待檢測(cè)圖片1 base64字符串碼
"image2": image base64,// 待檢測(cè)圖片2 base64字符串碼
"image_url1": "",// 待檢測(cè)圖片1 URL
"image_url2": "",// 待檢測(cè)圖片2 URL
"quality_control": 0// 是否進(jìn)行人臉質(zhì)量控制
}
Response:
{
"score": 99,//相似度分?jǐn)?shù)（0~100）
"request_id": "123456",//請(qǐng)求ID
"error": 0 //錯(cuò)誤碼
}
以上三個(gè)條件可以自己搭建，也可以購買第三方的服務(wù)。
開發(fā)所用關(guān)鍵技術(shù)（接口）
圖片文件選擇與數(shù)據(jù)獲取
我們?cè)谠L問開放平臺(tái)時(shí)經(jīng)常需要找一些自己的圖片進(jìn)行測(cè)試，所以就需要這樣一個(gè)方法來實(shí)現(xiàn)
如下代碼：
wx.chooseImage({
success: function(csi) {
//獲取圖片緩存地址
var tempFilePaths = csi.tempFilePaths
imageUrl = tempFilePaths[0]
//獲取圖片信息
wx.getImageInfo({
src: imageUrl,
success (gii) {
//根據(jù)圖片拍攝方向獲取圖片的寬高
if(gii.orientation=="up" || gii.orientation=="down" || gii.orientation=="up-mirrored" || gii.orientation=="down-mirrored"){
imageWidth = gii.width
imageHeight = gii.height
}else{
imageWidth = gii.height
imageHeight = gii.width
}
//獲取圖片Base64碼，一般網(wǎng)絡(luò)請(qǐng)求發(fā)送的圖片數(shù)據(jù)均是該格式數(shù)據(jù)
let imageBase64 = wx.getFileSystemManager().readFileSync(imageUrl, "base64")
}
})
}
})
圖片算法處理網(wǎng)絡(luò)請(qǐng)求
在獲取到圖片數(shù)據(jù)后，就需要將圖片數(shù)據(jù)發(fā)送到后端進(jìn)行算法處理請(qǐng)求來獲取算法運(yùn)行結(jié)果
如下代碼：
wx.request({
url: 'http://123.45.67.89:8080/face', //局域網(wǎng)接口地址（也可以是廣域網(wǎng)/https地址）
data: {
"command": "detect",// 算法類型
"image": imageBase64Str,// 待檢測(cè)圖片base64字符串碼
"max_face_num": 1,// 最大檢測(cè)人臉數(shù)
"image_url": "",// 待檢測(cè)圖片URL
"face_attribute": 1,// 是否進(jìn)行人臉屬性檢測(cè)
"face_quality": 1// 是否進(jìn)行人臉質(zhì)量檢測(cè)
},
header: {
'content-type': 'application/json' // 請(qǐng)求頭
},
method: "POST",// 請(qǐng)求方式
timeout: 5000,// 請(qǐng)求超時(shí)
dataType: "json",
success (response) {
// 請(qǐng)求成功處理
// 打印返回結(jié)果
console.log("face detect success:\n" + JSON.stringify(response, null ,2))
......
},
fail(res) {
// 請(qǐng)求失敗處理
// 打印返回結(jié)果
console.log("face detect fail:\n" + JSON.stringify(res, null ,2))
//請(qǐng)求失敗提示
wx.showToast({
title: '請(qǐng)求失敗:' + res.errMsg,
icon: 'none',
duration: 2000
})
},
complete(res) {
// 請(qǐng)求完成處理
console.log("face detect complete.")
}
})
圖片算法處理結(jié)果人臉框繪制
我們?cè)谀玫秸?qǐng)求結(jié)果以后如果只是打印reponse數(shù)據(jù)并不能直觀感受算法處理效果，這時(shí)如果能將結(jié)果通過圖像繪制將人臉位置顯示出來將是不錯(cuò)的處理方式
如下代碼：
wx.createSelectorQuery()
.select('#canvas_preview')//顯示控件
.fields({ node: true, size: true })
.exec((scvs) => {
// 獲取控件像素尺寸
const dom = scvs[0]
const canvas = dom.node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = dom.width * dpr
canvas.height = dom.height * dpr
ctx.scale(dpr, dpr)
const canvasMaxWidth = dom.width
const canvasMaxHeight = dom.height
// 獲取圖像縮放比例，保證圖片在控件內(nèi)完全顯示
const widthAdjustPara = canvasMaxWidth / imageWidth
const heightAdjustPara = canvasMaxHeight / imageHeight
var currentAdjustPara = 1
if(widthAdjustPara<1 || heightAdjustPara<1) {
currentAdjustPara = (widthAdjustPara <= heightAdjustPara ? widthAdjustPara : heightAdjustPara)
}
const canvasCurrentWidth = (currentAdjustPara===1 ? imageWidth : (imageWidth * currentAdjustPara))
const canvasCurrentHeight = (currentAdjustPara===1 ? imageHeight : (imageHeight * currentAdjustPara))
// 在控件內(nèi)繪制原圖
var img = canvas.createImage()
img.src = imageUrl
img.onload = function () {
// 居中繪制
ctx.drawImage(
img,
(canvasMaxWidth-canvasCurrentWidth)/2 + 1, // image x start
(canvasMaxHeight-canvasCurrentHeight)/2 + 1, // image y start
canvasCurrentWidth, canvasCurrentHeight // image dst w, h
)
// 檢測(cè)到人臉繪制人臉框（從返回?cái)?shù)據(jù)reponseData中獲取人臉框位置信息）
if(isDetected){
for (var i = 0; i < reponseData.data.face_num; i++) {
var x1 = reponseData.data.face_list[i].location.x1
var y1 = reponseData.data.face_list[i].location.y1
var x2 = reponseData.data.face_list[i].location.x2
var y2 = reponseData.data.face_list[i].location.y2
ctx.strokeStyle = '#00e5ff' // 繪制線顏色
// 矩形繪制
ctx.rect(
(canvasMaxWidth-canvasCurrentWidth)/2 + x1 * currentAdjustPara, // rect left value
(canvasMaxHeight-canvasCurrentHeight)/2 + y1 * currentAdjustPara, // rect top value
(x2-x1) * currentAdjustPara, (y2-y1) * currentAdjustPara // rect w, h
)
}
ctx.stroke()
}
}
})
圖片算法處理結(jié)果人臉關(guān)鍵點(diǎn)繪制
我們?cè)谀玫秸?qǐng)求結(jié)果以后如果只是打印reponse數(shù)據(jù)并不能直觀感受算法處理效果，這時(shí)如果能將結(jié)果通過圖像繪制將人臉關(guān)鍵點(diǎn)位置顯示出來將是不錯(cuò)的處理方式
如下代碼：
wx.createSelectorQuery()
.select('#canvas_preview')//顯示控件
.fields({ node: true, size: true })
.exec((scvs) => {
// 獲取控件像素尺寸
const dom = scvs[0]
const canvas = dom.node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = dom.width * dpr
canvas.height = dom.height * dpr
ctx.scale(dpr, dpr)
const canvasMaxWidth = dom.width
const canvasMaxHeight = dom.height
// 獲取圖像縮放比例，保證圖片在控件內(nèi)完全顯示
const widthAdjustPara = canvasMaxWidth / imageWidth
const heightAdjustPara = canvasMaxHeight / imageHeight
var currentAdjustPara = 1
if(widthAdjustPara<1 || heightAdjustPara<1) {
currentAdjustPara = (widthAdjustPara <= heightAdjustPara ? widthAdjustPara : heightAdjustPara)
}
const canvasCurrentWidth = (currentAdjustPara===1 ? imageWidth : (imageWidth * currentAdjustPara))
const canvasCurrentHeight = (currentAdjustPara===1 ? imageHeight : (imageHeight * currentAdjustPara))
// 在控件內(nèi)繪制原圖
var img = canvas.createImage()
img.src = imageUrl
img.onload = function () {
ctx.drawImage(
img,
(canvasMaxWidth-canvasCurrentWidth)/2 + 1, // image x start
(canvasMaxHeight-canvasCurrentHeight)/2 + 1, // image y start
canvasCurrentWidth, canvasCurrentHeight // image dst w, h
)
// 檢測(cè)到人臉繪制人臉關(guān)鍵點(diǎn)（從返回?cái)?shù)據(jù)reponseData中獲取人臉關(guān)鍵點(diǎn)位置信息）
if(isDetected){
var dot_radius = 1 //繪制點(diǎn)半徑
for (var i = 0; i < reponseData.data.face_num; i++) {
var pointNum = reponseData.data.face_list[i].landmark.length
for (var j = 0; j < pointNum; j++) {
var x = reponseData.data.face_list[i].landmark[j].x
var y = reponseData.data.face_list[i].landmark[j].y
ctx.beginPath()
ctx.fillStyle = "#00FFFF" // 繪制點(diǎn)顏色
// 圓點(diǎn)繪制
ctx.arc(
(canvasMaxWidth-canvasCurrentWidth)/2 + x * currentAdjustPara,
(canvasMaxHeight-canvasCurrentHeight)/2 + y * currentAdjustPara,
dot_radius, 0, 2 * Math.PI, true
)
ctx.closePath()
ctx.fill()
}
}
}
}
})
圖片算法處理結(jié)果人臉屬性列表顯示
我們?cè)谀玫秸?qǐng)求結(jié)果以后如果只是打印reponse數(shù)據(jù)會(huì)顯得比較亂，如果能通過列表整理的方式顯示出來將是不錯(cuò)的選擇
如下代碼：
index.js
Page({
data: {
systemInfo: {}, // 界面信息
isHiddenTable: false, //是否隱藏檢測(cè)結(jié)果列表
scrollToView: "0", //滑動(dòng)控件位置
resultListData:[], // 人臉檢測(cè)結(jié)果列表
},
......
)
//拿到響應(yīng)結(jié)果后的處理
if(data.data.face_num===1){ //單人臉情況
that.setData({
userInfo:{
tips:'單人臉檢測(cè)結(jié)果'
},
isHiddenTable: false,//是否隱藏結(jié)果列表
scrollToView: "單人臉檢測(cè)結(jié)果",
resultListData:[
{"attribute":"坐標(biāo)","valuetext":data.data.face_list[0].location.x1 + " "
+ data.data.face_list[0].location.y1 + " "
+ data.data.face_list[0].location.x2 + " "
+ data.data.face_list[0].location.y2
},
{"attribute":"口罩","valuetext":data.data.face_list[0].attributes.mask===0 ? "無" : "有"},
{"attribute":"睜眼","valuetext":data.data.face_list[0].attributes.eyeopen===0 ? "否" : "是"},
{"attribute":"表情","valuetext":data.data.face_list[0].attributes.expression===0 ? "正常" : "夸張"},
{"attribute":"姿態(tài)","valuetext":data.data.face_list[0].attributes.yaw + " "
+ data.data.face_list[0].attributes.pitch + " "
+ data.data.face_list[0].attributes.roll
},
{"attribute":"亮度","valuetext":data.data.face_list[0].quality.brightness===0 ? "正常" : "異常"},
{"attribute":"模糊","valuetext":data.data.face_list[0].quality.blur===0 ? "否" : "是"},
{"attribute":"遮擋","valuetext":data.data.face_list[0].quality.occlusion.left_eye===0
&& data.data.face_list[0].quality.occlusion.right_eye===0
&& data.data.face_list[0].quality.occlusion.nose===0
&& data.data.face_list[0].quality.occlusion.mouth===0
&& data.data.face_list[0].quality.occlusion.chin===0
&& data.data.face_list[0].quality.occlusion.left_cheek===0
&& data.data.face_list[0].quality.occlusion.right_cheek===0 ? "無" : "有"
}
]
})
}
index.wxml
<scroll-view class="userinfo-tips-scroll-view" style="width:{{canvasViewWidth}}px; height:{{canvasViewHeight/2}}px; display:flex; justify-content:center" scroll-y="true" scroll-top="{{scrollToView}}">
<text class="userinfo-tips" style="display:flex; justify-content:center">{{userInfo.tips}}</text>
<view class="table" hidden="{{isHiddenTable}}">
<view class="tr bg-w">
<view class="th">屬性</view>
<view class="th">結(jié)果值</view>
</view>
<block wx:for="{{resultListData}}" wx:key="{[attribute]}">
<view class="tr bg-g" wx:if="{{index % 2 == 0}}">
<view class="td">{{item.attribute}}</view>
<view class="td">{{item.valuetext}}</view>
</view>
<view class="tr" wx:else>
<view class="td">{{item.attribute}}</view>
<view class="td">{{item.valuetext}}</view>
</view>
</block>
</view>
</scroll-view>
功能切換導(dǎo)航欄定義
為了便于不同功能之間的切換演示，我們需要引入導(dǎo)航欄功能
如下代碼：
index,js文章來源：http://www.zghlxwxcb.cn/news/detail-789815.html
Page({
data: {
systemInfo: {}, // 界面信息
navbar: ['人臉檢測(cè)', '人臉五官', '人臉比對(duì)'], // 功能界面選項(xiàng)列表
currentNavbar: '0', //界面選項(xiàng)ID
isHiddenTable: false, //是否隱藏檢測(cè)結(jié)果列表
scrollToView: "0", //滑動(dòng)控件位置
resultListData:[], // 人臉檢測(cè)結(jié)果列表
compareResultData:[], //人臉比對(duì)結(jié)果列表
}
......
)
index.wxml文章來源地址http://www.zghlxwxcb.cn/news/detail-789815.html
<!--index.wxml-->
<view class="navbar">
<!-- wx:for-index="idx" -->
<view class="navbar-item" wx:for="{{navbar}}" wx:for-index="idx" data-idx="{{idx}}" bindtap="swichNav">
<text class="navbar-text {{currentNavbar==idx ? 'active' : ''}}">{{item}}</text>
</view>
</view>
<!-- 人臉檢測(cè)功能欄 -->
<view class="hot-item-container {{currentNavbar==0 ? '' : 'hidden'}}">
<!-- 人臉檢測(cè)主界面代碼 -->
</view>
<!-- 人臉五官功能欄 -->
<view class="hot-item-container {{currentNavbar==1 ? '' : 'hidden'}}">
<!-- 人臉五官主界面代碼 -->
</view>
<!-- 人臉比對(duì)功能欄 -->
<view class="hot-item-container {{currentNavbar==2 ? '' : 'hidden'}}">
<!-- 人臉比對(duì)主界面代碼 -->
</view>
效果展示
到了這里，關(guān)于微信小程序開發(fā)實(shí)例——人臉識(shí)別開放平臺(tái)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
