小程序调用百度云接口实现人脸识别

落日映苍穹つ 2023-02-11 10:22 5阅读 0赞

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

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

![20200523095231984.png][]

获取接口需要的参数

![20200523095311945.png][]

查看官网API文档

![20200523095344489.png][]

二 页面布局

![2020052309541118.png][]

![20200530225839664.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{
    
    }

页面布局如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70][]

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

识别结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 1][]

[20200523095231984.png]: https://img-blog.csdnimg.cn/20200523095231984.png
[20200523095311945.png]: https://img-blog.csdnimg.cn/20200523095311945.png
[20200523095344489.png]: https://img-blog.csdnimg.cn/20200523095344489.png
[2020052309541118.png]: https://img-blog.csdnimg.cn/2020052309541118.png
[20200530225839664.png]: https://img-blog.csdnimg.cn/20200530225839664.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200530225606686.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200530230156765.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA==,size_16,color_FFFFFF,t_70