範例:使用 C# 探索影像處理應用程式Sample: Explore an image processing app with C#

探索使用「電腦視覺」在影像中執行光學字元辨識 (OCR)、建立智慧型裁剪縮圖以及偵測、分類、標記和描述視覺特徵 (包括臉部) 的基本 Windows 應用程式。Explore a basic Windows application that uses Computer Vision to perform optical character recognition (OCR), create smart-cropped thumbnails, plus detect, categorize, tag and describe visual features, including faces, in an image. 以下範例可讓您提交影像 URL 或儲存在本機的檔案。The below example lets you submit an image URL or a locally stored file. 您可以將這個開放原始碼範例當作一個範本,來利用「電腦視覺 API」和 Windows Presentation Foundation (WPF,.NET Framework 的組件) 組建自己的 Windows 應用程式。You can use this open source example as a template for building your own app for Windows using the Computer Vision API and Windows Presentation Foundation (WPF), a part of .NET Framework.

  • 從 GitHub 取得範例應用程式Get the sample app from GitHub
  • 請在 Visual Studio 中開啟並建立範例應用程式Open and build the sample app in Visual Studio
  • 執行範例應用程式並與之互動,以執行各種案例Run the sample app and interact with it to perform various scenarios
  • 探索範例應用程式隨附的各種案例Explore the various scenarios included with the sample app

必要條件Prerequisites

探索範例應用程式之前,請確認您已符合下列必要條件:Before exploring the sample app, ensure that you've met the following prerequisites:

取得範例應用程式Get the sample app

電腦視覺範例應用程式可從 Microsoft/Cognitive-Vision-Windows 存放庫的 GitHub 取得。The Computer Vision sample app is available on GitHub from the Microsoft/Cognitive-Vision-Windows repository. 此存放庫也包含作為 Git 子模組的 Microsoft/Cognitive-Common-Windows 存放庫。This repository also includes the Microsoft/Cognitive-Common-Windows repository as a Git submodule. 您可以使用命令列中的 git clone --recurse-submodules 命令或是使用 GitHub Desktop 來遞迴複製此存放庫 (包括子模組)。You can recursively clone this repository, including the submodule, either by using the git clone --recurse-submodules command from the command line, or by using GitHub Desktop.

例如,若要從命令提示字元來遞迴複製電腦視覺範例應用程式的存放庫,請執行下列命令:For example, to recursively clone the repository for the Computer Vision sample app from a command prompt, run the following command:

git clone --recurse-submodules https://github.com/Microsoft/Cognitive-Vision-Windows.git

重要

請勿以 ZIP 格式下載此存放庫。Do not download this repository as a ZIP. 以 ZIP 格式下載存放庫時,Git 不會包含子模組。Git doesn't include submodules when downloading a repository as a ZIP.

取得選用的範例影像Get optional sample images

您可以選擇性使用臉部範例應用程式隨附的範例影像,可從 Microsoft/Cognitive-Face-Windows 存放庫的 GitHub 取得。You can optionally use the sample images included with the Face sample app, available on GitHub from the Microsoft/Cognitive-Face-Windows repository. 該範例應用程式包含資料夾 /Data,內含多張人物影像。That sample app includes a folder, /Data, which contains multiple images of people. 您也可以利用針對電腦視覺範例應用程式所敘述的方法,遞迴複製此存放庫。You can recursively clone this repository, as well, by the methods described for the Computer Vision sample app.

例如,若要從命令提示字元來遞迴複製臉部範例應用程式的存放庫,請執行下列命令:For example, to recursively clone the repository for the Face sample app from a command prompt, run the following command:

git clone --recurse-submodules https://github.com/Microsoft/Cognitive-Face-Windows.git

請在 Visual Studio 中開啟並建立範例應用程式Open and build the sample app in Visual Studio

在您執行或探索範例應用程式前,必須先建立範例應用程式,如此一來 Visual Studio 就能解決相依性問題。You must build the sample app first, so that Visual Studio can resolve dependencies, before you can run or explore the sample app. 若要開啟和建立範例應用程式,請執行下列步驟:To open and build the sample app, do the following steps:

  1. 在 Visual Studio 中開啟 Visual Studio 解決方案檔案 /Sample-WPF/VisionAPI-WPF-Samples.slnOpen the Visual Studio solution file, /Sample-WPF/VisionAPI-WPF-Samples.sln, in Visual Studio.

  2. 確認 Visual Studio 解決方案包含兩個專案:Ensure that the Visual Studio solution contains two projects:

    • SampleUserControlLibrarySampleUserControlLibrary
    • VisionAPI-WPF-SamplesVisionAPI-WPF-Samples

    如果無法使用 SampleUserControlLibrary 專案,請確認您已經遞迴複製 Microsoft/Cognitive-Vision-Windows 存放庫。If the SampleUserControlLibrary project is unavailable, confirm that you've recursively cloned the Microsoft/Cognitive-Vision-Windows repository.

  3. 在 Visual Studio 中,請按 Ctrl+Shift+B,或選擇功能區功能表中的 [建置],然後選擇 [建置方案] 來建置該方案。In Visual Studio, either press Ctrl+Shift+B or choose Build from the ribbon menu and then choose Build Solution to build the solution.

執行範例應用程式並與之互動Run and interact with the sample app

您可以執行範例應用程式來了解執行各種工作時 (例如產生縮圖或標記影像),此應用程式如何與您和電腦視覺用戶端程式庫互動。You can run the sample app, to see how it interacts with you and with the Computer Vision client library when performing various tasks, such as generating thumbnails or tagging images. 若要執行範例應用程式並與之互動,請執行下列步驟:To run and interact with the sample app, do the following steps:

  1. 建置完成後,按下 F5 或選擇功能區功能表中的 [偵錯],然後選擇 [開始偵錯] 來執行範例應用程式。After the build is complete, either press F5 or choose Debug from the ribbon menu and then choose Start debugging to run the sample app.

  2. 顯示範例應用程式時,請選擇瀏覽窗格中的 [訂用帳戶金鑰管理],以顯示訂用帳戶金鑰管理頁面。When the sample app is displayed, choose Subscription Key Management from the navigation pane to display the Subscription Key Management page. 訂用帳戶金鑰管理頁面Subscription Key Management page

  3. 在 [訂用帳戶金鑰] 中輸入您的訂用帳戶金鑰。Enter your subscription key in Subscription Key.

  4. 在 [端點] 中輸入訂用帳戶金鑰的電腦視覺資源之端點 URL (省略 /vision/v1.0)。Enter the endpoint URL, omitting the /vision/v1.0, of the Computer Vision resource for your subscription key in Endpoint.
    舉例而言,如果您使用的是電腦視覺免費試用版的訂用帳戶金鑰,請輸入以下適用於美國中西部 Azure 區域的端點 URL:https://westcentralus.api.cognitive.microsoft.comFor example, if you're using the subscription key from the Computer Vision free trial, enter the following endpoint URL for the West Central US Azure region: https://westcentralus.api.cognitive.microsoft.com

  5. 如果下次執行範例應用程式時,不想再輸入您的訂用帳戶金鑰和端點 URL,請選擇 [儲存設定],將訂用帳戶金鑰和端點 URL 儲存到您的電腦上。If you don't want to enter your subscription key and endpoint URL the next time you run the sample app, choose Save Setting to save the subscription key and endpoint URL to your computer. 如果您想刪除先前儲存的訂用帳戶金鑰和端點 URL,請選擇 [刪除設定]。If you want to delete your previously-saved subscription key and endpoint URL, choose Delete Setting.

    注意

    範例應用程式會使用隔離儲存區以及 System.IO.IsolatedStorage 來儲存您的訂用帳戶金鑰和端點 URL。The sample app uses isolated storage, and System.IO.IsolatedStorage, to store your subscription key and endpoint URL.

  6. 在瀏覽窗格中的 [選取案例] 底下,選取範例應用程式目前隨附的其中一個案例:Under Select a scenario in the navigation pane, select one of the scenarios currently included with the sample app:

    案例Scenario 說明Description
    分析影像Analyze Image 使用分析影像作業來分析本機或遠端影像。Uses the Analyze Image operation to analyze a local or remote image. 您可以選擇分析視覺功能和語言,並查看影像及結果。You can choose the visual features and language for the analysis, and see both the image and the results.
    使用領域模型分析影像Analyze Image with Domain Model 使用列出特定領域模型 (英文) 作業可列出您可以選取的領域模型,使用辨識特定領域內容 (英文) 作業則能以選取的領域模型來分析本機或遠端影像。Uses the List Domain Specific Models operation to list the domain models from which you can select, and the Recognize Domain Specific Content operation to analyze a local or remote image using the selected domain model. 您也可以選擇要分析的語言。You can also choose the language for the analysis.
    描述影像Describe Image 使用描述影像 (英文) 作業可建立一般人能理解的本機或遠端影像描述。Uses the Describe Image operation to create a human-readable description of a local or remote image. 您也可以選擇要描述的語言。You can also choose the language for the description.
    產生標籤Generate Tags 使用標記影像 (英文) 作業可標記本機或遠端影像的視覺功能。Uses the Tag Image operation to tag the visual features of a local or remote image. 您也可以選擇標籤所用的語言。You can also choose the language used for the tags.
    辨識文字 (OCR)Recognize Text (OCR) 使用 OCR (英文) 作業可辨識及擷取影像中的列印文字。Uses the OCR operation to recognize and extract printed text from an image. 您可以選擇要使用的語言,或是由電腦視覺自動偵測語言。You can either choose the language to use, or let Computer Vision auto-detect the language.
    辨識文字 V2 (英文)Recognize Text V2 (English) 使用辨識文字 (英文) 和取得辨識文字作業結果 (英文) 作業,能以非同步方式辨識及擷取影像中的列印或手寫文字。Uses the Recognize Text and Get Recognize Text Operation Result operations to asynchronously recognize and extract printed or handwritten text from an image.
    取得縮圖Get Thumbnail 使用取得縮圖 (英文) 作業可產生本機或遠端影像的縮圖。Uses the Get Thumbnail operation to generate a thumbnail for a local or remote image.

    下列螢幕擷取畫面顯示的是在分析範例影像之後,針對分析影像案例提供的頁面。The following screenshot illustrates the page provided for the Analyze Image scenario, after analyzing a sample image. 分析影像頁面的螢幕擷取畫面Screenshot of the Analyze image page

探索範例應用程式Explore the sample app

電腦視覺範例應用程式的 Visual Studio 解決方案包含兩個專案:The Visual Studio solution for the Computer Vision sample app contains two projects:

  • SampleUserControlLibrarySampleUserControlLibrary
    SampleUserControlLibrary 專案提供多個認知服務範例可共用的功能。The SampleUserControlLibrary project provides functionality shared by multiple Cognitive Services samples. 此專案包含下列內容:The project contains the following:
    • SampleScenariosSampleScenarios
      提供標準化簡報的 UserControl,例如標題列、瀏覽窗格以及內容窗格。A UserControl that provides a standardized presentation, such as the title bar, navigation pane, and content pane, for samples. 電腦視覺範例應用程式會使用 [MainWindow.xaml] 視窗中的這個控制項來顯示案例頁面,也會用於存取多個案例共用的資訊,例如訂用帳戶金鑰和端點 URL。The Computer Vision sample app uses this control in the MainWindow.xaml window to display scenario pages and access information shared across scenarios, such as the subscription key and endpoint URL.
    • SubscriptionKeyPageSubscriptionKeyPage
      提供標準化版面配置的頁面,用來輸入範例應用程式的訂用帳戶金鑰和端點 URL。A Page that provides a standardized layout for entering a subscription key and endpoint URL for the sample app. 電腦視覺範例應用程式會使用此頁面來管理案例頁面所使用的訂用帳戶金鑰和端點 URL。The Computer Vision sample app uses this page to manage the subscription key and endpoint URL used by the scenario pages.
    • VideoResultControlVideoResultControl
      提供影片資訊標準化簡報的 UserControl。A UserControl that provides a standardized presentation for video information. 電腦視覺範例應用程式不會使用此控制項。The Computer Vision sample app doesn't use this control.
  • VisionAPI-WPF-SamplesVisionAPI-WPF-Samples
    電腦視覺範例應用程式的主要專案,內有電腦視覺的所有精彩功能。The main project for the Computer Vision sample app, this project contains all of the interesting functionality for Computer Vision. 此專案包含下列內容:The project contains the following:
    • AnalyzeInDomainPage.xamlAnalyzeInDomainPage.xaml
      使用領域模型案例的分析影像案例頁面。The scenario page for the Analyze Image with Domain Model scenario.
    • AnalyzeImage.xamlAnalyzeImage.xaml
      分析影像案例的案例頁面。The scenario page for the Analyze Image scenario.
    • DescribePage.xamlDescribePage.xaml
      描述影像案例的案例頁面。The scenario page for the Describe Image scenario.
    • ImageScenarioPage.csImageScenarioPage.cs
      ImageScenarioPage 類別,從其中衍生範例應用程式中所有的案例頁面。The ImageScenarioPage class, from which all of the scenario pages in the sample app are derived. 此類別會管理功能,例如提供認證和格式化輸出,並且由所有案例頁面共用。This class manages functionality, such as providing credentials and formatting output, shared by all of the scenario pages.
    • MainWindow.xamlMainWindow.xaml
      範例應用程式的主視窗,會使用 SampleScenarios 控制項來呈現 SubscriptionKeyPage 和案例頁面。The main window for the sample app, it uses the SampleScenarios control to present the SubscriptionKeyPage and scenario pages.
    • OCRPage.xamlOCRPage.xaml
      辨識文字 (OCR) 案例的案例頁面。The scenario page for the Recognize Text (OCR) scenario.
    • RecognizeLanguage.csRecognizeLanguage.cs
      RecognizeLanguage 類別,可提供範例應用程式中各種方法所支援的語言相關資訊。The RecognizeLanguage class, which provides information about the languages supported by the various methods in the sample app.
    • TagsPage.xamlTagsPage.xaml
      產生標籤案例的案例頁面。The scenario page for the Generate Tags scenario.
    • TextRecognitionPage.xamlTextRecognitionPage.xaml
      辨識文字 V2 (英文) 案例的案例頁面。The scenario page for the Recognize Text V2 (English) scenario.
    • ThumbnailPage.xamlThumbnailPage.xaml
      取得縮圖案例的案例頁面。The scenario page for the Get Thumbnail scenario.

探討範例程式碼Explore the sample code

範例程式碼的主要部分會以開頭為 KEY SAMPLE CODE STARTS HERE 而結尾為 KEY SAMPLE CODE ENDS HERE 的註解區塊框出,方便您研究範例應用程式。Key portions of sample code are framed with comment blocks that start with KEY SAMPLE CODE STARTS HERE and end with KEY SAMPLE CODE ENDS HERE, to make it easier for you to explore the sample app. 範例程式碼的這些主要部分包含的程式碼,與學習使用電腦視覺 API 用戶端程式庫來執行各種工作最為相關。These key portions of sample code contain the code most relevant to learning how to use the Computer Vision API client library to do various tasks. 您可以在 Visual Studio 中搜尋 KEY SAMPLE CODE STARTS HERE,即可在電腦視覺範例應用程式中最相關的程式碼部分之間移動。You can search for KEY SAMPLE CODE STARTS HERE in Visual Studio to move between the most relevant sections of code in the Computer Vision sample app.

例如,以下所示的 UploadAndAnalyzeImageAsync 方法已納入 AnalyzePage.xaml 之中,示範了如何透過叫用 ComputerVisionClient.AnalyzeImageInStreamAsync 方法以用戶端程式庫來分析本機影像。For example, the UploadAndAnalyzeImageAsync method, shown following and included in AnalyzePage.xaml, demonstrates how to use the client library to analyze a local image by invoking the ComputerVisionClient.AnalyzeImageInStreamAsync method.

private async Task<ImageAnalysis> UploadAndAnalyzeImageAsync(string imageFilePath)
{
    // -----------------------------------------------------------------------
    // KEY SAMPLE CODE STARTS HERE
    // -----------------------------------------------------------------------

    //
    // Create Cognitive Services Vision API Service client.
    //
    using (var client = new ComputerVisionClient(Credentials) { Endpoint = Endpoint })
    {
        Log("ComputerVisionClient is created");

        using (Stream imageFileStream = File.OpenRead(imageFilePath))
        {
            //
            // Analyze the image for all visual features.
            //
            Log("Calling ComputerVisionClient.AnalyzeImageInStreamAsync()...");
            VisualFeatureTypes[] visualFeatures = GetSelectedVisualFeatures();
            string language = (_language.SelectedItem as RecognizeLanguage).ShortCode;
            ImageAnalysis analysisResult = await client.AnalyzeImageInStreamAsync(imageFileStream, visualFeatures, null, language);
            return analysisResult;
        }
    }

    // -----------------------------------------------------------------------
    // KEY SAMPLE CODE ENDS HERE
    // -----------------------------------------------------------------------
}

探索用戶端程式庫Explore the client library

此範例應用程式會利用電腦視覺 API 用戶端程式庫,這是適用於 Azure 認知服務中電腦視覺 API 的精簡版 C# 用戶端包裝函式。This sample app uses the Computer Vision API client library, a thin C# client wrapper for the Computer Vision API in Azure Cognitive Services. Microsoft.Azure.CognitiveServices.Vision.ComputerVision (英文) 套件中的 NuGet可提供此用戶端程式庫。The client library is available from NuGet in the Microsoft.Azure.CognitiveServices.Vision.ComputerVision package. 在組建 Visual Studio 應用程式時,會從對應的 NuGet 套件中擷取用戶端程式庫。When you built the Visual Studio application, you retrieved the client library from its corresponding NuGet package. 您也可以在 Microsoft/Cognitive-Vision-Windows 存放庫的 /ClientLibrary 資料夾中檢視用戶端程式庫的原始程式碼。You can also view the source code for the client library in the /ClientLibrary folder of the Microsoft/Cognitive-Vision-Windows repository.

Microsoft.Azure.CognitiveServices.Vision.ComputerVision 命名空間中,用戶端程式庫功能以 ComputerVisionClient 類別為主,而在 Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models 命名空間中可找到與電腦視覺互動時 ComputerVisionClient 類別所使用的模型。The client library's functionality centers around the ComputerVisionClient class, in the Microsoft.Azure.CognitiveServices.Vision.ComputerVision namespace, while the models used by the ComputerVisionClient class when interacting with Computer Vision are found in the Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models namespace. 在範例應用程式隨附的各種 XAML 案例頁面中,可以找到這些命名空間適用的 using 指示詞,如下所示:In the various XAML scenario pages included with the sample app, you'll find the following using directives for those namespaces:

// -----------------------------------------------------------------------
// KEY SAMPLE CODE STARTS HERE
// Use the following namespace for ComputerVisionClient.
// -----------------------------------------------------------------------
using Microsoft.Azure.CognitiveServices.Vision.ComputerVision;
using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;
// -----------------------------------------------------------------------
// KEY SAMPLE CODE ENDS HERE
// -----------------------------------------------------------------------

在您探索電腦視覺範例應用程式隨附的案例時,您會對 ComputerVisionClient 類別隨附的各種方法有更深入的認識。You'll learn more about the various methods included with the ComputerVisionClient class as you explore the scenarios included with the Computer Vision sample app.

探索分析影像案例Explore the Analyze Image scenario

此案例由 AnalyzePage.xaml 頁面管理。This scenario is managed by the AnalyzePage.xaml page. 您可以選擇分析視覺功能和語言,並查看影像及結果。You can choose the visual features and language for the analysis, and see both the image and the results. 案例頁面的做法是根據影像來源使用下列其中一種方法進行:The scenario page does this by using one of the following methods, depending on the source of the image:

  • UploadAndAnalyzeImageAsyncUploadAndAnalyzeImageAsync
    此方法適用於本機影像,其中影像必須編碼成 Stream,並藉由呼叫 ComputerVisionClient.AnalyzeImageInStreamAsync 方法傳送到電腦視覺。This method is used for local images, in which the image must be encoded as a Stream and sent to Computer Vision by calling the ComputerVisionClient.AnalyzeImageInStreamAsync method.
  • AnalyzeUrlAsyncAnalyzeUrlAsync
    此方法適用於遠端影像,會藉由呼叫 ComputerVisionClient.AnalyzeImageAsync 方法,將影像的 URL 傳送到電腦視覺。This method is used for remote images, in which the URL for the image is sent to Computer Vision by calling the ComputerVisionClient.AnalyzeImageAsync method.

UploadAndAnalyzeImageAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The UploadAndAnalyzeImageAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 由於範例應用程式正在分析本機影像,因此必須將該影像的內容傳送至電腦視覺。Because the sample app is analyzing a local image, it has to send the contents of that image to Computer Vision. 此應用程式會開啟 imageFilePath 中指定的本機檔案,並以 Stream 的形式讀取,接著會取得視覺功能和案例頁面中選取的語言。It opens the local file specified in imageFilePath for reading as a Stream, then gets the visual features and language selected in the scenario page. 其會呼叫 ComputerVisionClient.AnalyzeImageInStreamAsync 方法,並傳遞該檔案的 Stream、視覺化功能以及語言,然後傳回做為 ImageAnalysis 執行個體的結果。It calls the ComputerVisionClient.AnalyzeImageInStreamAsync method, passing the Stream for the file, the visual features, and the language, then returns the result as an ImageAnalysis instance. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

AnalyzeUrlAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The AnalyzeUrlAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 其會取得視覺功能和案例頁面中選取的語言,It gets the visual features and language selected in the scenario page. 而且會呼叫 ComputerVisionClient.AnalyzeImageInStreamAsync 方法,並傳遞影像 URL、視覺化功能以及語言,然後傳回做為 ImageAnalysis 執行個體的結果。It calls the ComputerVisionClient.AnalyzeImageInStreamAsync method, passing the image URL, the visual features, and the language, then returns the result as an ImageAnalysis instance. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

探索使用領域模型案例的分析影像Explore the Analyze Image with Domain Model scenario

此案例由 AnalyzeInDomainPage.xaml 頁面管理。This scenario is managed by the AnalyzeInDomainPage.xaml page. 您可以選擇 celebritieslandmarks 等領域模型和語言來執行特定領域的影像分析,並查看影像和結果。You can choose a domain model, such as celebrities or landmarks, and language to perform a domain-specific analysis of the image, and see both the image and the results. 案例頁面會根據影像來源使用下列方法:The scenario page uses the following methods, depending on the source of the image:

  • GetAvailableDomainModelsAsyncGetAvailableDomainModelsAsync
    這個方法會從電腦視覺取得可用的領域模型清單,並使用 ComputerVisionClient.ListModelsAsync 方法在頁面上填入 _domainModelComboBox ComboBox 控制項。This method gets the list of available domain models from Computer Vision and populates the _domainModelComboBox ComboBox control on the page, using the ComputerVisionClient.ListModelsAsync method.
  • UploadAndAnalyzeInDomainImageAsyncUploadAndAnalyzeInDomainImageAsync
    此方法適用於本機影像,其中影像必須編碼成 Stream,並藉由呼叫 ComputerVisionClient.AnalyzeImageByDomainInStreamAsync 方法傳送到電腦視覺。This method is used for local images, in which the image must be encoded as a Stream and sent to Computer Vision by calling the ComputerVisionClient.AnalyzeImageByDomainInStreamAsync method.
  • AnalyzeInDomainUrlAsyncAnalyzeInDomainUrlAsync
    此方法適用於遠端影像,會藉由呼叫 ComputerVisionClient.AnalyzeImageByDomainAsync 方法,將影像的 URL 傳送到電腦視覺。This method is used for remote images, in which the URL for the image is sent to Computer Vision by calling the ComputerVisionClient.AnalyzeImageByDomainAsync method.

UploadAndAnalyzeInDomainImageAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The UploadAndAnalyzeInDomainImageAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 由於範例應用程式正在分析本機影像,因此必須將該影像的內容傳送至電腦視覺。Because the sample app is analyzing a local image, it has to send the contents of that image to Computer Vision. 此應用程式會開啟 imageFilePath 中指定的本機檔案,並以 Stream 的形式讀取,接著會取得在案例頁面中選取的語言。It opens the local file specified in imageFilePath for reading as a Stream, then gets the language selected in the scenario page. 其會呼叫 ComputerVisionClient.AnalyzeImageByDomainInStreamAsync 方法,並傳遞該檔案的 Stream、領域模型名稱以及語言,然後傳回做為 DomainModelResults 執行個體的結果。It calls the ComputerVisionClient.AnalyzeImageByDomainInStreamAsync method, passing the Stream for the file, the name of the domain model, and the language, then returns the result as an DomainModelResults instance. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

AnalyzeInDomainUrlAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The AnalyzeInDomainUrlAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 其會取得在案例頁面中選取的語言,It gets the language selected in the scenario page. 而且會呼叫 ComputerVisionClient.AnalyzeImageByDomainAsync 方法,並傳遞影像 URL、視覺化功能以及語言,然後傳回做為 DomainModelResults 執行個體的結果。It calls the ComputerVisionClient.AnalyzeImageByDomainAsync method, passing the image URL, the visual features, and the language, then returns the result as an DomainModelResults instance. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

探索描述影像案例Explore the Describe Image scenario

此案例由 DescribePage.xaml 頁面管理。This scenario is managed by the DescribePage.xaml page. 您可以選擇一種語言來建立一般人可理解的影像描述,並查看影像和結果。You can choose a language to create a human-readable description of the image, and see both the image and the results. 案例頁面會根據影像來源使用下列方法:The scenario page uses the following methods, depending on the source of the image:

  • UploadAndDescribeImageAsyncUploadAndDescribeImageAsync
    此方法適用於本機影像,其中影像必須編碼成 Stream,並藉由呼叫 ComputerVisionClient.DescribeImageInStreamAsync 方法傳送到電腦視覺。This method is used for local images, in which the image must be encoded as a Stream and sent to Computer Vision by calling the ComputerVisionClient.DescribeImageInStreamAsync method.
  • DescribeUrlAsyncDescribeUrlAsync
    此方法適用於遠端影像,會藉由呼叫 ComputerVisionClient.DescribeImageAsync 方法,將影像的 URL 傳送到電腦視覺。This method is used for remote images, in which the URL for the image is sent to Computer Vision by calling the ComputerVisionClient.DescribeImageAsync method.

UploadAndDescribeImageAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The UploadAndDescribeImageAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 由於範例應用程式正在分析本機影像,因此必須將該影像的內容傳送至電腦視覺。Because the sample app is analyzing a local image, it has to send the contents of that image to Computer Vision. 此應用程式會開啟 imageFilePath 中指定的本機檔案,並以 Stream 的形式讀取,接著會取得在案例頁面中選取的語言。It opens the local file specified in imageFilePath for reading as a Stream, then gets the language selected in the scenario page. 其會呼叫 ComputerVisionClient.DescribeImageInStreamAsync 方法,並傳遞該檔案的 Stream、候選項目數量上限 (本案例中為 3) 以及語言,然後傳回做為 ImageDescription 執行個體的結果。It calls the ComputerVisionClient.DescribeImageInStreamAsync method, passing the Stream for the file, the maximum number of candidates (in this case, 3), and the language, then returns the result as an ImageDescription instance. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

DescribeUrlAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The DescribeUrlAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 其會取得在案例頁面中選取的語言,It gets the language selected in the scenario page. 而且會呼叫 ComputerVisionClient.DescribeImageAsync 方法,並傳遞影像 URL、候選項目數量上限 (本案例中為 3) 以及語言,然後傳回做為 ImageDescription 執行個體的結果。It calls the ComputerVisionClient.DescribeImageAsync method, passing the image URL, the maximum number of candidates (in this case, 3), and the language, then returns the result as an ImageDescription instance. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

探索產生標籤案例Explore the Generate Tags scenario

此案例由 TagsPage.xaml 頁面管理。This scenario is managed by the TagsPage.xaml page. 您可以選擇要標記影像視覺功能的語言,並查看影像及結果。You can choose a language to tag the visual features of an image, and see both the image and the results. 案例頁面會根據影像來源使用下列方法:The scenario page uses the following methods, depending on the source of the image:

  • UploadAndGetTagsForImageAsyncUploadAndGetTagsForImageAsync
    此方法適用於本機影像,其中影像必須編碼成 Stream,並藉由呼叫 ComputerVisionClient.TagImageInStreamAsync 方法傳送到電腦視覺。This method is used for local images, in which the image must be encoded as a Stream and sent to Computer Vision by calling the ComputerVisionClient.TagImageInStreamAsync method.
  • GenerateTagsForUrlAsyncGenerateTagsForUrlAsync
    此方法適用於遠端影像,會藉由呼叫 ComputerVisionClient.TagImageAsync 方法,將影像的 URL 傳送到電腦視覺。This method is used for remote images, in which the URL for the image is sent to Computer Vision by calling the ComputerVisionClient.TagImageAsync method.

UploadAndGetTagsForImageAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The UploadAndGetTagsForImageAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 由於範例應用程式正在分析本機影像,因此必須將該影像的內容傳送至電腦視覺。Because the sample app is analyzing a local image, it has to send the contents of that image to Computer Vision. 此應用程式會開啟 imageFilePath 中指定的本機檔案,並以 Stream 的形式讀取,接著會取得在案例頁面中選取的語言。It opens the local file specified in imageFilePath for reading as a Stream, then gets the language selected in the scenario page. 其會呼叫 ComputerVisionClient.TagImageInStreamAsync 方法,並傳遞該檔案的 Stream 和語言,然後傳回做為 TagResult 執行個體的結果。It calls the ComputerVisionClient.TagImageInStreamAsync method, passing the Stream for the file and the language, then returns the result as a TagResult instance. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

GenerateTagsForUrlAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The GenerateTagsForUrlAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 其會取得在案例頁面中選取的語言,It gets the language selected in the scenario page. 而且會呼叫 ComputerVisionClient.TagImageAsync 方法,並傳遞影像 URL 和語言,然後傳回做為 TagResult 執行個體的結果。It calls the ComputerVisionClient.TagImageAsync method, passing the image URL and the language, then returns the result as a TagResult instance. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

探索辨識文字 (OCR) 案例Explore the Recognize Text (OCR) scenario

此案例由 OCRPage.xaml 頁面管理。This scenario is managed by the OCRPage.xaml page. 您可以選擇一種語言來辨識和擷取影像中的列印文字,並查看影像及結果。You can choose a language to recognize and extract printed text from an image, and see both the image and the results. 案例頁面會根據影像來源使用下列方法:The scenario page uses the following methods, depending on the source of the image:

  • UploadAndRecognizeImageAsyncUploadAndRecognizeImageAsync
    此方法適用於本機影像,其中影像必須編碼成 Stream,並藉由呼叫 ComputerVisionClient.RecognizePrintedTextInStreamAsync 方法傳送到電腦視覺。This method is used for local images, in which the image must be encoded as a Stream and sent to Computer Vision by calling the ComputerVisionClient.RecognizePrintedTextInStreamAsync method.
  • RecognizeUrlAsyncRecognizeUrlAsync
    此方法適用於遠端影像,會藉由呼叫 ComputerVisionClient.RecognizePrintedTextAsync 方法,將影像的 URL 傳送到電腦視覺。This method is used for remote images, in which the URL for the image is sent to Computer Vision by calling the ComputerVisionClient.RecognizePrintedTextAsync method.

UploadAndRecognizeImageAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The UploadAndRecognizeImageAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 由於範例應用程式正在分析本機影像,因此必須將該影像的內容傳送至電腦視覺。Because the sample app is analyzing a local image, it has to send the contents of that image to Computer Vision. 此應用程式會開啟 imageFilePath 中指定的本機檔案,並以 Stream 的形式讀取,接著會取得在案例頁面中選取的語言。It opens the local file specified in imageFilePath for reading as a Stream, then gets the language selected in the scenario page. 其會呼叫 ComputerVisionClient.RecognizePrintedTextInStreamAsync 方法,並說明偵測不到方向及傳遞該檔案的 Stream 和語言,然後傳回做為 OcrResult 執行個體的結果。It calls the ComputerVisionClient.RecognizePrintedTextInStreamAsync method, indicating that orientation is not detected and passing the Stream for the file and the language, then returns the result as an OcrResult instance. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

RecognizeUrlAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The RecognizeUrlAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 其會取得在案例頁面中選取的語言,It gets the language selected in the scenario page. 而且會呼叫 ComputerVisionClient.RecognizePrintedTextAsync 方法,並說明偵測不到方向及傳遞影像 URL 和語言,然後傳回做為 OcrResult 執行個體的結果。It calls the ComputerVisionClient.RecognizePrintedTextAsync method, indicating that orientation is not detected and passing the image URL and the language, then returns the result as an OcrResult instance. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

探索辨識文字 V2 (英文) 案例Explore the Recognize Text V2 (English) scenario

此案例由 TextRecognitionPage.xaml 頁面管理。This scenario is managed by the TextRecognitionPage.xaml page. 您可以選擇辨識模式和語言,以非同步方式辨識和擷取影像的列印或手寫文字,並查看影像和結果。You can choose the recognition mode and a language to asynchronously recognize and extract either printed or handwritten text from an image, and see both the image and the results. 案例頁面會根據影像來源使用下列方法:The scenario page uses the following methods, depending on the source of the image:

  • UploadAndRecognizeImageAsyncUploadAndRecognizeImageAsync
    此方法適用於本機影像,其中影像必須編碼成 Stream,並藉由呼叫 RecognizeAsync 方法及傳遞 ComputerVisionClient.RecognizeTextInStreamAsync 方法的參數化委派,傳送到電腦視覺。This method is used for local images, in which the image must be encoded as a Stream and sent to Computer Vision by calling the RecognizeAsync method and passing a parameterized delegate for the ComputerVisionClient.RecognizeTextInStreamAsync method.
  • RecognizeUrlAsyncRecognizeUrlAsync
    此方法適用於遠端影像,其中藉由呼叫 RecognizeAsync 方法及傳遞 ComputerVisionClient.RecognizeTextAsync 方法的參數化委派,將影像的 URL 傳送到電腦視覺。This method is used for remote images, in which the URL for the image is sent to Computer Vision by calling the RecognizeAsync method and passing a parameterized delegate for the ComputerVisionClient.RecognizeTextAsync method.
  • RecognizeAsync 此方法會處理 UploadAndRecognizeImageAsyncRecognizeUrlAsync 方法的非同步呼叫,並且藉由呼叫 ComputerVisionClient.GetTextOperationResultAsync 方法的方式輪詢結果。RecognizeAsync This method handles the asynchronous calling for both the UploadAndRecognizeImageAsync and RecognizeUrlAsync methods, as well as polling for results by calling the ComputerVisionClient.GetTextOperationResultAsync method.

和電腦視覺範例應用程式內的其他案例不同,此案例屬於非同步,會呼叫一項方法來啟動流程,但是也會呼叫其他方法來檢查狀態並傳回流程結果。Unlike the other scenarios included in the Computer Vision sample app, this scenario is asynchronous, in that one method is called to start the process, but a different method is called to check on the status and return the results of that process. 此案例中的邏輯流程和其他案例的流程稍有不同。The logical flow in this scenario is somewhat different from that in the other scenarios.

UploadAndRecognizeImageAsync 方法會開啟 imageFilePath 中指定的本機檔案,並以 Stream 的形式讀取,然後呼叫 RecognizeAsync 方法,並傳遞:The UploadAndRecognizeImageAsync method opens the local file specified in imageFilePath for reading as a Stream, then calls the RecognizeAsync method, passing:

  • ComputerVisionClient.RecognizeTextInStreamAsync 方法的參數化非同步委派所適用的 Lambda 運算式,以及檔案的 Stream 和在 GetHeadersAsyncFunc 中做為參數的辨識模式。A lambda expression for a parameterized asynchronous delegate of the ComputerVisionClient.RecognizeTextInStreamAsync method, with the Stream for the file and the recognition mode as parameters, in GetHeadersAsyncFunc.
  • 委派的 Lambda 運算式,用來取得 GetOperationUrlFunc 中的 Operation-Location 回應標頭值。A lambda expression for a delegate to get the Operation-Location response header value, in GetOperationUrlFunc.

RecognizeUrlAsync 方法會呼叫 RecognizeAsync 方法,並傳遞:The RecognizeUrlAsync method calls the RecognizeAsync method, passing:

  • ComputerVisionClient.RecognizeTextAsync 方法的參數化非同步委派所適用的 Lambda 運算式,以及遠端影像的 URL 和在 GetHeadersAsyncFunc 中做為參數的辨識模式。A lambda expression for a parameterized asynchronous delegate of the ComputerVisionClient.RecognizeTextAsync method, with the URL of the remote image and the recognition mode as parameters, in GetHeadersAsyncFunc.
  • 委派的 Lambda 運算式,用來取得 GetOperationUrlFunc 中的 Operation-Location 回應標頭值。A lambda expression for a delegate to get the Operation-Location response header value, in GetOperationUrlFunc.

RecognizeAsync 方法完成時,UploadAndRecognizeImageAsyncRecognizeUrlAsync 方法都會傳回做為 TextOperationResult 執行個體的結果。When the RecognizeAsync method is completed, both UploadAndRecognizeImageAsync and RecognizeUrlAsync methods return the result as a TextOperationResult instance. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

RecognizeAsync 方法會呼叫在 GetHeadersAsyncFunc 中傳遞的 ComputerVisionClient.RecognizeTextInStreamAsyncComputerVisionClient.RecognizeTextAsync 方法適用的參數化委派,並等候回應。The RecognizeAsync method calls the parameterized delegate for either the ComputerVisionClient.RecognizeTextInStreamAsync or ComputerVisionClient.RecognizeTextAsync method passed in GetHeadersAsyncFunc and waits for the response. 此方法接著會呼叫在 GetOperationUrlFunc 中傳遞的委派,以便取得該回應中的 Operation-Location 回應標頭值。The method then calls the delegate passed in GetOperationUrlFunc to get the Operation-Location response header value from the response. 這個值是 URL,用來從電腦視覺擷取 GetHeadersAsyncFunc 中傳遞的方法結果。This value is the URL used to retrieve the results of the method passed in GetHeadersAsyncFunc from Computer Vision.

RecognizeAsync 方法接著會呼叫 ComputerVisionClient.GetTextOperationResultAsync 方法,並傳遞擷取自 Operation-Location 回應標頭的 URL,以取得 GetHeadersAsyncFunc 中傳遞的方法狀態和結果。The RecognizeAsync method then calls the ComputerVisionClient.GetTextOperationResultAsync method, passing the URL retrieved from the Operation-Location response header, to get the status and result of the method passed in GetHeadersAsyncFunc. 如果此狀態未說明該方法是否已完成 (無論成功或失敗),RecognizeAsync 方法會再呼叫 ComputerVisionClient.GetTextOperationResultAsync 3 次,各次呼叫之間間隔 3 秒。If the status doesn't indicate that the method completed, successfully or unsuccessfully, the RecognizeAsync method calls ComputerVisionClient.GetTextOperationResultAsync 3 more times, waiting 3 seconds between calls. RecognizeAsync 方法會將結果傳回到呼叫它的方法。The RecognizeAsync method returns the results to the method that called it.

探索取得縮圖案例Explore the Get Thumbnail scenario

此案例由 ThumbnailPage.xaml 頁面管理。This scenario is managed by the ThumbnailPage.xaml page. 您可以表示是否要使用智慧裁剪,並指定所需的高度和寬度來產生影像縮圖,並查看影像和結果。You can indicate whether to use smart cropping, and specify desired height and width, to generate a thumbnail from an image, and see both the image and the results. 案例頁面會根據影像來源使用下列方法:The scenario page uses the following methods, depending on the source of the image:

  • UploadAndThumbnailImageAsyncUploadAndThumbnailImageAsync
    此方法適用於本機影像,其中影像必須編碼成 Stream,並藉由呼叫 ComputerVisionClient.GenerateThumbnailInStreamAsync 方法傳送到電腦視覺。This method is used for local images, in which the image must be encoded as a Stream and sent to Computer Vision by calling the ComputerVisionClient.GenerateThumbnailInStreamAsync method.
  • ThumbnailUrlAsyncThumbnailUrlAsync
    此方法適用於遠端影像,會藉由呼叫 ComputerVisionClient.GenerateThumbnailAsync 方法,將影像的 URL 傳送到電腦視覺。This method is used for remote images, in which the URL for the image is sent to Computer Vision by calling the ComputerVisionClient.GenerateThumbnailAsync method.

UploadAndThumbnailImageAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The UploadAndThumbnailImageAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 由於範例應用程式正在分析本機影像,因此必須將該影像的內容傳送至電腦視覺。Because the sample app is analyzing a local image, it has to send the contents of that image to Computer Vision. 其會開啟 imageFilePath 中指定的本機檔案,並以 Stream 的形式讀取,It opens the local file specified in imageFilePath for reading as a Stream. 而且會呼叫 ComputerVisionClient.GenerateThumbnailInStreamAsync 方法,並傳遞寬度、高度、檔案的 Stream,以及是否要使用智慧裁剪,然後傳回做為 Stream 的結果。It calls the ComputerVisionClient.GenerateThumbnailInStreamAsync method, passing the width, height, the Stream for the file, and whether to use smart cropping, then returns the result as a Stream. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

RecognizeUrlAsync 方法會使用指定的訂用帳戶金鑰和端點 URL 建立新的 ComputerVisionClient 執行個體。The RecognizeUrlAsync method creates a new ComputerVisionClient instance, using the specified subscription key and endpoint URL. 而且會呼叫 ComputerVisionClient.GenerateThumbnailAsync 方法,並傳遞寬度、高度、檔案的 URL,以及是否要使用智慧裁剪,然後傳回做為 Stream 的結果。It calls the ComputerVisionClient.GenerateThumbnailAsync method, passing the width, height, the URL for the image, and whether to use smart cropping, then returns the result as a Stream. 這些繼承自 ImageScenarioPage 類別的方法會呈現案例頁面中傳回的結果。The methods inherited from the ImageScenarioPage class present the returned results in the scenario page.

清除資源Clean up resources

如果不再需要,請刪除複製 Microsoft/Cognitive-Vision-Windows 存放庫時所儲存的資料夾。When no longer needed, delete the folder into which you cloned the Microsoft/Cognitive-Vision-Windows repository. 如果您選擇使用範例影像,也請刪除複製 Microsoft/Cognitive-Face-Windows 存放庫時所儲存的資料夾。If you opted to use the sample images, also delete the folder into which you cloned the Microsoft/Cognitive-Face-Windows repository.

後續步驟Next steps