Small program + image recognition

Recently in the process of the development of small programs, product and said I need to do a function of image recognition, which give a picture to identify what it is, I began to think a bit difficult because it is directly let me do a deep learning, then get to the Internet for see baidu cloud platform (cloud.baidu.com/) it inside a image recognition,…

Let’s start with image recognition

Click “Use now”, scan the code and log in, and you will enter the console page (if you have no authentication, you will be asked to authenticate first).

Then click Create App and select the interface you want

Once created, click to view application details

You can see a page like this

Now that the application has been created, we need to go to the documentation to see how to use it, click on the technical documentation below, ok

My business needs to use general object recognition, so let’s go to general object recognition and look at the picture below, and you can see that if we want to use this interface we need to get access_token and image(image or URL)

Next we click on “Access Token acquisition” in the previous image to see how to obtain the Token as shown below. You can see that it lets us send a request to this URL. Client_id and client_secret are the API keys and Secret keys after the application is created

In the small program we can get its token in this way

WXML:

<button bindtap="get_access_token"> </button>Copy the code

js:

const grant_type='client_credentials'
const client_id='Your API Key'
const client_secret='Your Secret Key'
Page({
  data: {imageUrl:null.token:null.base64:null,},/ / get access_token
  get_access_token:function(res){
    var that = this
    wx.request({
      url:'https://aip.baidubce.com/oauth/2.0/token?grant_type=' + grant_type + '&client_id=' + client_id + '&client_secret=' + client_secret,
      method:'POST'.complete:function(res){
        console.log('Request complete')},success:function(res){
        console.log(res)
        const getToken=res.data.access_token
        that.setData({
          token:getToken // Store access_token in token})},fail:function(res){
        console.log('Fail to request ! ')
        console.log(res)
      }
    })
  },
})
Copy the code

Click the button on the console to see access_token

In order to use the interface to identify images, we need access_token and image. Access_token solves this problem. Let’s do image. The commonly used way of wechat is to upload the user’s picture file to the wechat developer’s server, and the server will process the picture data after receiving it.

Wechat offers a “wx.ChooseImage” interface to “select images locally or take photos with camera”.

“Please upload this picture again.” (from the nuggets)

Here is the code to get the image

wxml:

<button bindtap="get_image"> </button>Copy the code

js:

 get_image:function(res){
    var that=this
    wx.chooseImage({
      count: 1.sizeType: ['original'.'compressed'].sourceType: ['album'.'camera'],
      success (res) {
      // tempFilePath can display images as the SRC attribute of the IMG tag
      const tempFilePaths=res.tempFilePaths;
      that.setData({
        imageUrl:tempFilePaths
      })
      console.log('Image path is',tempFilePaths)
      // Convert to base64 encoding
      wx.getFileSystemManager().readFile({
        filePath:res.tempFilePaths[0].encoding:'base64'.complete:res= >{
          console.log(res)
        },
        success:res= >{
          console.log('base64',res.data)
          that.setData({
            base64:res.data
          })
        }
      })
      }
    })
  },
Copy the code

Access_token and image are now ready to call baidu’s image recognition API.

wxml:

<button bindtap="recognition"> </button>Copy the code

js:

 recognition(res){
    console.log(this.data.token)
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token=' + this.data.token,
      method:'POST'.header: {'content-type':'application/x-www-form-urlencoded'
      },
      data: {image:this.data.base64
      },
      complete:res= >{
        console.log('complete recognition')},success:res= >{
        console.log('success recognition')
        console.log(res)
      }
    })
  }
Copy the code

Example: Enter a cute dog

It finally recognizes the result that we want

Finally, attach the complete code:

WXML:

<view> <button bindtap="get_access_token"> Get token</button> <button bindtap="get_image"> </button> <image SRC ="{{imageUrl}}"></image> <button bindtap="recognition"> </button> </view>Copy the code

js:

const grant_type='client_credentials'
const client_id='Ya191l0WHKkBenAWeYvZcijT'
const client_secret='Y1z6foQZn9oQTZacNg6AGn08ZdocEPp2'
Page({
  data: {imageUrl:null.token:null.base64:null,},/ / get access_token
  get_access_token:function(res){
    var that = this
    wx.request({
      url:'https://aip.baidubce.com/oauth/2.0/token?grant_type=' + grant_type + '&client_id=' + client_id + '&client_secret=' + client_secret,
      method:'POST'.complete:function(res){
        console.log('Request complete')},success:function(res){
        console.log(res)
        const getToken=res.data.access_token
        that.setData({
          token:getToken
        })
      },
      fail:function(res){
        console.log('Fail to request ! ')
        console.log(res)
      }
    })
  },
  // Upload the image
  get_image:function(res){
    var that=this
    wx.chooseImage({
      count: 1.sizeType: ['original'.'compressed'].sourceType: ['album'.'camera'],
      success (res) {
      // tempFilePath can display images as the SRC attribute of the IMG tag
      const tempFilePaths=res.tempFilePaths;
      that.setData({
        imageUrl:tempFilePaths
      })
      console.log('Image path is',tempFilePaths)
      // Convert to base64 encoding
      wx.getFileSystemManager().readFile({
        filePath:res.tempFilePaths[0].encoding:'base64'.complete:res= >{
          console.log(res)
        },
        success:res= >{
          console.log('base64',res.data)
          that.setData({
            base64:res.data
          })
        }
      })
      }
    })
  },
  // identify the image
  recognition(res){
    console.log(this.data.token)
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token=' + this.data.token,
      method:'POST'.header: {'content-type':'application/x-www-form-urlencoded'
      },
      data: {image:this.data.base64
      },
      complete:res= >{
        console.log('complete recognition')},success:res= >{
        console.log('success recognition')
        console.log(res)
      }
    })
  }
})
Copy the code