基于百度AI接口的微信小程序-人脸搜索

• 本文主要介绍基于百度云人脸识别接口实现微信小程序人脸搜索
• 开发前的准备：
• 参考文档：
  1. https://developers.weixin.qq.com/miniprogram/dev/api/
  2. https://ai.baidu.com/ai-doc/FACE/Gk37c1uzc
• 在写小程序端的代码前，还需要去百度ai平台创建相关应用实例，不清楚的读者可以参考我之前的微信小程序实现图像搜索的文章，当然，建议直接看官方文档，官方文档写得很详细。
• 代码：
  1、Wxml：

      <view class="container">
        <!-- 相机组件 -->
        <camera
          class="camera"
          device-position="front"
          flash="off"
          binderror="error"
        ></camera>
      
        <view class="button_container">
          <!-- 按钮组件，点击上传人脸库 -->
          <button class="button"
                  bindtap="takePhoto">上传人脸库 </button>
          <!-- 按钮组件，进行人脸识别 -->
          <button class="button"
                  bindtap="check">人脸库识别 </button>
        </view>
      </view>

2、Wxss:

    page {
      background: white;
    }
    
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .button_container {
      margin-top: 600rpx;
      display: flex;
      flex-direction: column;
    }
    
    .camera {
      width: 300rpx;
      height: 300rpx;
      border-radius: 50%;
      position: fixed;
      top: 100rpx;
    }
    
    .button {
      margin-top: 20rpx;
      width: 100rpx;
      height: 60rpx;
      background: forestgreen;
      color: white;
    }

3、Javascript:

    // camera.js
    Page({
      data: {
        src: "",
        token: "",
        base64: "",
        msg: "",
      },
      //上传至人脸库
      upload(){
        this.takePhoto();
        this.faceUpload();
      },
      //进行人脸识别
      check(){
        this.takePhoto();
        this.faceRecognition();
      },
    
    //拍照
      takePhoto() {
        var that = this;
        //创建拍照上下文对象
        const ctx = wx.createCameraContext()
        ctx.takePhoto({
          quality: 'high',
          //拍照成功
          success: (res) => {
            console.log(res)
            wx.getFileSystemManager().readFile({
              filePath: res.tempImagePath,
              encoding: 'base64',
              success: res => {
                console.log(res)
                this.setData({
                  base64: res.data
                })
              },
               //拍照失败
              fail: err => {
                console.log(err)
                this.showToast("调用失败,请稍后重试");
              }
            })
          },
          fail: err => {
            this.showToast("调用失败,请稍后重试");
          }
        })
      },
    //人脸上传
      faceUpload(group_id, user_id) {
        //调用接口，获取token
        wx.request({
          url: 'https://aip.baidubce.com/oauth/2.0/token', //百度智能云相关的接口地址
          data: {
            grant_type: 'client_credentials',
            client_id: 'xxxxxxxxxxxxxxxx',//用你创建的应用的API Key
            client_secret: 'xxxxxxxxxxxxxxxx'//用你创建的应用的Secret Key
          },
          header: {
            'Content-Type': 'application/json' // 默认值
          },
          //获取到之后，请求接口，向人脸库添加照片
          success: res => {
            console.log(res)
            wx.request({
              url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + res.data.access_token,
              method: 'POST',
              data: {
                image: this.data.base64,
                image_type: 'BASE64',
                group_id:'xxx',//用户组的id
                user_id:"xxxx"//给用户指定的id
              },
              header: {
                'Content-Type': 'application/json'
              },
              success: res => {
                // console.log(res)
                if (res.data.error_msg == 'SUCCESS') {
                  wx.hideLoading();
                  this.showToast("上传成功");
                } else {
                  this.showToast("上传失败，请稍后重试");
                }
              },
              fail(err) {
                this.showToast("上传失败，请稍后重试");
              }
            })
          },
          fail(err) {
            // console.log(err)
            this.showToast("上传失败，请稍后重试");
          }
        })
      },
    
      //人脸识别
      faceRecognition( group_id_list) {
        var that = this;
        wx.showLoading({
          title: '识别中',
        })
        //获取token
        wx.request({
          url: 'https://aip.baidubce.com/oauth/2.0/token', //真实的接口地址
          data: {
            grant_type: 'client_credentials',
            client_id: 'xxxxxxxxxxxxxx',
            client_secret: 'xxxxxxxxxxxxxxxx'
          },
          header: {
            'Content-Type': 'application/json'
          },
          //有了token之后，进行人脸识别
          success: res => {
            wx.request({
              url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + res.data.access_token,
              method: 'POST',
              data: {
                image: that.data.base64,
                image_type: 'BASE64',
                group_id_list: 'xxxx'//你创建的应用的用户组id
              },
              header: {
                'Content-Type': 'application/json'
              },
              success: res => {
                wx.hideLoading();
                console.log(res)
                that.setData({
                  msg: parseInt(res.data.result.user_list[0].score)
                })
                if (that.data.msg > 80) {
                  let title = "识别通过,匹配率:" + this.data.msg + "%";
                  this.showToast(title)
                } else {
                  let title = "识别未通过,匹配率:" + this.data.msg + "%";
                  this.showToast(title)
                }
              },
              fail: err => {
                wx.hideLoading();
                this.showToast("调用失败,请稍后重试")
              }
            });
          }
        })
      },
    //封装的wx.showToast
      showToast(title) {
        wx.showToast({
          title: title,
          icon: 'none',
          duration: 3000
        })
      }
    })

请求中body中相关的参数这里就不一一说明了，详情请阅读官方文档。
本文只介绍了简单的人脸搜索实现方法，由于功力有限，还望多多指教。