### [小程序调用百度云接口实现人脸识别](https://www.prosaas.cn/article/16496)

**Published:** 2020-12-14T09:32:50

**Author:** 5201314

**Excerpt:** 小程序开发教程栏目介绍不一样的实现人脸识别方法相关免费学习推荐：小程序开发教程一 准备好百度云的开发者账号登录…

## 小程序开发教程栏目介绍不一样的实现人脸识别方法

![](https://img.php.cn/upload/article/000/000/052/5fd730fb6392d672.jpg)

> 相关免费学习推荐：小程序开发教程

一  准备好百度云的开发者账号

1.  登录
2.  进入控制台
3.  人工智能------图像识别
4.  创建应用       

          ![](https://img.php.cn/upload/article/000/000/052/9dec0f148ad0b8e4273727a52ae4e37d-0.png) 

获取接口需要的参数

![](https://img.php.cn/upload/article/000/000/052/ee4fe44c696d3238bbc3de79acdd3438-1.png)

查看官网API文档

![](https://img.php.cn/upload/article/000/000/052/ee4fe44c696d3238bbc3de79acdd3438-2.png)

二 页面布局

![](https://img.php.cn/upload/article/000/000/052/9a39694d3cd963eacf4e8cd8425717a4-3.png)

![](https://img.php.cn/upload/article/000/000/052/9a39694d3cd963eacf4e8cd8425717a4-4.png)

文件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>

编写样式文件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{

}

页面布局如下： 

![](https://img.php.cn/upload/article/000/000/052/9a39694d3cd963eacf4e8cd8425717a4-5.png)

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;
        }
      }
    })
  }
})

识别结果如下：

![](https://img.php.cn/upload/article/000/000/052/9a39694d3cd963eacf4e8cd8425717a4-6.png)

以上就是小程序调用百度云接口实现人脸识别的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** JS, 人工智能, 接口

**Categories:** 后端开发

---