《微信小程序案例12》图片识别功能

一、实现效果

 二、查看百度AI开发平台文档

该功能是直接使用百度AI开发平台的动物识别接口，这个接口有两个重要的参数，一是需要获取access_token、二是需要把上传的图片编码为base64。而获取access_token有需要使用另一个接口来获取，获取到后我使用缓存技术把这个acces_token保存起来，并设置一个有效时间。

 1、百度AI开发平台上的准备工作

 

 

 新用户是可以直接领取一年的免费试用时间的。

 2、查看接口如何使用

 access_token是必须参数，使用所提供的接口获取access_token

 识别的图片的编码必须是base64：

三、微信小程序代码实现

wxml

<view class="fa">
  <view class="top">
    <image src="{{imgSrc}}"></image>
  </view>
  <view class="middle">
    <view class="photograph" data-flag="0" bindtap="getImage">拍照识动物</view>
    <view class="photos" data-flag="1" bindtap="getImage">相册选择</view>
  </view>
  <view class="animal">
  {{animal.name}}
  </view>
  <view class="bottom" class="confirm" bindtap="identify"> 
    开始识别
  </view>
</view>

js代码

// pages/picIdentif/picIdentif.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgSrc:'/img/tpsb/cat.jpg',
    imgToBaidu:'',
  },
   getImage:function(e){
    var that = this
    var flag=e.currentTarget.dataset.flag
    if(flag==0)  {var sourceType="camera"}
    else {var sourceType="album"; }
    console.log(sourceType)


    wx.chooseMedia({
      count: 1,
      mediaType: ['image','video'],
      sourceType: [sourceType],
      maxDuration: 30,
      camera: 'back',
      success(res) {
        // console.log(res)
        console.log(res.tempFiles[0].tempFilePath)
        that.setData({
          imgSrc:res.tempFiles[0].tempFilePath
        })
        // wx.getFileSystemManager().readFile为图片编码，调用百度接口也是传这个编码后的数据
        wx.getFileSystemManager().readFile({
          filePath: res.tempFiles[0].tempFilePath, //要读取的文件的路径 (本地路径)
          encoding: 'base64', //编码格式
          success: res => { //成功的回调
            console.log(res)
            // console.log(res.data)
            that.setData({
              imgToBaidu:res.data
            })
            console.log("编码base64成功")
          }
          })
        
      
      }
    })
  },

  identify:function(){
    var that=this;
    wx.showLoading({
      title: '识别中...',
    })
    // 调用接口
    console.log(this.data.imgSrc)
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token='+that.data.token,
      data: {
        // 注意：图片需要base64编码、去掉编码头后再进行urlencode。
        image: this.data.imgToBaidu
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
        },
        method: 'POST',
      success (res) {
        wx.hideLoading({
          success: (res) => {},
        })
        console.log(res.data)
        // 返回了五个结果，需要根据score处理相似度最高的一个结果
        let result = res.data.result
        let length = res.data.result.length
        let max=0.00
        let obj={
          name:'',
          root:'',
          max:0.00
        }
        for(let i=0;i<length;i++){
          if(result[i].score>obj.max){
            obj.max=result[i].score
            obj.name=result[i].keyword
            obj.root=result[i].root
          } }
          console.log("++++++++++++++++识别结果："+obj)
          that.setData({
            animal:obj
          })

      }
    })
  },

  // 百度AIP开放平台使用OAuth2.0授权调用开放API，调用API时必须在URL中带上access_token参数
// 获取token
getToken:function(){
  console.log("正在创建新的access_token")
  var that=this;
  // client_id：app_key需要自己去百度智能云创建相应的应用后获取
  //client_secret：Secret Key
  const url = 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=lFsrBuHHI0WdrqauG8TbapYC&client_secret=2B6WucDBXfswoFfObmawp7Inkj88OAsD';
  wx.request({
      url:url,
      method: 'POST',
      success: res => {
        console.log("创建access_token成功")
          console.log(res)
          let thaRres=res.data;
          // 将access_token存储到storage中
          wx.setStorage({
            key:'access_token',
            data:thaRres.access_token
          });
          var date=new Date().getTime();
          let time=date+2592000*1000;
          console.log('三十天后的时间',time);
          console.log('当前时间戳',date)
          wx.setStorage({
            key:'expires_in',
            data:time
          });
          that.setData({token:thaRres.access_token});
              /*
              access_token： 要获取的Access Token；
              expires_in： Access Token的有效期(秒为单位，一般为1个月)；
              */
          },
  });
},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //   自定义头部导航栏文字
    wx.setNavigationBarTitle({
      title: '动物搜索'
    });
    //获取storge中的token
    var that=this;
    wx.getStorage({
    key:'expires_in',
    success(res){
      console.log("缓存中有access_token")
      console.log(res)
      console.log(res.data)
      // 获取成功，证明本地已存有相关token
      const newT =new Date().getTime();
      //  // 用当前时间和存储的时间判断，token是否已过期
      if (newT > parseInt(res.data)) {
        console.log("token过期，重新获取token")
          // token过期，重新获取token
          that.getToken();
      } else {
        console.log("获取本地缓存的token")
          // 获取本地缓存的token
          let token=wx.getStorageSync('access_token');
          console.log("access_token为:"+token)
          that.setData({token:token});
          console.log("获取本地缓存的token结束")
      }
    },fail(){
      console.log("缓存中没有access_token")
      that.getToken();
    }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})