快速入門:使用 Bing 圖像式搜尋 REST API 和 Node.js 來取得影像見解

警告

在 2020 年 10 月 30 日,Bing 搜尋 API 已從 Azure AI 服務移至 Bing 搜尋 服務。 本文件僅供參考之用。 如需更新的文件,請參閱 Bing 搜尋 API 文件。 如需針對 Bing 搜尋建立新 Azure 資源的指示,請參閱透過 Azure Marketplace 建立 Bing 搜尋資源

使用本快速入門,第一次呼叫 Bing 圖像式搜尋 API。 這個簡單的 JavaScript 應用程式會將影像上傳至 API,並顯示傳回的相關資訊。 雖然此應用程式是以 JavaScript 撰寫的,但 API 是一種與大多數程式設計語言都相容的 RESTful Web 服務。

Prerequisites

  • Node.js
  • 適用於 JavaScript 的要求模組。 您可以使用 npm install request 命令來安裝此模組。
  • 表單資料模組。 您可以使用 npm install form-data 命令來安裝此模組。

建立 Azure 資源

藉由建立下列其中一項 Azure 資源,開始使用 Bing 圖像式搜尋 API:

Bing 搜尋 v7 資源

  • 您可以透過 Azure 入口網站取得該資源,直到將其刪除為止。
  • 選取 S9 定價層。

多服務資源

  • 您可以透過 Azure 入口網站取得該資源,直到將其刪除為止。
  • 針對您的應用程式,跨多個 Azure AI 服務使用相同的金鑰和端點。

初始化應用程式

  1. 在您慣用的 IDE 或編輯器中建立 JavaScript 檔案,然後設定下列需求:

    var request = require('request');
    var FormData = require('form-data');
    var fs = require('fs');
    
  2. 為您的 API 端點、訂用帳戶金鑰以及您影像的路徑,建立變數。 對於 baseUri 值,您可以使用下列程式碼中的全域端點,或使用 Azure 入口網站中針對您的資源所顯示的自訂子網域端點。

    var baseUri = 'https://api.cognitive.microsoft.com/bing/v7.0/images/visualsearch';
    var subscriptionKey = 'your-api-key';
    var imagePath = "path-to-your-image";
    
  3. 建立名為 requestCallback() 的函式,以列印來自 API 的回應。

    function requestCallback(err, res, body) {
        console.log(JSON.stringify(JSON.parse(body), null, '  '))
    }
    

建構及傳送搜尋要求

  1. 上傳本機影像時,表單資料必須包含 Content-Disposition 標頭。 將其 name 參數設為 "image",以及將 filename 參數設為影像的檔案名稱。 表單的內容包含影像的二進位資料。 您可以上傳的影像大小上限為 1 MB。

    --boundary_1234-abcd
    Content-Disposition: form-data; name="image"; filename="myimagefile.jpg"
    
    ÿØÿà JFIF ÖÆ68g-¤CWŸþ29ÌÄøÖ‘º«™æ±èuZiÀ)"óÓß°Î= ØJ9á+*G¦...
    
    --boundary_1234-abcd--
    
  2. 使用 FormData() 建立新的 FormData 物件,並使用 fs.createReadStream() 來附加影像路徑。

    var form = new FormData();
    form.append("image", fs.createReadStream(imagePath));
    
  3. 使用要求程式庫來上傳影像,並呼叫 requestCallback() 來列印回應。 將您的訂用帳戶金鑰新增至要求標頭。

    form.getLength(function(err, length){
      if (err) {
        return requestCallback(err);
      }
      var r = request.post(baseUri, requestCallback);
      r._form = form; 
      r.setHeader('Ocp-Apim-Subscription-Key', subscriptionKey);
    });
    

後續步驟