基於百度AI能力進行【地標識別】並快速接入小程序

 

致全部開發者:

咱們是開發者 不是 程序員。開發者是最具活力的創新者，是勤懇的踐行者，是敏捷的困難解決者，是胸懷夢想，不忘初心的 又具備開發能力的一羣人。

 前期準備

百度雲帳號(有帳號請忽略註冊)	https://passport.baidu.com/v2/?reg
建立一個圖像識別應用(已建立請忽略)	https://console.bce.baidu.com/ai/?fromai=1#/ai/imagerecognition/overview/index
建立一個微信小程序帳號(有帳號請忽略註冊)	https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=
微信小程序開發工具安裝	https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/getstart.html#安裝開發工具

建立應用獲取相關信息

應用名稱

名字方便本身區分應用使用便可，注意查看是否勾選地標識別

應用描述

簡述一下應用場景便可

獲取應用相關信息

AppID、API Key、Secret Key三個值保存備用。最後一值不要隨便泄露哦。

註冊微信小程序

選擇微信小程序填寫信息激活便可(開發者們註冊我的便可)

開始碼起來

開發文檔

須要簡單閱讀一下哦。不會編程的也要看一下哦

http://ai.baidu.com/docs#/ImageClassify-API/2c607890

能夠看到有一個URL參數，access_token的獲取官方文檔 http://ai.baidu.com/docs#/Auth/75d80ed1

快速獲取access_token

將API_KEY、SERCET_KEY替換爲獲取應用相關信息中的值,在任意瀏覽器地址欄輸入並點擊回車鍵

https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=API_KEY&client_secret=SERCET_KEY

結果以下圖。你們要注意哦。只是拿access_token後面對應的值哦。並非第一行的值哦。

獲取access_token的值保存。後續會用到

建立一個小程序項目

獲取小程序appid

開發-開發設置-開發者ID-AppID(小程序ID)

建立項目

建立好的項目截圖

小程序目錄結構 https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html 最好是看一下哦

開始改造項目

新建landmark文件夾

在根目錄的app.json文件夾中增長： 

"pages/landmark/landmark"

會自動建立相關文件夾和相關文件哦。小程序默認進去便是landmark頁面

{
  "pages": [
    "pages/landmark/landmark",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

給頁面增長功能

拍照或選擇圖片識別 那咱們就須要一個按鈕來調起相冊或相機選取圖片文件。爲了能讓用戶看到本身選擇或拍的照片。那咱們還須要一個圖片組件

按鈕組件文檔 https://developers.weixin.qq.com/miniprogram/dev/component/button.html

選取圖片文件API文檔  https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html

圖片組件文檔 https://developers.weixin.qq.com/miniprogram/dev/component/image.html

具體使用說明看官方便可，小帥這裏就不廢話了

 加完頁面內容，再增長一些樣式。代碼&效果以下

landmark.css代碼參考地址

https://gitee.com/xshuai/easydlsmartappdemo/blob/master/pages/index/index.wxss

landmark.wxml代碼

<view class="container">
<view class="img_wrap">
    <image src="{{ img }}" mode='aspectFit'/>
</view>
<button class="up">拍照/選取圖片識別</button>
<text class='baikeform'>By 小帥丶</text>
 </view>

封裝一個工具方法

方便調用地標識別接口而封裝一個工具方法。後續能夠根據本身需求再次增長額外接口。這樣不會影響具體某個模塊功能更改代碼。放在util/baiduai.js

使用以前記得 accessToken  替換爲前面獲取保存的access_token哦

/**
 * 調用百度地標識別示例代碼
 * 其餘接口能夠根據本身的需求封裝便可
 */
let accessToken = ''//本身的accessToken 根據實際狀況能夠進行封裝 自動獲取token
let landmarkUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/landmark';//地標識別接口地址
//地標識別接口 圖片base64 只是簡單示例 別的參數如何封裝建議本身學習一下JavaScript
let landmarkRequest = (base64Img, callback) => {
  //拼接接口body參數
  let params = {
    image: base64Img
  }
  //發送接口請求
  wx.request({
    url: landmarkUrl + '?access_token=' + accessToken,
    data: params,
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    method: 'POST',
    success: function (res) {
      callback.success(res.data)
    },
    fail: function (res) {
      if (callback.fail)
        callback.fail()
    }
  })
}
//暴露出去的接口
module.exports = {
  landmarkRequest: landmarkRequest
}

給按鈕增長事件並完善功能

對按鈕增長事件，選擇圖片或拍照後傳遞給地標識別接口。並顯示接口返回的識別結果。

按鈕修改後的代碼

< button bindtap = "uploads" class = "up"> 拍照/選取圖片識別 </ button >

 

對應的業務邏輯代碼在landmark.js編寫。完善代碼以下

var app = getApp();
//讀取封裝的工具方法
var api = require('../../utils/baiduai.js');
Page({
  data: {
    motto: 'LandMark',
    landmark:'',
    images: {},
    img: '',
    base64img: ''
  },
  //分享
  onShareAppMessage: function () {
    return {
      title: '地標識別小程序',
      path: '/pages/landmark/landmark',
      success: function (res) {
        if (res.errMsg == 'shareAppMessage:ok') {
          wx.showToast({
            title: '分享成功',
            icon: 'success',
            duration: 500
          });
        }
      },
      fail: function (res) {
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          wx.showToast({
            title: '分享取消',
            icon: 'loading',
            duration: 500
          })
        }
      }
    }
  },
  clear: function (event) {
    console.info(event);
    wx.clearStorage();
  },
  //事件處理函數
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  //按鈕點擊事件
  uploads: function () {
    var that = this
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
      sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片
        if (res.tempFiles[0].size > 4096 * 1024) {
          wx.showToast({
            title: '圖片文件過大哦',
            icon: 'none',
            mask: true,
            duration: 1500
          })
        } else {
          that.setData({
            img: res.tempFilePaths[0]
          })
        }
        wx.showLoading({
          title: "分析中...",
          mask: true
        })
        //根據上傳的圖片讀取圖片的base64
        var fs = wx.getFileSystemManager();
        fs.readFile({
          filePath: res.tempFilePaths[0].toString(),
          encoding: 'base64',
          success(res) {
            //獲取到圖片的base64 進行請求接口
            api.landmarkRequest(res.data,{
              success(res) {
                if (typeof (res.error_code) != "undefined") {
                  wx.hideLoading();
                  wx.showModal({
                    showCancel: false,
                    title: '錯誤碼:' + res.error_code,
                    content: '錯誤信息:' + res.error_msg
                  })
                } else {
                  if (res.result.landmark!='') {
                    wx.hideLoading();
                    let data = res.result.landmark;
                    that.setData({
                      landmark: data
                    })
                  } else {
                    wx.hideLoading();
                    wx.showModal({
                      showCancel: false,
                      title: '舒適提示',
                      content: '貌似沒有識別出結果'
                    })
                  }
                }
              }
            })
          }
        })
      },
    })
  },
  onLoad: function () {
  }
});

完善功能後的結果截圖

最終的wxml代碼

<view class="container">
<view class="img_wrap">
    <image src="{{ img }}" mode='aspectFit'/>
</view>
<button bindtap="uploads" class="up">拍照/選取圖片識別</button>
  <view wx:if="{{landmark}}" class="table">
      <view  class="tr bg-w">
        <view class="th" >地標名稱:{{landmark}}</view>
      </view>
  </view>
<text class='baikeform'>By 小帥丶</text>
 </view>