angular过滤字符_如何使用Angular和Azure计算机视觉创建光学字符读取器

angular过滤字符

介绍 (Introduction)

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

在本文中，我们将使用Angular和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. The application will extract the text from the image and detects the language of the text.

Computer Vision是一项AI服务，可以分析图像中的内容。我们将使用Computer Vision的OCR功能来检测图像中的打印文本。该应用程序将从图像中提取文本并检测文本的语言。

Currently, the OCR API supports 25 languages.

当前，OCR API支持25种语言。

先决条件 (Prerequisites)

Install the latest LTS version of Node.JS from https://nodejs.org/en/download/
从https://nodejs.org/en/download/安装最新的LTS版本的Node.JS
Install the Angular CLI from https://cli.angular.io/
从https://cli.angular.io/安装Angular CLI
Install the .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帐户

源代码 (Source Code)

You can get the source code from GitHub.

您可以从GitHub获取源代码。

We will use an ASP.NET Core backend for this application. The ASP.NET Core backend provides a straight forward authentication process to access Azure cognitive services. This will also ensure that the end-user won’t have direct access to cognitive services.

我们将为此应用程序使用ASP.NET Core后端。 ASP.NET Core后端提供了直接的身份验证过程，以访问Azure认知服务。这还将确保最终用户不会直接访问认知服务。

创建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。为了保护隐私，此处将这些值屏蔽。

创建ASP.NET Core应用程序 (Creating the ASP.NET Core application)

Open Visual Studio 2019 and click on “Create a new Project”. A “Create a new Project” dialog will open. Select “ASP.NET Core Web Application” and click on Next. Now you will be at “Configure your new project” screen, provide the name for your application as ngComputerVision and click on create. Refer to the image shown below.

打开Visual Studio 2019，然后单击``创建新项目''。将打开一个“创建新项目”对话框。选择“ ASP.NET Core Web应用程序”，然后单击“下一步”。现在，您将在“配置新项目”屏幕上，将应用程序的名称提供为ngComputerVision ，然后单击“创建”。请参考下图。

You will be navigated to “Create a new ASP.NET Core web application” screen. Select “.NET Core” and “ASP.NET Core 3.1” from the dropdowns on the top. Then, select the “Angular” project template and click on Create. Refer to the image shown below.

您将被导航到“创建新的ASP.NET Core Web应用程序”屏幕。从顶部的下拉菜单中选择“ .NET Core”和“ ASP.NET Core 3.1”。然后，选择“ Angular”项目模板，然后单击Create 。请参考下图。

This will create our project. The folder structure of the application is shown below.

这将创建我们的项目。该应用程序的文件夹结构如下所示。

The ClientApp folder contains the Angular code for our application. The Controllers folders will contain our API controllers. The angular components are present inside the ClientApp\src\app folder.

ClientApp文件夹包含我们应用程序的Angular代码。 Controllers文件夹将包含我们的API控制器。角度分量位于ClientApp\src\app文件夹内。

The default template contains a few Angular components. These components won’t affect our application, but for the sake of simplicity, we will delete fetchdata and counter folders from ClientApp/app/components folder. Also, remove the reference for these two components from the app.module.ts file.

默认模板包含一些Angular组件。这些组件不会影响我们的应用程序，但是为了简单起见，我们将从ClientApp/app/components文件夹中删除fetchdata和counter文件夹。另外，从app.module.ts文件中删除对这两个组件的app.module.ts 。

安装计算机视觉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. 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.

我们将安装Azure Computer Vision API库，该库将为我们提供现成的模型来处理Computer Vision REST API响应。要安装软件包，请导航至工具>> 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 ngComputerVision 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.

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

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

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

namespace ngComputerVision.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 ngComputerVision.Models
{public class AvailableLanguage{public Dictionary<string, LanguageDetails> Translation { get; set; }}
}

We will also add two classes as DTO (Data Transfer Object) for sending data back to the client.

我们还将添加两个类作为DTO(数据传输对象)，用于将数据发送回客户端。

Create a new folder and name it DTOModels. Add the new class file AvailableLanguageDTO.cs in the DTOModels folder and put the following code inside it.

创建一个新文件夹并将其命名为DTOModels。在DTOModels文件夹中添加新的类文件AvailableLanguageDTO.cs ，并将以下代码放入其中。

namespace ngComputerVision.DTOModels
{public class AvailableLanguageDTO{public string LanguageID { get; set; }public string LanguageName { get; set; }}
}

Add the OcrResultDTO.cs file and put the following code inside it.

添加OcrResultDTO.cs文件，并将以下代码放入其中。

namespace ngComputerVision.DTOModels
{public class OcrResultDTO{public string Language { get; set; }public string DetectedText { get; set; }}
}

添加OCR控制器 (Adding the OCR Controller)

We will add a new controller to our application. Right-click on the Controllers folder and select Add >> New Item. An “Add New Item” dialog box will open. Select “Visual C#” from the left panel, then select “API Controller Class” from templates panel and put the name as OCRController.cs. Click on Add.

我们将向我们的应用程序添加一个新的控制器。右键单击Controllers文件夹，然后选择Add >> New Item。 “添加新项”对话框将打开。从左侧面板中选择“ Visual C＃”，然后从模板面板中选择“ API Controller Class”，并将名称命名为OCRController.cs 。点击添加。

Refer to the image below.

请参考下图。

The OCRController will handle the image recognition requests from the client app. This controller will also return the list of all the languages supported by OCR API.

OCRController将处理来自客户端应用程序的图像识别请求。该控制器还将返回OCR API支持的所有语言的列表。

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

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

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using System.Net.Http;
using System.Net.Http.Headers;
using Newtonsoft.Json.Linq;
using System.IO;
using Newtonsoft.Json;
using System.Text;
using ngComputerVision.Models;
using System.Collections.Generic;
using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;
using ngComputerVision.DTOModels;namespace ngComputerVision.Controllers
{[Produces("application/json")][Route("api/[controller]")]public class OCRController : Controller{static string subscriptionKey;static string endpoint;static string uriBase;public OCRController(){subscriptionKey = "b993f3afb4e04119bd8ed37171d4ec71";endpoint = "https://ankitocrdemo.cognitiveservices.azure.com/";uriBase = endpoint + "vision/v2.1/ocr";}[HttpPost, DisableRequestSizeLimit]public async Task<OcrResultDTO> Post(){StringBuilder sb = new StringBuilder();OcrResultDTO ocrResultDTO = new OcrResultDTO();try{if (Request.Form.Files.Count > 0){var file = Request.Form.Files[Request.Form.Files.Count - 1];if (file.Length > 0){var memoryStream = new MemoryStream();file.CopyTo(memoryStream);byte[] imageFileBytes = memoryStream.ToArray();memoryStream.Flush();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;}}[HttpGet]public async Task<List<AvailableLanguageDTO>> 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);List<AvailableLanguageDTO> availableLanguage = new List<AvailableLanguageDTO>();foreach (KeyValuePair<string, LanguageDetails> translation in deserializedOutput.Translation){AvailableLanguageDTO language = new AvailableLanguageDTO();language.LanguageID = translation.Key;language.LanguageName = translation.Value.Name;availableLanguage.Add(language);}return availableLanguage;}}}
}

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

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

The Post method will receive the image data as a file collection in the request body and return an object of type OcrResultDTO. We will convert the image data to a byte array and invoke the ReadTextFromStream method. We will deserialize the response into an object of type OcrResult. We will then form the sentence by iterating over the OcrWord object.

Post方法将在请求正文中将图像数据作为文件集合接收，并返回OcrResultDTO类型的对象。我们将图像数据转换为字节数组，然后调用ReadTextFromStream方法。我们将反序列化为OcrResult类型的对象。然后，我们将通过遍历OcrWord对象形成句子。

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 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 URI will return a JSON object which will be deserialized to an object of type AvailableLanguage.

GetAvailableLanguages方法将返回翻译文本API支持的所有语言的列表。我们将设置请求URI并创建一个HttpRequestMessage ，它将是一个Get请求。该请求URI将返回一个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. These languages are a subset of the languages supported by the Azure Translate Text API.

Azure计算机视觉OCR API支持25种语言。要了解OCR API支持的所有语言，请参阅支持的语言列表。这些语言是Azure Translate Text API支持的语言的子集。

Since there is no dedicated API endpoint to fetch the list of languages supported by OCR API, we are using the Translate Text API endpoint to fetch the list of languages. 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端点来获取OCR API支持的语言列表，因此我们使用翻译文本API端点来获取语言列表。我们将使用来自此API调用的JSON响应来创建语言查找字典，并根据OCR API返回的语言代码过滤结果。

在应用程序的客户端上工作 (Working on the Client side of the application)

The code for the client-side is available in the ClientApp folder. We will use Angular CLI to work with the client code.

客户端的代码可在ClientApp文件夹中找到。我们将使用Angular CLI来处理客户端代码。

Using Angular CLI is not mandatory. I am using Angular CLI here as it is user-friendly and easy to use. If you don’t want to use CLI then you can create the files for components and services manually.

使用Angular CLI不是强制性的。我在这里使用Angular CLI，因为它易于使用且易于使用。如果您不想使用CLI，则可以手动创建组件和服务的文件。

Navigate to the ngComputerVision\ClientApp folder in your machine and open a command window. We will execute all our Angular CLI commands in this window.

导航到计算机中的ngComputerVision \ ClientApp文件夹，然后打开一个命令窗口。我们将在此窗口中执行所有Angular CLI命令。

创建客户端模型 (Create the client-side models)

Create a folder called models inside the ClientApp\src\app folder. Now we will create a file availablelanguage.ts in the models folder. Put the following code in it.

在ClientApp\src\app文件夹内创建一个名为models的文件夹。现在，我们将在models文件夹中创建一个文件availablelanguage.ts 。将以下代码放入其中。

export class AvailableLanguage {languageID: string;languageName: string;
}

Similarly, create another file inside the models folder called ocrresult.ts. Put the following code in it.

同样，在models文件夹内创建另一个文件ocrresult.ts 。将以下代码放入其中。

export class OcrResult {language: string;detectedText: string
}

You can observe that both these classes have the same definition as the DTO classes we created on the server-side. This will allow us to bind the data returned from the server directly to our models.

您可以观察到这两个类与我们在服务器端创建的DTO类具有相同的定义。这将使我们能够将从服务器返回的数据直接绑定到我们的模型。

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

We will create an Angular service which will invoke the Web API endpoints, convert the Web API response to JSON and pass it to our component. Run the following command.

我们将创建一个Angular服务，该服务将调用Web API端点，将Web API响应转换为JSON并将其传递给我们的组件。运行以下命令。

ng g s services\Computervision

This command will create a folder name as services and then create the following two files inside it.

此命令将创建一个文件夹名称作为服务，然后在其中创建以下两个文件。

computervision.service.ts — the service class file.
computervision.service.ts —服务类文件。
computervision.service.spec.ts — the unit test file for service.
computervision.service.spec.ts-服务的单元测试文件。

Open computervision.service.ts file and put the following code inside it.

打开computervision.service.ts文件，并将以下代码放入其中。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';@Injectable({providedIn: 'root'
})
export class ComputervisionService {baseURL: string;constructor(private http: HttpClient) {this.baseURL = '/api/OCR';}getAvailableLanguage() {return this.http.get(this.baseURL).pipe(response => {return response;});}getTextFromImage(image: FormData) {return this.http.post(this.baseURL, image).pipe(response => {return response;});}
}

We have defined a variable baseURL which will hold the endpoint URL of our API. We will initialize the baseURL in the constructor and set it to the endpoint of the OCRController.

我们定义了一个变量baseURL，它将保存我们API的端点URL。我们将在构造函数中初始化baseURL并将其设置为OCRController的端点。

The getAvailableLanguage method will send a Get request to the GetAvailableLanguages method of the OCRController to fetch the list of supported languages for OCR.

该getAvailableLanguage方法会发送一个GET请求到GetAvailableLanguages的方法OCRController获取用于OCR支持的语言列表。

The getTextFromImage method will send a Post request to the OCRController and supply the parameter of type FormData. It will fetch the detected text from the image and language code of the text.

getTextFromImage方法将向OCRController发送一个Post请求，并提供FormData类型的参数。它将从图像和文本的语言代码中获取检测到的文本。

创建Ocr组件 (Create the Ocr component)

Run the following command in the command prompt to create the OcrComponent.

在命令提示符下运行以下命令以创建OcrComponent 。

ng g c ocr --module app

The --module flag will ensure that this component will get registered at app.module.ts.

--module标志将确保此组件将在app.module.ts注册。

Open ocr.component.html and put the following code in it.

打开ocr.component.html并将以下代码放入其中。

<h2>Optical Character Recognition (OCR) using Angular and Azure Computer Vision Cognitive Services</h2><div class="row"><div class="col-md-5"><textarea disabled class="form-control" rows="10" cols="15">{{ocrResult?.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><input type="file" (change)="uploadImage($event)" /><p>{{status}}</p><hr /><button [disabled]="loading" class="btn btn-primary btn-lg" (click)="GetText()"><span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>Extract Text</button></div>
</div>

We have defined a text area to display the detected text and a text box for displaying the detected language. We have defined a file upload control which will allow us to upload an image. After uploading the image, the preview of the image will be displayed using an <img> element.

我们定义了一个文本区域来显示检测到的文本，并定义一个文本框来显示检测到的语言。我们定义了一个文件上传控件，它将允许我们上传图像。上载图像后，将使用<img>元素显示图像的预览。

Open ocr.component.ts and put the following code in it.

打开ocr.component.ts并将以下代码放入其中。

import { Component, OnInit } from '@angular/core';
import { ComputervisionService } from '../services/computervision.service';
import { AvailableLanguage } from '../models/availablelanguage';
import { OcrResult } from '../models/ocrresult';@Component({selector: 'app-ocr',templateUrl: './ocr.component.html',styleUrls: ['./ocr.component.css']
})
export class OcrComponent implements OnInit {loading = false;imageFile;imagePreview;imageData = new FormData();availableLanguage: AvailableLanguage[];DetectedTextLanguage: string;ocrResult: OcrResult;DefaultStatus: string;status: string;maxFileSize: number;isValidFile = true;constructor(private computervisionService: ComputervisionService) {this.DefaultStatus = "Maximum size allowed for the image is 4 MB";this.status = this.DefaultStatus;this.maxFileSize = 4 * 1024 * 1024; // 4MB}ngOnInit() {this.computervisionService.getAvailableLanguage().subscribe((result: AvailableLanguage[]) => this.availableLanguage = result);}uploadImage(event) {this.imageFile = event.target.files[0];if (this.imageFile.size > this.maxFileSize) {this.status = `The file size is ${this.imageFile.size} bytes, this is more than the allowed limit of ${this.maxFileSize} bytes.`;this.isValidFile = false;} else if (this.imageFile.type.indexOf('image') == -1) {this.status = "Please upload a valid image file";this.isValidFile = false;} else {const reader = new FileReader();reader.readAsDataURL(event.target.files[0]);reader.onload = () => {this.imagePreview = reader.result;};this.status = this.DefaultStatus;this.isValidFile = true;}}GetText() {if (this.isValidFile) {this.loading = true;this.imageData.append('imageFile', this.imageFile);this.computervisionService.getTextFromImage(this.imageData).subscribe((result: OcrResult) => {this.ocrResult = result;if (this.availableLanguage.find(x => x.languageID === this.ocrResult.language)) {this.DetectedTextLanguage = this.availableLanguage.find(x => x.languageID === this.ocrResult.language).languageName;} else {this.DetectedTextLanguage = "unknown";}this.loading = false;});}}
}

We will inject the ComputervisionService in the constructor of the OcrComponent and set a message and the value for the max image size allowed inside the constructor.

我们将把ComputervisionService注入OcrComponent的构造函数中，并设置一条消息和该构造函数中允许的最大图像大小的值。

We will invoke the getAvailableLanguage method of our service in the ngOnInit and store the result in an array of type AvailableLanguage.

我们将在ngOnInit调用服务的getAvailableLanguage方法，并将结果存储在AvailableLanguage类型的数组中。

The uploadImage method will be invoked upon uploading an image. We will check if the uploaded file is a valid image and within the allowed size limit. We will process the image data using a FileReader object. The readAsDataURL method will read the contents of the uploaded file.

上传图像后将调用uploadImage方法。我们将检查上传的文件是否为有效图像，并且是否在允许的大小限制内。我们将使用FileReader对象处理图像数据。 readAsDataURL方法将读取上载文件的内容。

Upon successful completion of the read operation, the reader.onload event will be triggered. The value of imagePreview will be set to the result returned by the fileReader object, which is of type ArrayBuffer.

成功完成读取操作后，将触发reader.onload事件。 imagePreview的值将设置为imagePreview对象返回的结果，该对象的类型为ArrayBuffer 。

Inside the GetText method, we will append the image file to a variable for type FormData. We will invoke the getTextFromImage of the service and bind the result to an object of type OcrResult. We will search for the language name from the array availableLanguage, based on the language code returned from the service. If the language code is not found, we will set the language as unknown.

在GetText方法内部，我们将图像文件追加到FormData类型的变量中。我们将调用服务的getTextFromImage并将结果绑定到OcrResult类型的对象。我们将根据服务返回的语言代码从availableLanguage数组中搜索语言名称。如果找不到语言代码，我们会将语言设置为未知。

We will add the styling for the text area in ocr.component.css as shown below.

我们将在ocr.component.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;
}

We will add the navigation links for our components in the nav menu. Open nav-menu.component.html and remove the links for Counter and Fetch data components. Add the following lines in the list of navigation links.

我们将在导航菜单中添加组件的导航链接。打开nav-menu.component.html并删除“计数器”和“获取”数据组件的链接。在导航链接列表中添加以下行。

<li class="nav-item" [routerLinkActive]="['link-active']"><a class="nav-link text-dark" routerLink='/computer-vision-ocr'>Computer Vision</a>
</li>

执行演示 (Execution Demo)

Press F5 to launch the application. Click on the Computer Vision button on the nav menu at the top. You can upload an image and extract the text from the image as shown in the image below.

按F5启动应用程序。单击顶部导航菜单上的“计算机视觉”按钮。您可以上传图像并从图像中提取文本，如下图所示。

摘要 (Summary)

We have created an optical character recognition (OCR) application using Angular and the Computer Vision Azure Cognitive Service. 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.

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

I just released a free eBook on Angular and Firebase. You can download the free book from Build a Full-Stack Web Application Using Angular & Firebase

我刚刚发布了有关Angular和Firebase的免费电子书。您可以从使用Angular和Firebase构建全栈Web应用程序中下载免费书籍

也可以看看 (See Also)

Template-Driven Form Validation In Angular
Angular中模板驱动的表单验证
Reactive Form Validation In Angular
Angular的React形式验证
Continuous Deployment For Angular App Using Heroku And GitHub
使用Heroku和GitHub持续部署Angular App
Policy-Based Authorization In Angular Using JWT
使用JWT在Angular中基于策略的授权
Optical Character Reader Using Blazor And Computer Vision
使用Blazor和计算机视觉的光学字符读取器

If you like the article, share with you friends. You can also connect with me on Twitter and LinkedIn.

如果您喜欢这篇文章，请与您的朋友分享。您也可以在Twitter和LinkedIn上与我联系。

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