小程序开发之百度人脸检测

首先要去百度智能云对人脸检测进行搜索（百度智能云-智能时代基础设施 (baidu.com)），进入产品价格。

 然后再进行免费领取。（仅仅是测试的话，很少人会超过1千次的）

然后获取你的url参数：https://aip.baidubce.com/rest/2.0/face/v3/detect?+access_token

access_token的参数要根据百度文档人脸检测 - 人脸识别_人脸检测_人脸对比_人脸搜索_活体检测_百度智能云 (baidu.com)进行获取，后面找机会进行详细解释。

表格的顺序大致如下：

test.js

// pages/test/test.js
Page({


  /**
   * 页面的初始数据
   */
  data: {
    src: '/images/snow.jpg',
    comment: '',
    age: '??',
    beauty: '??',
    gender: '??',
    expression: '??'
  },


  /**
   * 自定义函数--根据分值和性别生成对应的语句
   */
  makeComment: function (score) {
    let msg = ''

    if (score > 80) {
      msg = '人脸评分击败80%的用户！'
    } else if (score > 60) {
      msg = '人脸评分击败60%的用户！'
    } else if (score > 40) {
      msg = '人脸评分击败40%的用户！'
    } else {
      msg = '人脸评分击败10%的用户！'
    }


    this.setData({
      comment: msg
    })

  },

  /**
   * 自定义函数--AI技术人脸检测
   */
  faceDetect: function () {
    // 选照片
    wx.chooseImage({
      success: res => {
        // 出现加载框
        wx.showLoading({
          title: '分析中，请稍后',
        })
        console.log('选择图片', res)
        // 获取图片地址
        let img = res.tempFilePaths[0]

        // 更新页面上的图片
        this.setData({
          src: img
        })


        // 图片转为BASE64格式
        img = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64")
        console.log('base64编码图片', img)
        // 网络请求获取百度AI支持
        wx.request({
          url:'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=XXXXX', // XXXX需要修改为你自己在百度文档申请的access_token
          method: 'POST',
          
          data: {
            image: img,
            image_type: 'BASE64',
            face_field: 'age,beauty,gender,expression'
          },
          Header:{'Content-Type':'application/json; charset=UTF-8'},
          success: res => {
            console.log('request返回检测到的数据',res)
          

            // 如果未检测到人脸
            if (res.data.error_code == '222202') {
              // console.log('未检测到人脸')
              this.setData({
                age: '??',
                beauty: '??',
                gender: '??',
                expression: '??',
                comment: '未检测到人脸'
              })
            }
            // 检测到了人脸
            else {
              let people = res.data.result.face_list[0]
              let s = ''
              if (people.expression.type == 'none') {
                s = '没笑'
              }
              if (people.expression.type == 'smile') {
                s = '微笑'
              }
              if (people.expression.type == 'laugh') {
                s = '大笑'
              }
              // 更新人物属性信息
              this.setData({
                age: people.age,
                beauty: people.beauty,
                gender: people.gender.type == 'female' ? '女' : '男',
                expression: s
              })
              // 更新评语
              this.makeComment(people.beauty)
            }
          },
          fail: err => {
            console.log(err)
          },
          complete: res => {
            // 隐藏加载框
            wx.hideLoading()
          }
        })


      }
    })

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.faceDetect()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '我发现了一个好玩的应用',
      url: '/pages/index/index'
    }
  }
})

 test.json

{
  "usingComponents": {}
}

test.wxml

<!--pages/test/test.wxml-->
<!-- 整体容器 -->
<view class="container">
  <!-- 1. 头像图片 -->
  <image src="{{src}}" mode="aspectFit"></image>

  <!-- 2. 人物属性 -->
  <view class="result">
    <view>性别：<text class="aa">{{gender}}</text></view>
    <view>年龄：<text class="aa">{{age}}</text></view>
    <view>颜值：<text class="aa">{{beauty}}</text></view>
    <view>表情：<text class="aa">{{expression}}</text></view>
  </view>

  <!-- 3. 评价语句 -->
  <text class="comment">{{comment}}</text>

  <!-- 4. 上传按钮 -->
  <view class="btnBox">
    <button bindtap="faceDetect">再测一次</button>
    <button open-type="share">分享给好友</button>
  </view>
</view>

 test.wxss

/* pages/test/test.wxss */
/* 评论语句样式 */
.comment{
  color: #5d6ae2;
  font-size: 50rpx;
}

/* 按钮区域 */
.btnBox{
  display: flex;
  flex-direction: row;
}

button{
  margin: 0 20rpx;
}