微信小程序通过百度智能云实现人脸检测

可通过微信小程序【在线颜值检测】功能，查看最终效果。

 

 1、注册登录百度智能云

百度智能云-登录 链接

1.1 注册登录登录之后，进入人脸识别页面。 

2、创建应用，获取key

2.1 打开【公有云服务】-【应用列表】-【点击创建应用】 

2.2 填写好【应用名称】和【应用描述】，选择好【应用归属】，点击创建

2.3 回到【应用列表】界面，记录对应的api Key和Secret Key，后续获取token要用到。

2.4 注册完成之后可在概览页面领取调用次数，需要完成个人或企业认证

---

 3、微信小程序实现

wxml代码

<view class="container">
  <view class="btn">
    <button type="primary" bindtap="selectPhoto">选择照片</button>
  </view>
  <view class="content">
    <view class="item">
      <text>人物年龄：</text>
      <text>{{ age }}</text>
    </view>
    <view class="item">
      <text>颜值评分：</text>
      <text>{{ beauty }}</text>
    </view>
    <view class="item">
      <text>人物性别：</text>
      <text>{{ gender }}</text>
    </view>
    <view class="item">
      <text>人物种族：</text>
      <text>{{ race }}</text>
    </view>
    <view class="item">
      <text>人物表情：</text>
      <text>{{ expression }}</text>
    </view>
  </view>
  <view class="img">
    <image style="height: {{ imgHeight }}rpx;width: {{ imgWidth }}rpx;" src="{{ imgPath }}"></image>
  </view>
</view>

 wxss代码

.container{
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.container .img{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.container .img image{
  border-radius: 20rpx;
  box-shadow: 0px 0px 20px rgb(255, 255, 255);
}

.container .content{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}
.container .content .item{
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  background: rgb(255, 255, 255, 0.5);
  margin-bottom: 10rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  border-radius: 20rpx;
  height: 65rpx;
}
.container .btn{
  padding-top: 20rpx;
  margin-bottom: 30rpx;
}

 js代码，各种请求有点多。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgWidth:"",
    imgHeight:"",
    imgPath:"",
    age:"无",
    beauty:"无",
    gender:"无",
    race:"无",
    expression:"无"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  selectPhoto:function(){
    const that = this
    // 选择本地图片
    wx.chooseMedia({
      count: 1, // 最多选择几张
      mediaType: ['image'],
      sourceType: ['album'],
      success(res){
        // 获取图片路径
        var img = res.tempFiles[0]['tempFilePath']
        // 获取图片信息
        wx.getImageInfo({
          src: img,
          success(res){
            that.setData({
              imgPath: img,
              imgWidth:res.width,
              imgHeight:res.height,
            })
            // 将图片 base64 编码
            let b64 = wx.getFileSystemManager().readFileSync(img, 'base64')
            // 百度智能云，创建应用的 API Key
            let appKey = "xxxxx"
            // 百度智能云，创建应用的 Secret Key
            let secretKey = "xxxxx"
            // 获取token链接
            let tokenUrl = 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id='+appKey+'&client_secret='+secretKey

            // 获取token
            wx.request({
              url: tokenUrl,
              method: 'GET',
              header: {"Content-Type": "application/json; charset=UTF-8"},
              success(res){
                // 请求接口
                wx.request({
                  // 照片检测的 api url
                  url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect'+'?access_token='+res.data['access_token'],
                  method: 'POST',
                  header: {"Content-Type": "application/json"},
                  // 传入的参数，请求以json格式返回
                  data: {
                    "image": b64,
                    "image_type": "BASE64",
                    "face_field": "gender,age,beauty,gender,race,expression",
                    "face_type": "LIVE"
                  },
                  success(res){
                    if (res.data.error_code == 0){
                      let resultData = res.data.result.face_list[0]
                      let age = resultData['age']
                      let beauty = resultData['beauty']
                      let gender = resultData['gender']['type']
                      let race = resultData['race']['type']
                      let expression = resultData['expression']['type']
                      if (gender == 'female'){
                        gender = '女'
                      }else if(gender == 'male'){
                        gender = '男'
                      }
                      if (race == 'white'){
                        race = '白色人种'
                      }else if(race == 'yellow'){
                        race = '黄色人种'
                      }else if(race == 'black'){
                        race = '黑色人种'
                      }else if (race == 'brown'){
                        race = '棕色人种'
                      }
                      if(expression == 'none'){
                        expression = '无表情'
                      }else if(expression == 'smile'){
                        expression = '微笑'
                      }else if(expression == 'laugh'){
                        expression = '大笑'
                      }
                      that.setData({
                        age:age,
                        beauty:beauty,
                        gender:gender,
                        race:race,
                        expression:expression
                      })
                    }else{
                      that.setData({
                        age:"无",
                        beauty:"无",
                        gender:"无",
                        race:"无",
                        expression:"无",
                      })
                    }
                  }
                })
              }
            })
          }
        })
      }
    })
  }
})

详细的接口请求及返回内容可参考百度官方的【人脸检测】API文档

https://ai.baidu.com/ai-doc/FACE/yk37c1u4t