如何在 Blazor 中从图像中读取文本

Blazor Framework 由 ASP.NET 团队构建，用于使用 HTML 和 C# 代替 JavaScript 开发交互式 UI 网络应用程序。 Blazor 使用 WebAssembly 在网页浏览器中直接运行 C# 代码。 这使得构建和开发具有逻辑性的组件以及重复使用这些组件变得非常容易。 它是开发人员常用的框架，用于用 C# 构建用户界面。

在本文中，我们将使用 IronOCR 创建一个 Blazor Server 应用程序，用于使用光学字符识别（OCR）从图像文件中读取文本。

如何使用 Blazor 中的光学字符识别从图像中读取文本？

前提条件

创建 Blazor 服务器应用程序在 Visual Studio 中创建新的 Blazor 服务器应用程序如何在 Blazor 中从图像读取文本，图 2：配置 Blazor 项目。 配置 Blazor 项目如何在 Blazor 中从图像读取文本，图 3：选择长期支持 .NET Framework 和项目的其他信息。 选择长期支持 .NET Framework 和项目的其他信息添加必要的软件包<代码>BlazorInputFile如何在 Blazor 中从图像读取文本，图 4：安装 BlazorInputFile 软件包。 **安装 `BlazorInputFile` 软件包**。 选择项目的复选框，然后单击安装。 现在，打开 Pages 文件夹中的 `_Host.cshtml` 文件，并添加以下 JavaScript 文件： ```html ``` !a href="/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-5.webp">如何在 Blazor 中从图像读取文本，图 5：从解决方案资源管理器导航到 _Host.cshtml 文件。 **从解决方案资源管理器导航到 `_Host.cshtml` 文件**。 最后，在 `_Imports.razor` 文件中添加以下代码。 ```csharp @using BlazorInputFile ``` #### IronOCR。 IronOCR 是一个 C# 库，用于扫描和读取不同格式的图像。 它提供了处理超过 125 种全球语言图像的功能。 要安装 IronOCR，请打开 NuGet 软件包管理器并浏览 IronOCR。 选择项目并点击 **安装**按钮。 !a href="/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-6.webp">如何在 Blazor 中从图像读取文本，图 6：在 NuGet 包管理器中安装 IronOcr 包。 **在 NuGet 软件包管理器中安装 IronOcr 软件包**。 在 `_Imports.razor` 文件中添加 IronOCR 命名空间： ```csharp @using IronOCR ```

创建 Blazor UI 组件

**Razor Component**。 如果找不到 Razor Component，请点击 **新建项目**，然后从 C# 组件中选择 "Razor Component"。 将组件命名为 "OCR.razor"，然后单击 "添加"。 !a href="/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-7.webp">如何在 Blazor 中从图像读取文本，图 7：添加新的 Razor 组件。 添加新的 Razor 组件 **Class**。 将该类命名为与页面名称相同的名称，然后单击添加。 Blazor 是一个智能框架，它会将这个类与同名的页面进行标记。 !a href="/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-8.webp">如何在 Blazor 中从图像读取文本，图 8：为 OCR.razor Razor 组件创建 OCR.razor.cs 代码文件。 **为 `OCR.razor` Razor 组件创建 `OCR.razor.cs` 代码文件**。 现在，让我们进入使用 IronOCR 读取图像数据的实际代码实现。

读取图像数据的 Blazor OCR.razor UI 组件源代码

MaxFileSize) { status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes."; return; } if (!file.Type.Contains("image")) { status = "Please upload a valid image file."; return; } using (var memoryStream = new MemoryStream()) { await file.Data.CopyToAsync(memoryStream); imageFileBytes = memoryStream.ToArray(); string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length); imagePreview = $"data:image/png;base64,{base64String}"; status = DefaultStatus; } } // Method to extract text from the uploaded image using IronOCR protected private async Task GetText() { if (imageFileBytes != null) { using (var ocr = new IronTesseract()) using (var input = new OcrInput(imageFileBytes)) { OcrResult result = ocr.Read(input); imageText = result.Text; } } } } } ``` 在上述代码中 - `ViewImage` 方法用于处理上传的图像文件。它会验证文件是否为图像，并检查大小是否符合指定的限制。 如果文件大小或文件类型出现任何错误，将使用 `if-else` 块进行处理。 然后将图像复制到 `MemoryStream` 中，并转换为字节数组，因为 `IronOcr.OcrInput` 可以接受二进制格式的图像。 - `GetText` 方法利用 IronOCR 从输入图像中提取文本。 IronOCR 采用 Tesseract 5 引擎，支持 125 多种语言。 提取的文本将存储在 `imageText` 变量中，以便显示。 该库支持英文文本图像，无需额外配置。 您可以在[代码示例页面](/csharp/ocr/examples/intl-languages/)了解更多有关使用不同语言的信息。

Blazor 前端 UI 组件源代码

Optical Character Recognition (OCR) Using Blazor and IronOCR Software ``` 在上面的代码中，用户界面包括 - 输入文件标签，用于选择图像文件。 - 显示图片的图片标签。 - 触发 `GetText` 方法的按钮。 - 文本区域用于显示从图像数据中提取的文本。

在导航菜单中添加链接

Read Image Text