基于微信小程序?qū)崿F(xiàn)人臉數(shù)量檢測的開發(fā)步驟

更新時(shí)間：2022年12月02日 10:23:14 作者：摔跤貓子

最近項(xiàng)目需求是統(tǒng)計(jì)當(dāng)前攝像頭中的人臉個(gè)數(shù),所以下面這篇文章主要給大家介紹了關(guān)于基于微信小程序?qū)崿F(xiàn)人臉數(shù)量檢測的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

一、文章前言

此文主要通過小程序?qū)崿F(xiàn)檢測圖片中的人臉數(shù)量并標(biāo)記出位置信息。

當(dāng)近視的小伙伴看不清遠(yuǎn)處的人時(shí)，用小程序一鍵識別就可以在手機(jī)上看清楚啦，是不是很實(shí)用呢。

典型應(yīng)用場景：如人臉屬性分析，基于人臉關(guān)鍵點(diǎn)的加工分析，人臉營銷活動等。

二、具體流程及準(zhǔn)備

2.1、注冊百度開放平臺及微信公眾平臺賬號。
2.2、下載及安裝微信Web開發(fā)者工具。
2.3、如需通過SDK調(diào)用及需準(zhǔn)備對應(yīng)語言的開發(fā)工具。

三、開發(fā)步驟

3.1、訪問百度開放平臺選擇人臉識別并領(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è)文件夾并新建對應(yīng)的page文件。

3.6、在JS文件中的onLoad函數(shù)中請求獲取Token的接口，這時(shí)候就需要用到我們剛才所申請的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、編譯程序，檢查接口是否有正常返回，下圖所標(biāo)記的字段就是我們所需要的token了，它的有效期為30天，記得要及時(shí)更新。

3.8、查看人臉識別檢測接口請求說明及注意事項(xiàng)。

請求體格式化：Content-Type為application/json，通過json格式化請求體。
Base64編碼：請求的圖片需經(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	圖片類型
max_face_num	否	uint32	最多處理人臉的數(shù)目，默認(rèn)值為1，最大120
display_corp_image	否	string	是否顯示檢測人臉的裁剪圖base64值；0：不顯示（默認(rèn)）1：顯示

3.9、接下來要實(shí)現(xiàn)選擇圖片及將其轉(zhuǎn)換為base64的功能，因?yàn)閳D像識別的接口參數(shù)需要base64格式；

借助wx.chooseImage及wx.getFileSystemManager()兩個(gè)函數(shù)，實(shí)現(xiàn)選擇圖片跟轉(zhuǎn)換格式的效果。

在wxml實(shí)現(xiàn)兩個(gè)按鈕及對應(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'], //相冊 / 相機(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
            });
          }
        });
      }
    })
  },

3.10、將圖片參數(shù)進(jìn)行拼接并調(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é)果進(jìn)行打印輸出，其中的face_num字段就是所檢測到的人臉數(shù)量，face_list就是所檢測到人臉詳細(xì)信息，是通過數(shù)組的形式進(jìn)行返回的。

字段	類型	說明
face_num	int	檢測到的圖片中的人臉數(shù)量
face_list	array[]	人臉信息列表
face_token	string	人臉的唯一標(biāo)志

3.12、將接口所返回的檢測結(jié)果在頁面進(jìn)行展示，這時(shí)候要用到一個(gè)循環(huán)把所返回的裁剪圖進(jìn)行遍歷。

效果如下圖，接口其中還有很多所返回的參數(shù)沒有進(jìn)行展示，有興趣的小伙伴可以都試一下。

<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'], //相冊 / 相機(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
            });
          }
        });
      }
    })
  },
    //人臉檢測
  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
        });
      }
    })
  },