实现一个传统的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