小程序实现人脸识别与小程序发布

前言

  人脸识别其实没那么复杂，我国几个大厂都有他们的AI开放平台，调用一下他们的人脸检测接口就行了😁（虽然接口不是自己写的🤣🤣），这期就分享：使用百度AI开放平台的人脸检测接口，在小程序中实现人脸识别。

主要实现功能

这个小程序主要实现了以下三个功能：

• 拍照检测人脸
• 前后摄像头切换拍照
• 选择相册图片检测人脸

效果演示

PC端

  电脑只有前置摄像头，经过博主慎重考虑：为了不暴露自己不超50分的颜值，我把摄像头遮住了😂这里只演示选择图片检测人脸的功能，想查看其他功能的小伙伴可拿到自己电脑上运行尝试啊。

手机端

  别想多，相册里的图片是为了演示，临时去QQ看点找的😏😏

调用百度Ai人脸检测接口

百度AI开放平台官网：https://ai.baidu.com/ 点击控制台，需要有一个自己的账号登录

进入自己的控制台后点击左侧的人脸识别

要调用这个接口必须要先创建一个应用（免费的）：



创建完毕

---

点进刚刚创建的应用，点击查看文档

---

点击API文档，要调用哪一个就选择对应的API文档，我们这里要使用的是人脸检测

---

如下，打开文档后，往下翻查看这个接口的调用方法和示例

---

根据官方API文档，要调用人脸检测接口主要分以下三步：

• 获取Access Token（即 身份认证，使用上面创建应用时生成的API Key 和 Secret Key来获取Access Token）
• 组织需要的参数
• 发起请求，把参数发送到人脸检测API接口
  

获取Token：把请求地址中的client_id和client_secret改成自己创建应用时得到的两个Key的值

getFaceInfo(){
    // 1. 获取token
    wx.request({
      method:'POST',
      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=pDjn7G50rYxD6sNQVqYZ&client_secret=7ksZCDNLN99vaFEuIrPUV6zV',
      success:(res)=>{
        console.log(res)
        // 为 token 赋值
        this.setData({
          token:res.data.access_token
        },()=>{
          // 2.处理需要的参数
          this.processParams()
        })
      }
    })
  },

处理需要的参数

 // 2.处理需要的参数
  processParams(){
    const params={
      // 图片
      image:'',
      // 发送到服务器的图片格式，是 BASE64 格式的
      image_type:'BASE64',
      // 希望检测完毕后，服务器返回那些数据
      face_field:'age,gender,beauty,expression,glasses,emotion'
    }
    // 根据图片路径，把图片转为 BASE64 格式，然后，赋值给 params.image
    const fileManager = wx.getFileSystemManager()
    fileManager.readFile({
      // 要读取哪个文件
      filePath:this.data.src,
      // 以什么格式来读取指定的文件
      encoding:'base64',
      success:(res)=>{
        console.log(res)
        params.image=res.data
        console.log(params)

        // 3. 发请求，获取检测结果数据
        this.testFace(params)
      }
    })
  },

发起请求，获取人脸检测结果数据

// 3. 发请求，获取检测结果数据
  testFace(params){
    wx.showLoading({
      title: '人脸检测中...',
    })
    wx.request({
      // 请求类型
      method:'POST',
      // 请求的地址
      url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token='+this.data.token,
      // 请求头
      header:{
        'Content-Type':'application/json'
      },
      // 请求体
      data:params,
      // 成功的回调函数
      success:(res)=>{
        console.log(res)
        if (res.errMsg === 'request:ok' && res.data.result !== null && res.data.result.face_num !== 0){
          console.log('人脸数据是：')
          console.log(res.data.result.face_list[0])
          this.setData({
            faceinfo: res.data.result.face_list[0]
          })
        }
      },
      // 完成后隐藏 Loading 提示
      complete:()=>{
        wx.hideLoading()
      }
    })
  },

小程序发布流程

  在本地编写好小程序后，想让别人也能使用你的小程序，就要将小程序发布上线。前提是：你开发的小程序是使用你的AppID创建。

点击上传

填一下项目信息，点击上传

  小程序上传后，登陆微信公众平台（官网：https://mp.weixin.qq.com/）进入小程序的管理后台，若要正式上线就点击提交审核，大概5天左右审核通过了，你的小程序就正式上线了

---

项目源码

  需要这个小程序项目源码的小伙伴，可以在我的公众号 遇见0和1 回复 人脸识别小程序 免费获取，我的公众号也会更新这方面的文章，欢迎小伙伴入坑一起成长喔😁😁

编程之外

愚人节快乐！虽然最近有些糟心事，但每次写文章，给自己进知识的时候我觉得也没那么糟糕了

每日毒鸡汤：
  毕竟，经历过人生的起伏，我们才慢慢看清了自己，看清了脚下的路。才知道了对自己来说什么最珍贵，也更加明白了如何去珍惜。
  也许，对十年前的自己来说，一切又都是值得的。因为，现在的自己，其实已经比过去，看得更远更辽阔。而下一个十年，也还会这样，继续生猛地走下去吧。

编程之外