共用方式為

適用於 JavaScript 的 Azure AI 視覺影像分析用戶端連結庫 - 1.0.0-beta.3 版

  • 發行項

影像分析服務提供 AI 演演算法來處理影像，並傳回其內容的相關信息。 在單一服務呼叫中，您可以同時從影像擷取一或多個視覺功能，包括取得影像的標題、擷取影像中顯示的文字，以及偵測物件。 如需服務和支持的視覺功能的詳細資訊，請參閱 影像分析概觀和 概念 頁面。

使用影像分析用戶端連結庫來：

  • 針對服務進行驗證
  • 設定您想要擷取的功能
  • 上傳影像以供分析，或傳送影像 URL
  • 取得分析結果

產品檔 | 範例 | Vision Studio | API 參考檔 | 套件 （npm） | SDK 原始程式碼

開始

目前支持的環境

如需詳細資訊，請參閱我們的 支持原則。

先決條件

  • Azure 訂用帳戶。
  • Azure 訂用帳戶中的 電腦視覺資源。
    • 您需要此資源的金鑰和端點，才能針對服務進行驗證。
    • 您可以使用免費定價層（F0）來試用服務，並在稍後升級至生產環境的付費層。
    • 請注意，若要使用 Caption 或 Dense Captions 功能執行影像分析，Azure 資源必須來自下列其中一個 GPU 支援的區域：East US、France Central、Korea Central、North Europe、Southeast Asia、West Europe或 West US。

安裝 @azure-rest/ai-vision-image-analysis 套件

使用 npm安裝適用於 JavaScript 的影像分析用戶端連結庫：

npm install @azure-rest/ai-vision-image-analysis

瀏覽器支援

JavaScript 套件組合

若要在瀏覽器中使用此用戶端連結庫，首先，您必須使用配套程式。 如需如何執行這項操作的詳細資訊，請參閱我們的 組合檔。

重要概念

初始化 ImageAnalysisClient之後，您必須選取一或多個視覺功能進行分析。 選項是由列舉類別 VisualFeatures所指定。 支援下列功能：

  1. VisualFeatures.Caption：（範例 | 範例）產生人類可讀的句子，描述影像的內容。
  2. VisualFeatures.Read：（範例 | 範例）也稱為光學字元辨識（OCR）。 從影像擷取印刷或手寫文字。
  3. VisualFeatures.DenseCaptions：密集標題會為影像中最多 10 個不同的區域產生一個句子標題，包括整個影像的標題，以提供更多詳細數據。
  4. VisualFeatures.Tags：擷取數千個可辨識物件、活體、風景和影像中所顯示動作的內容標記。
  5. VisualFeatures.Objects：對象偵測。 這類似於標記，但著重於偵測影像中的實體物件並傳回其位置。
  6. VisualFeatures.SmartCrops：用來尋找影像的代表子區域來產生縮圖，並優先提供包含臉部。
  7. VisualFeatures.People：找出影像中的人員，並傳回其位置。

如需這些功能的詳細資訊，請參閱 影像分析概觀和 概念 頁面。

支援的影像格式

影像分析適用於符合下列需求的影像：

  • 影像必須以 JPEG、PNG、GIF、BMP、WEBP、ICO、TIFF 或 MPO 格式呈現
  • 映像的檔案大小必須小於 20 MB（MB）
  • 影像的維度必須大於 50 x 50 像素，且小於 16,000 x 16,000 像素

ImageAnalysisClient

ImageAnalysisClient 是開發人員與影像分析服務互動的主要介面。 它作為閘道，會從中產生與連結庫的所有互動。

例子

驗證用戶端

以下是如何使用金鑰型驗證建立 ImageAnalysisClient 實例的範例。

const key = "<your_key>";
const credential = new AzureKeyCredential(key);

const client = new ImageAnalysisClient(endpoint, credential);

const { ImageAnalysisClient } = require("@azure-rest/ai-vision-image-analysis");
const { AzureKeyCredential } = require('@azure/core-auth');

const endpoint = "<your_endpoint>";
const key = "<your_key>";
const credential = new AzureKeyCredential(key);

const client = new ImageAnalysisClient(endpoint, credential);

使用 Microsoft Entra ID 認證建立 ImageAnalysisClient

用戶端訂用帳戶密鑰驗證用於本快速入門指南的大部分範例中，但您也可以使用 [Azure 身分識別連結庫][azure_identity]，向 Microsoft Entra ID（先前稱為 Azure Active Directory）進行驗證。 若要使用如下所示的 [DefaultAzureCredential][azure_identity_dac] 提供者，或 Azure SDK 所提供的其他認證提供者，請安裝 Azure.Identity 套件：

npm install @azure/identity

const endpoint = "<your_endpoint>";
const credential = new DefaultAzureCredential();

const client = new ImageAnalysisClient(endpoint, credential);

從 URL 分析影像

下列範例示範如何使用適用於 JavaScript 的影像分析用戶端連結庫來分析影像。

const imageUrl = "https://example.com/image.jpg";
const features = ["Caption", "DenseCaptions", "Objects", "People", "Read", "SmartCrops", "Tags"];

async function analyzeImageFromUrl() {
  const result = await client.path("/imageanalysis:analyze").post({
    body: {
      url: imageUrl,
    },
    queryParameters: {
      features: features,
      "smartCrops-aspect-ratios": [0.9, 1.33],
    },
    contentType: "application/json",
  });

  console.log("Image analysis result:", result.body);
}

analyzeImageFromUrl();

從本機檔案分析影像

在此範例中，我們將使用適用於 JavaScript 的影像分析用戶端連結庫，從本機檔案分析影像。

const fs = require("fs");

const imagePath = "./path/to/your/image.jpg";
const features = ["Caption", "DenseCaptions", "Objects", "People", "Read", "SmartCrops", "Tags"];

async function analyzeImageFromFile() {
  const imageBuffer = fs.readFileSync(imagePath);

  const result = await client.path("/imageanalysis:analyze").post({
    body: imageBuffer,
    queryParameters: {
      features: features,
      "smartCrops-aspect-ratios": [0.9, 1.33],
    },
    contentType: "application/octet-stream",
  });

  console.log("Image analysis result:", result.body);
}

analyzeImageFromFile();

從影像 URL 擷取文字

此範例示範如何使用 ImageAnalysisClient 擷取圖像檔 sample.jpg 的列印或手寫文字。 方法呼叫會傳回 ImageAnalysisResult 物件。 所傳回物件的 ReadResult 屬性包含文字行清單，以及每個文字行周圍的周框多邊形。 對於每一行，它也會傳回文字行中的單字清單，以及每個單字周圍的周框多邊形。

const client: ImageAnalysisClient = createImageAnalysisClient(endpoint, credential);

const features: string[] = [
  'Read'
];

const imageUrl: string = 'https://aka.ms/azsdk/image-analysis/sample.jpg';

client.path('/imageanalysis:analyze').post({
  body: { url: imageUrl },
  queryParameters: { features: features },
  contentType: 'application/json'
}).then(result => {
  const iaResult: ImageAnalysisResultOutput = result.body as ImageAnalysisResultOutput;

  // Process the response
  if (iaResult.readResult && iaResult.readResult.blocks.length > 0) {
    iaResult.readResult.blocks.forEach(block => {
      console.log(`Detected text block: ${JSON.stringify(block)}`);
    });
  } else {
    console.log('No text blocks detected.');
  }

故障排除

伐木

啟用記錄可能有助於找出有關失敗的實用資訊。 若要查看 HTTP 要求和回應的記錄，請將 AZURE_LOG_LEVEL 環境變數設定為 info。 或者，您可以在運行時間啟用記錄，方法是在 @azure/logger中呼叫 setLogLevel：

const { setLogLevel } = require("@azure/logger");

setLogLevel("info");

如需如何啟用記錄的詳細指示，請參閱@azure/記錄器套件檔。

後續步驟

如需示範如何使用用戶端連結庫的詳細範例，請參閱 範例 目錄。

貢獻

如果您想要參與此連結庫，請閱讀 參與指南，以深入瞭解如何建置和測試程序代碼。