azure创建centos_如何使用Blazor和Azure计算机视觉创建光学字符读取器

最新推荐文章于 2021-04-13 08:00:00 发布

cumian9828

最新推荐文章于 2021-04-13 08:00:00 发布

阅读量347

点赞数

文章标签： java python .net js html ViewUI

原文链接：https://www.freecodecamp.org/news/how-to-create-an-optical-character-reader-using-blazor-and-azure-computer-vision/

版权

azure创建centos

介绍 (Introduction)

In this article, we will create an optical character recognition (OCR) application using Blazor and the Azure Computer Vision Cognitive Service.

在本文中，我们将使用Blazor和Azure计算机视觉认知服务来创建光学字符识别(OCR)应用程序。

Computer Vision is an AI service that analyzes content in images. We will use the OCR feature of Computer Vision to detect the printed text in an image.

Computer Vision是一项AI服务，可以分析图像中的内容。我们将使用Computer Vision的OCR功能来检测图像中的打印文本。

The application will extract the text from the image and detects the language of the text. Currently, the OCR API supports 25 languages.

该应用程序将从图像中提取文本并检测文本的语言。当前，OCR API支持25种语言。

A demo of the application is shown below.

该应用程序的演示如下所示。

先决条件 (Prerequisites)

Install the latest .NET Core 3.1 SDK from https://dotnet.microsoft.com/download/dotnet-core/3.1
从https://dotnet.microsoft.com/download/dotnet-core/3.1安装最新的.NET Core 3.1 SDK
Install the latest version of Visual Studio 2019 from https://visualstudio.microsoft.com/downloads/
从https://visualstudio.microsoft.com/downloads/安装最新版本的Visual Studio 2019
An Azure subscription account. You can create a free Azure account at https://azure.microsoft.com/en-in/free/
Azure订阅帐户。您可以在https://azure.microsoft.com/en-in/free/创建一个免费的Azure帐户

图片要求 (Image requirements)

The OCR API will work on images that meet the requirements as mentioned below:

OCR API将在满足以下要求的图像上工作：

The format of the image must be JPEG, PNG, GIF, or BMP.
图像格式必须为JPEG，PNG，GIF或BMP。
The size of the image must be between 50 x 50 and 4200 x 4200 pixels.
图片大小必须介于50 x 50和4200 x 4200像素之间。
The image file size should be less than 4 MB.
图像文件大小应小于4 MB。
The text in the image can be rotated by any multiple of 90 degrees plus a small angle of up to 40 degrees.
图像中的文本可以旋转90度的任意倍数加上最多40度的小角度。

源代码 (Source Code)

You can get the source code from GitHub.

您可以从GitHub获取源代码。

创建Azure计算机视觉认知服务资源 (Create the Azure Computer Vision Cognitive Service resource)

Log in to the Azure portal and search for the cognitive services in the search bar and click on the result. Refer to the image shown below.

登录到Azure门户，然后在搜索栏中搜索认知服务，然后单击结果。请参考下图。

On the next screen, click on the Add button. It will open the cognitive services marketplace page.

在下一个屏幕上，单击添加按钮。它将打开认知服务市场页面。

Search for the Computer Vision in the search bar and click on the search result. It will open the Computer Vision API page. Click on the Create button to create a new Computer Vision resource. Refer to the image shown below.

在搜索栏中搜索“计算机视觉”，然后单击搜索结果。它将打开“计算机视觉API”页面。单击创建按钮以创建新的计算机视觉资源。请参考下图。

On the Create page, fill in the details as indicated below.

在“创建”页面上，如下所示填写详细信息。

Name: Give a unique name for your resource.
名称：为资源指定一个唯一的名称。
Subscription: Select the subscription type from the dropdown.
订阅：从下拉列表中选择订阅类型。
Pricing tier: Select the pricing tier as per your choice.
定价层 ：根据您的选择选择定价层。
Resource group: Select an existing resource group or create a new one.
资源组 ：选择一个现有资源组或创建一个新的资源组。

Click on the Create button. Refer to the image shown below.

单击创建按钮。请参考下图。

After your resource is successfully deployed, click on the “Go to resource” button. You can see the Key and the endpoint for the newly created Computer Vision resource. Refer to the image shown below.

成功部署资源后，单击“转到资源”按钮。您可以看到新创建的计算机视觉资源的密钥和端点。请参考下图。

Make a note of the key and the endpoint. We will be using these in the latter part of this article to invoke the Computer Vision OCR API from the .NET Code. The values are masked here for privacy.

记下密钥和端点。在本文的后半部分，我们将使用它们来从.NET代码中调用Computer Vision OCR API。为了保护隐私，此处将这些值屏蔽。

创建服务器端Blazor应用程序 (Create a Server-Side Blazor Application)

Open Visual Studio 2019, click on “Create a new project”. Select “Blazor App” and click on the “Next” button. Refer to the image shown below.

打开Visual Studio 2019，单击“创建新项目”。选择“ Blazor App”，然后单击“下一步”按钮。请参考下图。

On the next window, put the project name as BlazorComputerVision and click on the “Create” button.

在下一个窗口中，将项目名称命名为BlazorComputerVision ，然后单击“创建”按钮。

The next window will ask you to select the type of Blazor app. Select Blazor Server App and click on the Create button to create a new server-side Blazor application. Refer to the image shown below.

下一个窗口将要求您选择Blazor应用程序的类型。选择Blazor Server App ，然后单击Create按钮创建一个新的服务器端Blazor应用程序。请参考下图。

安装计算机视觉API库 (Installing Computer Vision API library)

We will install the Azure Computer Vision API library which will provide us with the models out of the box to handle the Computer Vision REST API response.

我们将安装Azure Computer Vision API库，该库将为我们提供现成的模型来处理Computer Vision REST API响应。

To install the package, navigate to Tools >> NuGet Package Manager >> Package Manager Console. It will open the Package Manager Console. Run the command as shown below.

要安装软件包，请导航至工具>> NuGet软件包管理器>>软件包管理器控制台。它将打开软件包管理器控制台。运行如下所示的命令。

Install-Package Microsoft.Azure.CognitiveServices.Vision.ComputerVision -Version 5.0.0

You can learn more about this package at the NuGet gallery.

您可以在NuGet画廊中了解有关此软件包的更多信息。

创建模型 (Create the Models)

Right-click on the BlazorComputerVision project and select Add >> New Folder. Name the folder as Models. Again, right-click on the Models folder and select Add >> Class to add a new class file. Put the name of your class as LanguageDetails.cs and click Add.

右键单击BlazorComputerVision项目，然后选择添加>>新建文件夹。将该文件夹命名为Models 。再次右键单击Models文件夹，然后选择Add >> Class添加新的类文件。将类的名称输入LanguageDetails.cs ，然后单击“添加”。

Open LanguageDetails.cs and put the following code inside it.

打开LanguageDetails.cs并将以下代码放入其中。

namespace BlazorComputerVision.Models
{
    public class LanguageDetails
    {
        public string Name { get; set; }
        public string NativeName { get; set; }
        public string Dir { get; set; }
    }
}

Similarly, add a new class file AvailableLanguage.cs and put the following code inside it.

同样，添加一个新的类文件AvailableLanguage.cs并将以下代码放入其中。

using System.Collections.Generic;

namespace BlazorComputerVision.Models
{
    public class AvailableLanguage
    {
        public Dictionary<string, LanguageDetails> Translation { get; set; }
    }
}

Finally, we will add a class as DTO (Data Transfer Object) for sending data back to the client. Add a new class file OcrResultDTO.cs and put the following code inside it.

最后，我们将添加一个类作为DTO(数据传输对象)，用于将数据发送回客户端。添加一个新的类文件OcrResultDTO.cs并将以下代码放入其中。

namespace BlazorComputerVision.Models
{
    public class OcrResultDTO
    {
        public string Language { get; set; }

        public string DetectedText { get; set; }
    }
}

创建计算机视觉服务 (Create the Computer Vision Service)

Right-click on the BlazorComputerVision/Data folder and select Add >> Class to add a new class file. Put the name of the file as ComputerVisionService.cs and click on Add.

右键单击BlazorComputerVision/Data文件夹，然后选择添加>>类以添加新的类文件。将文件名命名为ComputerVisionService.cs ，然后单击“添加”。

Open the ComputerVisionService.cs file and put the following code inside it.

打开ComputerVisionService.cs文件，并将以下代码放入其中。

using BlazorComputerVision.Models;
using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;

namespace BlazorComputerVision.Data
{
    public class ComputerVisionService
    {
        static string subscriptionKey;
        static string endpoint;
        static string uriBase;

        public ComputerVisionService()
        {
            subscriptionKey = "b993f3afb4e04119bd8ed37171d4ec71";
            endpoint = "https://ankitocrdemo.cognitiveservices.azure.com/";
            uriBase = endpoint + "vision/v2.1/ocr";
        }

        public async Task<OcrResultDTO> GetTextFromImage(byte[] imageFileBytes)
        {
            StringBuilder sb = new StringBuilder();
            OcrResultDTO ocrResultDTO = new OcrResultDTO();
            try
            {
                string JSONResult = await ReadTextFromStream(imageFileBytes);

                OcrResult ocrResult = JsonConvert.DeserializeObject<OcrResult>(JSONResult);

                if (!ocrResult.Language.Equals("unk"))
                {
                    foreach (OcrLine ocrLine in ocrResult.Regions[0].Lines)
                    {
                        foreach (OcrWord ocrWord in ocrLine.Words)
                        {
                            sb.Append(ocrWord.Text);
                            sb.Append(' ');
                        }
                        sb.AppendLine();
                    }
                }
                else
                {
                    sb.Append("This language is not supported.");
                }
                ocrResultDTO.DetectedText = sb.ToString();
                ocrResultDTO.Language = ocrResult.Language;
                return ocrResultDTO;
            }
            catch
            {
                ocrResultDTO.DetectedText = "Error occurred. Try again";
                ocrResultDTO.Language = "unk";
                return ocrResultDTO;
            }
        }

        static async Task<string> ReadTextFromStream(byte[] byteData)
        {
            try
            {
                HttpClient client = new HttpClient();
                client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", subscriptionKey);
                string requestParameters = "language=unk&detectOrientation=true";
                string uri = uriBase + "?" + requestParameters;
                HttpResponseMessage response;

                using (ByteArrayContent content = new ByteArrayContent(byteData))
                {
                    content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
                    response = await client.PostAsync(uri, content);
                }

                string contentString = await response.Content.ReadAsStringAsync();
                string result = JToken.Parse(contentString).ToString();
                return result;
            }
            catch (Exception e)
            {
                return e.Message;
            }
        }

        public async Task<AvailableLanguage> GetAvailableLanguages()
        {
            string endpoint = "https://api.cognitive.microsofttranslator.com/languages?api-version=3.0&scope=translation";
            var client = new HttpClient();
            using (var request = new HttpRequestMessage())
            {
                request.Method = HttpMethod.Get;
                request.RequestUri = new Uri(endpoint);
                var response = await client.SendAsync(request).ConfigureAwait(false);
                string result = await response.Content.ReadAsStringAsync();

                AvailableLanguage deserializedOutput = JsonConvert.DeserializeObject<AvailableLanguage>(result);

                return deserializedOutput;
            }
        }
    }
}

In the constructor of the class, we have initialized the key and the endpoint URL for the OCR API.

在该类的构造函数中，我们已经初始化了OCR API的键和端点URL。

Inside the ReadTextFromStream method, we will create a new HttpRequestMessage. This HTTP request is a Post request. We will pass the subscription key in the header of the request. The OCR API will return a JSON object having each word from the image as well as the detected language of the text.

在ReadTextFromStream方法内部，我们将创建一个新的HttpRequestMessage 。这个HTTP请求是一个Post请求。我们将在请求的标头中传递订阅密钥。 OCR API将返回一个JSON对象，其中包含图像中的每个单词以及检测到的文本语言。

The GetTextFromImage method will accept the image data as a byte array and returns an object of type OcrResultDTO. We will invoke the ReadTextFromStream method and deserialize the response into an object of type OcrResult. We will then form the sentence by iterating over the OcrWord object.

GetTextFromImage方法将图像数据作为字节数组接受，并返回OcrResultDTO类型的对象。我们将调用ReadTextFromStream方法并将响应反序列化为OcrResult类型的对象。然后，我们将通过遍历OcrWord对象形成句子。

The GetAvailableLanguages method will return the list of all the language supported by the Translate Text API. We will set the request URI and create a HttpRequestMessage which will be a Get request. This request URL will return a JSON object which will be deserialized to an object of type AvailableLanguage.

GetAvailableLanguages方法将返回翻译文本API支持的所有语言的列表。我们将设置请求URI并创建一个HttpRequestMessage ，它将是一个Get请求。此请求URL将返回一个JSON对象，该对象将反序列化为AvailableLanguage类型的对象。

为什么我们需要获取支持的语言列表？ (Why do we need to fetch the list of supported languages?)

The OCR API returns the language code (e.g. en for English, de for German, etc.) of the detected language. But we cannot display the language code on the UI as it is not user-friendly. Therefore, we need a dictionary to look up the language name corresponding to the language code.

OCR API返回检测到的语言的语言代码(例如，en表示英语，de表示德语等)。但是我们不能在用户界面上显示语言代码，因为它不友好。因此，我们需要一个字典来查找与语言代码相对应的语言名称。

The Azure Computer Vision OCR API supports 25 languages. To know all the languages supported by OCR API see the list of supported languages.

Azure计算机视觉OCR API支持25种语言。要了解OCR API支持的所有语言，请参阅支持的语言列表。

These languages are a subset of the languages supported by the Azure Translate Text API. Since there is no dedicated API endpoint to fetch the list of languages supported by OCR API, therefore, we are using the Translate Text API endpoint to fetch the list of languages.

这些语言是Azure Translate Text API支持的语言的子集。由于没有专用的API端点来获取OCR API支持的语言列表，因此，我们使用翻译文本API端点来获取语言列表。

We will create the language lookup dictionary using the JSON response from this API call and filter the result based on the language code returned by the OCR API.

我们将使用来自此API调用的JSON响应来创建语言查找字典，并根据OCR API返回的语言代码过滤结果。

安装BlazorInputFile NuGet软件包 (Install BlazorInputFile NuGet package)

BlazorInputFile is a file input component for Blazor applications. It provides the ability to upload single or multiple files to a Blazor app.

BlazorInputFile是Blazor应用程序的文件输入组件。它提供了将单个或多个文件上传到Blazor应用程序的功能。

Open BlazorComputerVision.csproj file and add a dependency for the BlazorInputFile package as shown below:

打开BlazorComputerVision.csproj文件，并为BlazorInputFile包添加依赖BlazorInputFile ，如下所示：

<ItemGroup>
    <PackageReference Include="BlazorInputFile" Version="0.1.0-preview-00002" />
</ItemGroup>

Open BlazorComputerVision\Pages\_Host.cshtml file and add the reference for the package’s JavaScript file by adding the following line in the <head> section.

打开BlazorComputerVision\Pages\_Host.cshtml文件，并通过在<head>部分中添加以下行来添加程序包JavaScript文件的引用。

<script src="_content/BlazorInputFile/inputfile.js"></script>

Add the following line in the _Imports.razor file.

在_Imports.razor文件中添加以下行。

@using BlazorInputFile

配置服务 (Configuring the Service)

To make the service available to the components we need to configure it on the server-side app. Open the Startup.cs file. Add the following line inside the ConfigureServices method of Startup class.

为了使该服务可用于组件，我们需要在服务器端应用程序上对其进行配置。打开Startup.cs文件。在Startup类的ConfigureServices方法内添加以下行。

services.AddSingleton<ComputerVisionService>();

创建Blazor UI组件 (Creating the Blazor UI Component)

We will add the Razor page in the BlazorComputerVision/Pages folder. By default, we have “Counter” and “Fetch Data” pages provided in our application. These default pages will not affect our application but for the sake of this tutorial, we will delete fetchdata and counter pages from BlazorComputerVision/Pages folder.

我们将在BlazorComputerVision/Pages文件夹中添加Razor页面。默认情况下，我们的应用程序中提供了“计数器”和“获取数据”页面。这些默认页面不会影响我们的应用程序，但是出于本教程的考虑，我们将从BlazorComputerVision/Pages文件夹中删除fetchdata和计数器页面。

Right-click on the BlazorComputerVision/Pages folder and then select Add >> New Item. An “Add New Item” dialog box will open, select “Visual C#” from the left panel, then select “Razor Component” from the templates panel, put the name as OCR.razor. Click Add. Refer to the image shown below.

右键单击BlazorComputerVision/Pages文件夹，然后选择添加>>新建项目。将打开一个“添加新项”对话框，从左侧面板中选择“ Visual C＃”，然后从模板面板中选择“ Razor Component”，并将名称命名为OCR.razor 。单击添加。请参考下图。

We will add a code-behind file for this razor page to keep the code and presentation separate. This will allow easy maintenance for the application.

我们将为此剃刀页面添加一个代码隐藏文件，以使代码和演示文稿分开。这将使应用程序易于维护。

Right-click on the BlazorComputerVision/Pages folder and then select Add >> Class. Name the class as OCR.razor.cs. The Blazor framework is smart enough to tag this class file to the razor file. Refer to the image shown below.

右键单击BlazorComputerVision/Pages文件夹，然后选择添加>>类。将该类命名为OCR.razor.cs 。 Blazor框架足够聪明，可以将此类文件标记为razor文件。请参考下图。

Blazor UI组件代码背后 (Blazor UI component code behind)

Open the OCR.razor.cs file and put the following code inside it.

打开OCR.razor.cs文件，并将以下代码放入其中。

using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.IO;
using BlazorComputerVision.Models;
using BlazorInputFile;
using BlazorComputerVision.Data;

namespace BlazorComputerVision.Pages
{
    public class OCRModel : ComponentBase
    {
        [Inject]
        protected ComputerVisionService computerVisionService { get; set; }

        protected string DetectedTextLanguage;
        protected string imagePreview;
        protected bool loading = false;
        byte[] imageFileBytes;

        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        protected OcrResultDTO Result = new OcrResultDTO();
        private AvailableLanguage availableLanguages;
        private Dictionary<string, LanguageDetails> LanguageList = new Dictionary<string, LanguageDetails>();
        const int MaxFileSize = 4 * 1024 * 1024; // 4MB

        protected override async Task OnInitializedAsync()
        {
            availableLanguages = await computerVisionService.GetAvailableLanguages();
            LanguageList = availableLanguages.Translation;
        }

        protected async Task ViewImage(IFileListEntry[] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }
            else if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes.";
                return;
            }
            else if (!file.Type.Contains("image"))
            {
                status = "Please uplaod a valid image file";
                return;
            }
            else
            {
                var memoryStream = new MemoryStream();
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);

                imagePreview = string.Concat("data:image/png;base64,", base64String);
                memoryStream.Flush();
                status = DefaultStatus;
            }
        }

        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                loading = true;
                Result = await computerVisionService.GetTextFromImage(imageFileBytes);
                if (LanguageList.ContainsKey(Result.Language))
                {
                    DetectedTextLanguage = LanguageList[Result.Language].Name;
                }
                else
                {
                    DetectedTextLanguage = "Unknown";
                }
                loading = false;
            }
        }
    }
}

We are injecting the ComputerVisionService in this class.

我们将在此类中注入ComputerVisionService 。

The OnInitializedAsync is a Blazor lifecycle method which is invoked when the component is initialized. We are invoking the GetAvailableLanguages method from our service inside the OnInitializedAsync method. We will then initialize the variable LanguageList which is a dictionary to hold the details of available languages.

OnInitializedAsync是Blazor生命周期方法，在初始化组件时会调用该方法。我们正在OnInitializedAsync方法中从服务中调用GetAvailableLanguages方法。然后，我们将初始化变量LanguageList，这是一个字典，用于保存可用语言的详细信息。

Inside the ViewImage method, we will check if the uploaded file is an image only and the size is less than 4 MB. We will transfer the uploaded image to the memory stream. We will then convert that memory stream to a byte array.

在ViewImage方法内部，我们将检查上传的文件是否仅为图像并且大小小于4 MB。我们会将上传的图像传输到内存流。然后，我们将该内存流转换为字节数组。

To set the image preview, we will convert the image from byte array to a base64 encoded string. The GetText method will invoke the GetTextFromImage method from the service and pass the image byte array as an argument. We will search for the language name from the dictionary based on the language code returned from the service. If no language code is available, we will set the language as unknown.

要设置图像预览，我们将图像从字节数组转换为base64编码的字符串。 GetText方法将从服务中调用GetTextFromImage方法，并将图像字节数组作为参数传递。我们将根据服务返回的语言代码从词典中搜索语言名称。如果没有可用的语言代码，我们会将语言设置为未知。

Blazor UI组件模板 (Blazor UI component template)

Open the OCR.razor file and put the following code inside it.

打开OCR.razor文件，并将以下代码放入其中。

@page "/computer-vision-ocr"
@inherits OCRModel

<h2>Optical Character Recognition (OCR) Using Blazor and Azure Computer Vision Cognitive Service</h2>

<div class="row">
    <div class="col-md-5">
        <textarea disabled class="form-control" rows="10" cols="15">@Result.DetectedText</textarea>
        <hr />
        <div class="row">
            <div class="col-sm-5">
                <label><strong> Detected Language :</strong></label>
            </div>
            <div class="col-sm-6">
                <input disabled type="text" class="form-control" value="@DetectedTextLanguage" />
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="image-container">
            <img class="preview-image" src=@imagePreview>
        </div>
        <InputFile OnChange="ViewImage" />
        <p>@status</p>
        <hr />
        <button disabled="@loading" class="btn btn-primary btn-lg" @onclick="GetText">
            @if (loading)
            {
                <span class="spinner-border spinner-border-sm mr-1"></span>
            }
            Extract Text
        </button>
    </div>
</div>

We have defined the route for this component. We have inherited the OCRModel class which allows us to access the properties and method of this class from the template. Bootstrap is used for designing the UI. We have a text area to display the detected text and a text box to display the detected language. The image tag is used to show the image preview after uploading the image. The <InputFile> component will allow us to upload an image file and invoke the ViewImage method as we upload the image.

我们已经定义了该组件的路由。我们继承了OCRModel类，该类允许我们从模板访问此类的属性和方法。 Bootstrap用于设计UI。我们有一个文本区域显示检测到的文本，并有一个文本框显示检测到的语言。 image标签用于显示上传图像后的图像预览。 <InputFile>组件将允许我们上载图像文件并在上载图像时调用ViewImage方法。

为组件添加样式 (Add styling for the component)

Navigate to BlazorComputerVision\wwwroot\css\site.css file and add the following style definition inside it.

导航到BlazorComputerVision\wwwroot\css\site.css文件，并在其中添加以下样式定义。

.preview-image {
    max-height: 300px;
    max-width: 300px;
}
.image-container {
    display: flex;
    padding: 15px;
    align-content: center;
    align-items: center;
    justify-content: center;
    border: 2px dashed skyblue;
}

The last step is to add the link of our OCR component in the navigation menu. Open BlazorComputerVision/Shared/NavMenu.razor file and add the following code into it.

最后一步是在导航菜单中添加OCR组件的链接。打开BlazorComputerVision/Shared/NavMenu.razor文件，并将以下代码添加到其中。

<li class="nav-item px-3">
	<NavLink class="nav-link" href="computer-vision-ocr">
		<span class="oi oi-list-rich" aria-hidden="true"></span> Computer Vision
	</NavLink>
</li>

Remove the navigation links for Counter and Fetch-data components as they are not required for this application.

删除Counter和Fetch-data组件的导航链接，因为此应用程序不需要它们。

执行演示 (Execution Demo)

Press F5 to launch the application. Click on the Computer Vision button on the nav menu on the left. On the next page, upload an image with some text in it and click on the “Extract Text” button. You will see the extracted text in the text area on the left along with the detected language for the text. Refer to the image shown below.

按F5启动应用程序。单击左侧导航菜单上的“计算机视觉”按钮。在下一页上，上传包含一些文本的图像，然后单击“提取文本”按钮。您将在左侧的文本区域中看到提取的文本以及检测到的文本语言。请参考下图。

Now we will try to upload an image with some French text on it, you can see the extracted text and the detected language as French. Refer to the image shown below.

现在，我们将尝试上传带有法语文本的图像，您可以看到提取的文本和检测到的语言为法语。请参考下图。

If we try to upload an image with an unsupported language, we will get the error. Refer to the image shown below where an image with text written in Hindi is uploaded.

如果我们尝试使用不支持的语言上传图像，则会收到错误消息。请参考下图所示的图像，该图像上载有印地语文字的图像。

摘要 (Summary)

We have created an optical character recognition (OCR) application using Blazor and the Computer Vision Azure Cognitive Service. We have added the feature of uploading an image file using the BlazorInputFile component. The application is able to extract the printed text from the uploaded image and recognizes the language of the text. The OCR API of the Computer Vision is used which can recognize text in 25 languages.

我们使用Blazor和Computer Vision Azure认知服务创建了光学字符识别(OCR)应用程序。我们添加了使用BlazorInputFile组件上传图像文件的功能。该应用程序能够从上载的图像中提取打印的文本，并识别文本的语言。使用了Computer Vision的OCR API，它可以识别25种语言的文本。

Get the Source code from GitHub and play around to get a better understanding.

从GitHub获取源代码并四处游玩以获得更好的理解。

也可以看看 (See Also)

翻译自: https://www.freecodecamp.org/news/how-to-create-an-optical-character-reader-using-blazor-and-azure-computer-vision/

azure创建centos

cumian9828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
azure创建centos_如何使用Blazor和Azure计算机视觉创建光学字符读取器

azure创建centos 介绍 (Introduction)In this article, we will create an optical character recognition (OCR) application using Blazor and the Azure Computer Vision Cognitive Service. 在本文中，我们将使用Blazor和Azure...
复制链接

扫一扫