手把手教你小程序中实现图像识别

小程序+图像识别

最近开发小程序的过程中，产品和我说需要做一个图像识别的功能，即给一个图片能识别它是什么，我刚开始以为有点难度因为这是直接让我做一个深度学习啊，后来上网找了下看到了百度智能云平台（cloud.baidu.com/）它里面有个图像识别，…

首先进入到图像识别这里

点击立即使用，扫码登陆之后会进入到控制台即下面的页面（如果你没认证的话会让你先身份认证）

之后点击创建应用，选择你需要的接口即可

创建好之后点击查看应用详情

可以看到这样的页面

此时应用已经创建好了，我们需要去查看文档看如何使用，点击如下的技术文档

我这里的业务是需要用到通用物体识别，因此我们到通用物体识别这里看下如下图，可以看到我们如果想用这个接口我们需要获取access_token和image(image和URL二选一我这里选择image)

接下来我们点击上一张图片中的“Access Token获取”，查看如何获取token如下图，可以看到它让我们向这个URL地址发送请求，其中client_id和client_secret是我们创建完应用之后的API Key和Secret Key

在小程序中我们可以这样获取到它的token

wxml：

  <button bindtap="get_access_token">获取token</button>

js:

const grant_type='client_credentials'
const client_id='你的API Key'
const client_secret='你的Secret Key'
Page({
  data:{
    imageUrl:null,
    token:null,
    base64:null,
  },
  //获取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 //将access_token存到token中
        })
      },
      fail:function(res){
        console.log('Fail to request !')
        console.log(res)
      }
    })
  },
})

点击按钮在控制台可以看到access_token

前面我们说过想要使用接口识别图片我们需要access_token和image，access_token解决了我们来弄一下image，微信小程序怎样获取图片数据呢？微信常用的方式是将用户的图片文件上传到微信开发者的服务器上，服务器接收到图片数据后再进行相关的处理。

微信提供了“从本地选择图片或使用相机拍照”的接口“wx.chooseImage”。

“这里的这张图请重新上传下哦“（——来自掘金同学的留言）

下面是获取image的代码

wxml:

  <button bindtap="get_image">上传图片</button>

js:

 get_image:function(res){
    var that=this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
      // tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths=res.tempFilePaths;
      that.setData({
        imageUrl:tempFilePaths
      })
      console.log('Image path is',tempFilePaths)
      //转换成base64编码
      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
          })
        }
      })
      }
    })
  },

access_token和image已经准备好了，现在已经可以去调用百度图片识别的API了。

wxml:

  <button bindtap="recognition">识别图片</button>

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

示例：输入一张可爱的狗狗

它最后识别出了我们想要的结果

最后附上完整代码：

wxml：

<view>
  <button bindtap="get_access_token">获取token</button>
  <button bindtap="get_image">上传图片</button>
  <image src="{{imageUrl}}"></image>
  <button bindtap="recognition">识别图片</button>
</view>

js:

const grant_type='client_credentials'
const client_id='Ya191l0WHKkBenAWeYvZcijT'
const client_secret='Y1z6foQZn9oQTZacNg6AGn08ZdocEPp2'
Page({
  data:{
    imageUrl:null,
    token:null,
    base64:null,
  },
  //获取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)
      }
    })
  },
  //上传图片
  get_image:function(res){
    var that=this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
      // tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths=res.tempFilePaths;
      that.setData({
        imageUrl:tempFilePaths
      })
      console.log('Image path is',tempFilePaths)
      //转换成base64编码
      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
          })
        }
      })
      }
    })
  },
  //识别图片
  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)
      }
    })
  }
})