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

微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼

 更新時(shí)間:2019年04月02日 11:05:13   作者:yocichen  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

這是一篇關(guān)于一個(gè)原創(chuàng)微信小程序開(kāi)發(fā)過(guò)程的原創(chuàng)文章。涉及到的核心技術(shù)是微信小程序開(kāi)發(fā)方法和百度云人臉識(shí)別接口。小程序的主體是一個(gè)用于個(gè)人密碼存儲(chǔ)的密碼管理器,在登陸注冊(cè)階段,需要調(diào)用百度云人臉識(shí)別接口以及百度云在線人臉庫(kù)的管理接口。本文主要涉及登陸注冊(cè)模塊的實(shí)現(xiàn),而且不需要PHP后臺(tái)代碼,完全在線調(diào)用接口實(shí)現(xiàn),希望后來(lái)的你能有所收獲!

步驟

步驟 涉及接口(百度云)
拍攝或者相冊(cè)選擇 并 上傳比對(duì)樣本照片到 人臉庫(kù) 人臉庫(kù)管理接口(main:人臉注冊(cè))
拍攝照片并上傳,云服務(wù)器在線比對(duì) 人臉庫(kù)照片與上傳圖片的相似度 人臉識(shí)別接口
獲取返回結(jié)果(相似度) 人臉識(shí)別接口

開(kāi)發(fā)過(guò)程

1.拍攝人臉圖片上傳至人臉庫(kù)---注冊(cè)

準(zhǔn)備工作:需要在百度云注冊(cè)(或者直接用百度云盤(pán)app掃碼登陸),并創(chuàng)建人臉識(shí)別的應(yīng)用。(完全免費(fèi))

具體如下:

百度云:https://cloud.baidu.com/

注冊(cè)完成后(或者直接掃碼登陸),進(jìn)入管理控制臺(tái)->產(chǎn)品服務(wù)->人工智能->人臉識(shí)別->創(chuàng)建應(yīng)用->填寫(xiě)必要信息->立即創(chuàng)建

至此,我們已經(jīng)創(chuàng)建好了人臉識(shí)別的應(yīng)用。接下來(lái),進(jìn)入應(yīng)用列表,找到我們才新建的應(yīng)用,查看人臉庫(kù),我們需要?jiǎng)?chuàng)建用戶組(用來(lái)集中管理小程序的用戶人臉照片)

新建組(id不要太復(fù)雜,后面還要用的。)

至此,我們已經(jīng)完成了在云上的所有必要操作。下面,我們?cè)谛〕绦蛑?,拍照上傳即可?/p>

拍照上傳

需要在pages中新建一個(gè)目錄,用來(lái)承載我們的登陸注冊(cè)模塊。就假定為 camera{camera.js camera.wxml camera.wxss camera.json}

主要文件自然是 *.wxml 和 *.js 了。

camera.wxml

<!-- camera.wxml相機(jī)大小需要從重新設(shè)置 -->
<camera
 device-position="front"
 flash="off"
 binderror="error"
 style="width: 100%; height: 400px;"
></camera>

<!-- 需要使用 button 來(lái)授權(quán)登錄 -->
<button
 wx:if="{{canIUse}}"
 open-type="getUserInfo"
 bindgetuserinfo="bindGetUserInfo"
 type="primary"
>
 授權(quán)
</button>
<view wx:else>請(qǐng)升級(jí)微信版本</view>

<!-- 拍照按鈕 -->
<button type="primary" bindtap="takePhoto"> 拍照 </button>

<button bindtap='btnreg'> 注冊(cè)須知 </button>

我所謂的授權(quán)是,我需要獲取用戶微信的昵稱(chēng)來(lái)充當(dāng)我人臉庫(kù)照片的用戶id,你可以不需要(設(shè)置成一樣的,如果是只有一個(gè)人使用的話。)

camera.js

調(diào)用wxAPI takePhoto() 拍照并獲取src -> wx.request() 訪問(wèn)百度云 用先前創(chuàng)建的應(yīng)用的API Key & Screct Key 獲取 access_token ->wx.request() 訪問(wèn)百度云 上傳 所拍照片(要經(jīng)過(guò)base64編碼)詳情可參考小程序API文檔 以及 百度云API文檔(接口以及于18年升級(jí)至v3)

// camera.js
const app = getApp()
Page({
 data: {
  canIUse: wx.canIUse('button.open-type.getUserInfo'),
  nickName : "",
  src : "",//圖片的鏈接
  token: "",
  base64: "",
  msg:""
 },

 //拍照
 takePhoto() {
  var that = this;
  //拍照
  const ctx = wx.createCameraContext()
  ctx.takePhoto({
   quality: 'high',
   success: (res) => {
    this.setData({
     src: res.tempImagePath//獲取圖片
    })

    //圖片base64編碼
    wx.getFileSystemManager().readFile({
     filePath: this.data.src, //選擇圖片返回的相對(duì)路徑
     encoding: 'base64', //編碼格式
     success: res => { //成功的回調(diào)
      this.setData({
       base64: res.data
      })
     }
    })
   }//拍照成功結(jié)束

  })//調(diào)用相機(jī)結(jié)束

   //acess_token獲取,qs:需要多次嘗試
   wx.request({
    url: 'https://aip.baidubce.com/oauth/2.0/token', //是真實(shí)的接口地址
    data: {
     grant_type: 'client_credentials',
     client_id: '**********************',//用你創(chuàng)建的應(yīng)用的API Key
     client_secret: '************************'//用你創(chuàng)建的應(yīng)用的Secret Key
    },
    header: {
     'Content-Type': 'application/json' // 默認(rèn)值
    },
    success(res) {
     that.setData({
      token: res.data.access_token//獲取到token
     })
    }
   })
   
   //上傳人臉進(jìn)行注冊(cè)-----test
   wx.request({
    url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + this.data.token,
    method: 'POST',
    data: {
     image: this.data.base64,
     image_type: 'BASE64',
     group_id: '********',//自己建的用戶組id
     user_id: this.data.nickName//這里獲取用戶昵稱(chēng)
    },
    header: {
     'Content-Type': 'application/json' // 默認(rèn)值
    },
    success(res) {
     that.setData({
      msg: res.data.error_msg
     })
     console.log(that.data.msg)
     //做成功判斷
     if (that.data.msg == 'SUCCESS') {//微信js字符串請(qǐng)使用單引號(hào)
      wx.showToast({
       title: '注冊(cè)成功',
       icon: 'success',
       duration: 2000
      })
      wx.switchTab({
       url: '../UI/ui',
      })

     }

    }
   }),
   
   //失敗嘗試
   wx.showToast({
    title: '請(qǐng)重試',
    icon: 'loading',
    duration: 500
   })
 },
 error(e) {
  console.log(e.detail)
 },

//獲取用戶信息
 bindGetUserInfo: function(e){
  this.setData({
   nickName: e.detail.userInfo.nickName
  })
  wx.showToast({
   title: '授權(quán)成功',
   icon: 'success',
   duration: 1000
  })
 },

//先授權(quán)登陸,再拍照注冊(cè)
 btnreg:function(){
  wx.showModal({
   title: '注冊(cè)須知',
   content: '先授權(quán)登陸,再拍照注冊(cè)哦!網(wǎng)絡(luò)可能故障,如果不成功,請(qǐng)?jiān)僭囈幌拢?,
  })
 }

})

這里要多試幾次,我以為可能由于網(wǎng)絡(luò)的問(wèn)題,會(huì)調(diào)用失敗, 但其實(shí)是wx.request()是并發(fā)的,所以獲取access_token和上傳請(qǐng)求會(huì)沖突(可能沒(méi)有獲取到access_token就上傳,會(huì)發(fā)生錯(cuò)誤)。

暫時(shí)的解決方案:

將上傳人臉的request放在access_token獲取請(qǐng)求的success函數(shù)中,這樣一來(lái),就可以保證獲取到access_token才進(jìn)行上傳操作。

另外,要開(kāi)啟微信小程序 IDE 的 不校驗(yàn)合法域名的選項(xiàng)(設(shè)置->項(xiàng)目設(shè)置 -> 勾選 不校驗(yàn)......)

至此,注冊(cè) 就完成了(即獲取用戶昵稱(chēng)、拍照、上傳人臉庫(kù)注冊(cè)。)

2.拍照上傳在線人臉識(shí)別---登陸

找到指定用戶組中與上傳照片最相似的人臉并返回,比對(duì)結(jié)果。

我們?nèi)匀恍枰俳⒁粋€(gè)頁(yè)面來(lái)承載我們的登陸相關(guān)操作。就假定為 camera2{camera2.js camera2.wxml camera2.wxss camera2.json}

camera2.wxml

<!-- camera.wxml -->
<camera
 device-position="front"
 flash="off"
 binderror="error"
 style="width: 100%; height: 300px;"
></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>預(yù)覽</view>
<image mode="widthFix" src="{{src}}"></image>

camera2.js 與注冊(cè)大同小異,區(qū)別是圖片上傳的接口不同(這次是 https://aip.baidubce.com/rest/2.0/face/v3/search 人臉?biāo)阉兀?,獲取access_token、拍照、照片base64編碼都相同。

// camera.js
Page({
 data: {
  base64: "",
  token: "",
  msg: null
 },
 //拍照并編碼
 takePhoto() {
  //拍照
  const ctx = wx.createCameraContext()
  ctx.takePhoto({
   quality: 'high',
   success: (res) => {
    this.setData({
     src: res.tempImagePath
    })
   }
  })

  var that = this;
  //圖片base64編碼
  wx.getFileSystemManager().readFile({
   filePath: this.data.src, //選擇圖片返回的相對(duì)路徑
   encoding: 'base64', //編碼格式
   success: res => { //成功的回調(diào)
    that.setData({
     base64: res.data
    })
   }
  })

  //acess_token獲取
  wx.request({
   url: 'https://aip.baidubce.com/oauth/2.0/token', //真實(shí)的接口地址
   data: {
    grant_type: 'client_credentials',
    client_id: '**************************',
    client_secret: '*******************************'//用自己的
   },
   header: {
    'Content-Type': 'application/json' // 默認(rèn)值
   },
   success(res) {
    that.setData({
     token: res.data.access_token//獲取到token
    })
   }
  })

  //上傳人臉進(jìn)行 比對(duì)
  wx.request({
   url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + that.data.token,
   method: 'POST',
   data: {
    image: this.data.base64,
    image_type: 'BASE64',
    group_id_list: '********'//自己建的用戶組id
   },
   header: {
    'Content-Type': 'application/json' // 默認(rèn)值
   },
   success(res) {
    that.setData({
     msg: res.data.result.user_list[0].score
    })
    if(that.data.msg > 80){
     wx.showToast({
      title: '驗(yàn)證通過(guò)',
      icon: 'success',
      duration: 1000
     })
     //驗(yàn)證通過(guò),跳轉(zhuǎn)至UI頁(yè)面
     wx.switchTab({
      url: '../UI/ui',
     })
    }
   }
  });

  wx.showToast({
   title: '請(qǐng)重試',
   icon: 'loading',
   duration: 500
  })
 },
 error(e) {
  console.log(e.detail)
 }
})

至此,我們的登陸也搞定了。

注意:上述的 登陸注冊(cè) 是一個(gè)某個(gè)小程序的一個(gè)模塊。關(guān)系如下

所以,需要在index頁(yè)面中設(shè)置按鈕,來(lái)跳轉(zhuǎn)到注冊(cè)以及登陸頁(yè)面,然后注冊(cè)登陸成功后,再跳轉(zhuǎn)至其他功能頁(yè)面。

后記

這次小程序?qū)崙?zhàn),對(duì)我自己也是一個(gè)不小的挑戰(zhàn),對(duì)比各個(gè)云接口、看接口文檔、查資料,耗費(fèi)了大概十來(lái)天。但是,我相信大有裨益。另外,對(duì)我參考的博客和回答的諸位表示感謝。我們一起前進(jìn)!

參考資料

【1】微信小程序開(kāi)發(fā)文檔

【2】百度云接口文檔.v3版

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論