基於百度AI接口的微信小程序-圖像搜索

• 本文主要介紹基於百度AI開放平台接口實現的微信小程序相同圖片搜索
• 參考文檔：
  百度智能雲相同圖片搜索文檔
  微信小程序相關文檔
• 開發前的准備工作：

  1. 首先，進入百度AI開放平台，點擊右上角，進入控制台，第一次使用需要注冊or登錄。然后來到控制台界面，此時左邊會出現如圖一欄產品。
     

     點擊其中的圖像搜索，然后會跳轉到這個頁面
     
     點擊創建應用，來到這個頁面后，只需要填寫應用名稱和應用描述就可以點擊立即創建了，接口選擇它已經幫你選了相應的選擇了。
     

     創建完成后
     

     點擊查看應用詳情，在應用詳情的下方就可以創建相應的圖片庫了。
     
     再往后的內容無非就是申請建庫，然后往庫里放圖片，這里就不一一贅述了，不清楚的朋友可以查看技術文檔。

  2. 至此，我們就完成了開發前的准備了，接下來，開始進行代碼實現。

話不多說，先上代碼（代碼實現的是相同圖片搜索）。

wxml:

    <view class="container">
      <camera
        class="camera"
        device-position="back"
        flash="off"
        binderror="error"
      ></camera>
      <button class="button"bindtap="recognition">圖像搜索 </button>
    </view>

wxss:

    page {
      background: white;
    }
    
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .button_container {
      margin-top: 600rpx;
      display: flex;
      flex-direction: column;
    }
    
    .camera {
      width: 500rpx;
      height: 500rpx;
      margin-top: 40rpx;
    }
    
    .button {
      margin-top: 300rpx;
      width: 100rpx;
      height: 60rpx;
      background: forestgreen;
      color: white;
    }

javascript:

    const app = getApp()
    Page({
      data: {
        openid: "",
        nickName: "",
        src: "",
        token: "",
        base64: "",
        msg: "",
      },
    
      //點擊圖像搜索按鈕觸發的事件
      recognition(){
        this.takePhoto();//調用寫好的拍照方法
        this.check();//調用寫好的圖像搜索方法
      },
      //進行圖像搜索
      check(){
        var that = this;
        wx.showLoading({
          title: '識別中',
        })
        let token = wx.getStorageSync("token");
        if (token){
          //token存在，直接去圖庫搜索圖片
          wx.request({
            url: 'https://aip.baidubce.com/rest/2.0/realtime_search/same_hq/search?access_token=' + token,
            method: 'POST',
            data: {
              image: that.data.base64,
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: res => {
              wx.hideLoading();
              console.log(res)
              //個人對返回數據做的判斷，可以按自己的需要編寫相應邏輯
              if (res.data.result_num > 0) {
                let obj = res.data.result[0].brief;
                wx.showModal({
                  title: obj
                })
              } else {
                this.showToast("識別未成功")
              }
            },
            fail: err => {
              wx.hideLoading();
              this.showToast("調用失敗,請稍后重試")
            }
          });
        }else{
          //沒有token，調api去拿
          wx.request({
            url: 'https://aip.baidubce.com/oauth/2.0/token', //真實的接口地址
            data: {
              grant_type: 'client_credentials',//固定的
              client_id: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',//自己應用實例的AppID，在應用列表可以找到
              client_secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'//自己應用實例的API Key
            },
            header: {
              'Content-Type': 'application/json'
            },
            success: res => {
              wx.setStorageSync("token", res.data.access_token);
              wx.request({
                url: 'https://aip.baidubce.com/rest/2.0/realtime_search/same_hq/search?access_token=' + res.data.access_token,
                method: 'POST',
                data: {
                  image: that.data.base64,
                },
                header: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: res => {
                  wx.hideLoading();
                  console.log(res)
                  if (res.data.result_num > 0) {
                    let obj = res.data.result[0].brief;
                    wx.showModal({
                      title: obj
                    })
                  } else {
                    this.showToast("識別未成功")
                  }
                },
                fail: err => {
                  wx.hideLoading();
                  this.showToast("調用失敗,請稍后重試")
                }
              });
            }
          })
        }
      },
        //拍照
      takePhoto() {
        var that = this;
        const ctx = wx.createCameraContext()
        ctx.takePhoto({
          quality: 'high',
          success: (res) => {
            console.log(res)
            wx.getFileSystemManager().readFile({
              filePath: res.tempImagePath,
              encoding: 'base64',
              success: res => {
                console.log(res)
                this.setData({
                  base64: res.data
                })
              },
              fail: err => {
                console.log(err)
                this.showToast("調用失敗,請稍后重試");
              }
            })
          },
          fail: err => {
            this.showToast("調用失敗,請稍后重試");
          }
        })
      },
      //showToast的封裝
      showToast(title) {
        wx.showToast({
          title: title,
          icon: 'none',
          duration: 2500
        })
      },
    })

• 注意事項：在開始前要往圖片庫里加想要搜索的圖片。
• 由於本人功力有限，以上內容僅供參考，還望多多指教。