Mini program calls Baidu Cloud interface to implement face recognition

小program development tutorialThe column introduces different methods of implementing face recognition

Related free learning recommendations:小program development tutorial

1 Prepare Baidu Cloud developer account

1. Log in
2. Enter the console
3. Artificial Intelligence------Image Recognition
4. Create an application

Get the parameters required for the interface

View the official website API documentation

Two page layout

File ai.wxml:

<view class="c1">
    <view class="c1-1">
       
    </view>
    <button type="primary" size="mini" bindtap="chooseImage">选择图片</button>

    <view class="c1-2">
      <image src="{{img}}" mode="widthFix"></image>
   
       <text>颜值：{{face.beauty}}</text>
       <text>年龄：{{face.age}}</text>
       <text>性别：{{face.gender.type}}</text>
       <text>情绪：{{face.emotion.type}}</text>
    </view>
</view>

Write the style file ai.wxss

.c1{
  padding: 50rpx;

}
.c1-1{
  height: 800rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: center;
  font-size: 30rpx;
  box-shadow: 0px 0px 10px gray;
}
.c1-2{

}

The page layout is as follows:

##ai. js

//获取app.js对象
var app = getApp();

Page({
  data: {
	face: {},//检测结果
	img: '',  //选择的图片
	showResult: false //检测是由有结果
  },
  onLoad: function (options) {
	//console.log('获取全局变量数据：' + app.globalData.access_token);
  },
  //选择图片事件
  chooseImage(){
	  var that = this;
	  wx.chooseImage({
	    count: 1,
	    sizeType: ['original', 'compressed'],
	    sourceType: ['album', 'camera'],
	    success (res) {
	      const tempPath = res.tempFilePaths[0];//获取选择的图片的地址
		  //准备好了access_token和图片后，就可以开始请求百度的人脸检测接口了https://aip.baidubce.com/rest/2.0/face/v3/detect
		  //该接口需要的参数是access_token，图片的base64值
		  //图片的base64值的处理
		  var base64 = wx.getFileSystemManager().readFileSync(tempPath,'base64');
		  //提示
		  wx.showLoading({
			  title: '人脸检测中...',
			  mask: true
		  });
		  //开始请求百度的人脸检测接口
		  wx.request({
		    url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token='+app.globalData.access_token,
      
		    data: {
		    image: base64,
			  image_type: 'BASE64',
			 face_field: 'age,beauty,expression,face_shape,gender,glasses,race,emotion'
		    face_field: 'name, kind'
        },
			method: 'POST',
		    header: {'content-type': 'application/json'},
		    //header: {'content-type': 'application/x-www-form-urlencoded'},
        success (res) {
				console.log(res);
				if(res.statusCode == 200 && res.data.error_code == 0){ //检测结果正确
					//将选择的图片回显到页面
					//that.setData({img: tempPath});
          that.setData();
          //植物识别要传入键值对
					//取出检测的结果进行页面显示
					var face = res.data.result.face_list[0];
          console.log(face);
					that.setData({face: face,showResult: true});
					//隐藏加载窗口
					wx.hideLoading();
				}else{
					wx.showToast({
						title: '检测失败'+res.data.error_msg,
						duration: 5000
					});
				}
		    }
		  })
	    }
	  })
  },
  
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

app.js

//app.js
App({
  onLaunch: function () {
    var access_token = wx.getStorageSync('access_token');
    var expire_in = wx.getStorageSync('expire_in');
   // var access_token = parse;
    var access_token_date = parseInt(wx.getStorageSync('access_token_date'));
    var now = new Date().getTime();
    if(!access_token){
      this.requestToken();

    } else if(now > access_token_date + expire_in){
      this.requestToken();
    }else{

    }
  

    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
    
  },
  globalData: {
    userInfo: null
  },

  requestToken() {
    var that = this;
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token',
      data: {
        grant_type: 'client_credentials',
        // aaa那里填写自己的百度key值
        client_id: 'aaa',
        client_secret: 'aaa'

      },
      //header: {'content-type': 'application/json'},
      header: {'content-type': 'application/x-www-form-urlencoded'},
      success (res) {
        if(res.statusCode == 200){
          wx.setStorageSync("access_token", res.data.access_token);
          wx.setStorageSync("expires_in", res.data.expires_in);
          //wx.setStorageSync("access_token_date", res.data.access_token_date);
          wx.setStorageSync("access_token_date", new Date().getTime());
          that.globalData.access_token = res.data.access_token;
        }
      }
    })
  }
})

The recognition results are as follows:

The above is the detailed content of Mini program calls Baidu Cloud interface to implement face recognition. For more information, please follow other related articles on the PHP Chinese website!