實現一個傳統的CS結構人臉識別小程式服務

2020 年 4 月 10 日
筆記

一、實現方式：前端調用相機組件實現人臉在線採集，然後將人臉圖片傳到自建的服務端調用人臉識別-人臉檢測與分析API將識別結果回調到小程式頁面中

二、演示Demo

camera.wxml

<!-- camera.wxml -->  <camera device-position="front" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>  <button type="primary" bindtap="takePhoto">拍照</button>  <view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Gender'] > 50}}">性別：男</view>  <view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Gender'] < 50}}">性別：女</view>  <view>年齡：{{ FaceInfos['0']['FaceAttributesInfo']['Age'] }}</view>  <view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Expression'] == 0 }}">表情：正常</view>  <view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Expression'] < 50 }}">表情：微笑</view>  <view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Expression'] > 50 }}">表情: 大笑</view>  <view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Beauty'] == 0 }}">魅力值：一般</view>  <view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Beauty'] < 50 }}">魅力值：有點迷人</view>  <view wx:if="{{ FaceInfos['0']['FaceAttributesInfo']['Beauty'] > 50 }}">魅力值：偶像級</view>  <view>請求的圖片寬度：{{ ImageWidth }}</view>  <view>請求的圖片高度：{{ ImageHeight }}</view>  <view>人臉框左上角橫坐標：{{ FaceInfos['0']['X'] }}</view>  <view>人臉框左上角縱坐標：{{ FaceInfos['0']['Y'] }}</view>  <view>人臉框寬度:{{ FaceInfos['0']['Width'] }}</view>  <view>人臉框高度：{{ FaceInfos['0']['Height'] }}</view>  <image mode="widthFix" src="{{src}}"></image>

使用的組件：

使用的視圖容器：

使用的XML語法：

使用的視圖層：

camera.wxss

.photo {    display: flex;   margin-top: 10px;   height: 100px;  }    .ph {    border: 1px    dashed #909090;    margin-right: 30px;    width: 80px;    height: 60px;  }  .phzz {    border: 1px    dashed #909090;    margin-right: 70px;    margin-left: 70px;    width: 100px;    height: 60px;  }  .phright{      border: 1px dashed #909090;    margin-left: 20px;     width: 80px;    height: 60px;  }  .textp{    margin-left: 70px;    font-size: 14px;  }  .text{     margin-left: 25px;    font-size: 14px;  }  .text2{     margin-left: 80px;    font-size: 14px;  }  .text3{     margin-left: 98px;    font-size: 14px;  }

WXSS樣式學習

camera.json

{    "navigationBarTitleText": "人臉識別在線測試",    "backgroundColor": "#eeeeee"  }

全局配置

camera.js

// camera.js  Page({    takePhoto() {      var that=this;      const ctx = wx.createCameraContext()      ctx.takePhoto({        quality: 'high',        success: (res) => {          this.setData({            src: res.tempImagePath          })          wx.request({            url: 'https://wx.cdhwdl.com/examples/iai/2018-03-01/DetectFace.php', //僅為示例，並非真實的介面地址            method:'post',            data: {              x: "data:image/jpg;base64," + wx.getFileSystemManager().readFileSync(res.tempImagePath, 'base64')            },            header: {              'content-type': 'application/json' // 默認值            },            success (res) {              that.setData({                ImageWidth: res.data.ImageWidth+"px",                ImageHeight: res.data.ImageHeight+"px",                FaceInfos: res.data.FaceInfos,              })              console.log(res.data)              }          })        }      })    },    error(e) {      console.log(e.detail)      that.setData({        zhang: "hello"      })    }  })

使用到的知識點： Page 構造器

創建 camera 上下文 CameraContext 對象

HTTPS 網路請求

setData