欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序實現人臉識別對比

 更新時間:2022年10月21日 14:22:22   作者:摔跤貓子  
這篇文章主要介紹了微信小程序實現人臉識別對比,此文主要通過小程序實現對比人臉相似度,并返回相似度分值,可以基于分值判斷是否為同一人,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下

一、文章前言

此文主要通過小程序實現對比人臉相似度,并返回相似度分值,可以基于分值判斷是否為同一人。人臉登錄、用戶認證等場景都可以用到。

二、具體流程及準備

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

三、開發(fā)步驟

3.1、訪問百度開放平臺選擇人臉識別并領取免費資源。

3.2、填寫表單所需要的各項信息創(chuàng)建應用。

3.3、創(chuàng)建完畢后回到應用列表,將API Key 以及Serect Key復制出來,后面我們需要通過這些憑證來獲取Token。

3.4、信息準備好后,打開微信開發(fā)者工具,新建項目,選擇不使用模板、不使用云服務。

3.5、在pages文件夾下面創(chuàng)建一個文件夾并新建對應的page文件。

3.6、在JS文件中的onLoad函數中請求獲取Token的接口,這時候就需要用到我們剛才所申請的ApiKey等信息; 了。

/**
 * 生命周期函數--監(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編碼:請求的圖片需經過Base64編碼,圖片的base64編碼指將圖片數據編碼成一串字符串,使用該字符串代替圖像地址。您可以首先得到圖片的二進制,然后用Base64格式編碼即可。需要注意的是,圖片的base64編碼是不包含圖片頭的,如data:image/jpg;base64,。
  • 圖片格式:現支持PNG、JPG、JPEG、BMP,不支持GIF圖片。
參數是否必選類型說明
imagestring圖片信息
image_typestring圖片類型
image_typestring人臉的類型
quality_controlstring圖片質量控制
liveness_controlstring活體檢測控制
[
    {
        "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、接下來要實現選擇圖片及將其轉換為base64的功能,因為圖像識別的接口參數需要base64格式;

需要用到wx.chooseImage以及wx.getFileSystemManager()兩個函數。這里我們得依次選擇兩張圖片進行對比才能實現效果,因為沒有搭建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]
        });
        //將圖片轉換為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>
參數是否必選類型說明
imagestring圖片信息(總數據大小應小于10M,圖片尺寸在1920x1080以下),圖片上傳方式根據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) {
    
      }
    })

字段類型說明
scorefloat人臉相似度得分,推薦閾值80分
face_listarray[]人臉信息列表
face_tokenstring人臉的唯一標志

3.11、將接口所返回的識別結果在頁面進行展示。

<view class="result" wx:if="{{isShowDetail}}">
  <view class="resultTitle">識別分數:{{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">識別分數:{{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;
}
 /**
   * 頁面的初始數據
   */
  data: {
    token: '',
    imgSrc: '',
    isShowDetail: false,
    baseData: '',
  },
   /**
   * 生命周期函數--監(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]
        });
        //將圖片轉換為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
            });
          }
        });
      }
    })
  },

到此這篇關于微信小程序實現人臉識別對比的文章就介紹到這了,更多相關小程序人臉識別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 詳解javascript replace高級用法

    詳解javascript replace高級用法

    這篇文章主要介紹了詳解javascript replace高級用法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-02-02
  • 早該知道的7個JavaScript技巧

    早該知道的7個JavaScript技巧

    這篇文章對js編寫等方便詳細的說明了幾個技巧,方便大家提高效率,學習簡易化書寫代碼
    2013-03-03
  • js類定義函數時用prototype與不用的區(qū)別示例介紹

    js類定義函數時用prototype與不用的區(qū)別示例介紹

    沒有使用prototype的方法相當于類的靜態(tài)方法,相反,使用prototype的方法相當于類的實例方法,不許new后才能使用
    2014-06-06
  • js獲取select默認選中的Option并不是當前選中值

    js獲取select默認選中的Option并不是當前選中值

    這篇文章主要介紹了js如何獲取select默認選中的Option并不是當前選中的值,需要的朋友可以參考下
    2014-05-05
  • JS基于面向對象實現的拖拽庫實例

    JS基于面向對象實現的拖拽庫實例

    這篇文章主要介紹了JS基于面向對象實現的拖拽庫,以實例形式分析了JavaScript設置水平、垂直拖拽及限制拖拽范圍的實現技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09
  • js 概率計算(簡單版)

    js 概率計算(簡單版)

    這篇文章主要介紹了js 概率計算(簡單版),需要的朋友可以參考下
    2017-09-09
  • JavaScript 中有關數組對象的方法(詳解)

    JavaScript 中有關數組對象的方法(詳解)

    下面小編就為大家?guī)硪黄狫avaScript 中有關數組對象的方法(詳解)。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • 阻止事件(取消瀏覽器對事件的默認行為并阻止其傳播)

    阻止事件(取消瀏覽器對事件的默認行為并阻止其傳播)

    取消瀏覽器對事件的默認行為(響應)(比如a標簽的跳轉等)并停止事件的繼續(xù)傳播,下面有一個不錯的示例大家可以感受下
    2013-11-11
  • JavaScript中解析JSON數據的三種方法

    JavaScript中解析JSON數據的三種方法

    這篇文章主要介紹了JavaScript中解析JSON數據的三種方法,本文講解了eval()方法、new Function方法、JSON.parse()方法等三種方法,需要的朋友可以參考下
    2015-07-07
  • 淺談Javascript嵌套函數及閉包

    淺談Javascript嵌套函數及閉包

    這篇文章其實是要講閉包的一些初級應用,但是為了將閉包,我們還是從嵌套函數開始說吧,縱使所有的JavaScript函數都可以說是閉包,但是只有當一個嵌套函數被導出到它所定義的作用域之外時,這種閉包才是有趣的。
    2010-11-11

最新評論