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

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

在本文中，我们将创建一个 Blazor 服务器应用程序，使用光学字符识别技术从图像文件中读取文本。 (光学字符识别) 使用 IronOCR。

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

先决条件

1.安装最新版本的 Visual Studio。您可以从以下网址下载 链接.

2.ASP.NET 和 Web 开发工作负载。在安装 Visual Studio 时，选择 ASP.NET 和 Web 开发工作负载进行安装，因为本项目需要它。

3. IronOCR C# 库.我们将使用 IronOCR 将图像数据转换为机器可读文本。您可以直接从以下网址下载 IronOCR 软件包 .DLL 文件 钢铁网站 或从 NuGet 网站.从 Visual Studio 中的 NuGet 包管理器下载和安装 IronOCR 是一种更方便的方法。

创建Blazor服务器应用程序

打开 Visual Studio，按照步骤创建 Blazor 服务器应用程序：

1.单击 "创建新项目"，然后从列出的项目模板中选择 "Blazor 服务器应用程序 "。

![如何在 Blazor 中从图像读取文本，图 1：在 Visual Studio 中创建新的 Blazor 服务器应用程序](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-1.webp)

**在Visual Studio中创建一个新的Blazor服务器应用程序**

2.接下来，给项目取一个合适的名字。在这里，我们将其命名为"`BlazorReadText``"。

![如何在 Blazor 中从图片读取文字，图 2：配置 Blazor 项目](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-2.webp)

**配置 Blazor 项目**

3.最后，设置附加信息并单击 "创建"。

![如何在 Blazor 中从图像读取文本，图 3：选择长期支持 .NET 框架和项目的其他信息](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-3.webp)

**选择长期支持 .NET 框架和项目的其他信息**

Blazor 服务器应用程序现已创建。现在，在使用 IronOCR 提取图像数据之前，我们需要安装必要的软件包。

添加必要的软件包

BlazorInputFile

第一步是安装 BlazorInputFile 软件包。它是 Blazor 应用程序的一个组件，用于向服务器上传单个或多个文件。该组件将用于在 Blazor 应用程序的 Razor 页面上传图像文件。打开Manage NuGet Packages for Solutions，浏览 "BlazorInputFile"。

安装BlazorInputFile软件包

选择项目的复选框，然后单击 "安装"。

现在，打开 Pages 文件夹中的 _Host.cshtml 文件，并添加以下 JavaScript 文件：

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

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

从 "解决方案资源管理器 "导航到"_Host.cshtml "文件

最后，在 _Imports.razor 文件中添加以下代码。

@using BlazorInputFile

@using BlazorInputFile

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using BlazorInputFile

IronOCR

IronOCR 是一个 C# 库，用于扫描和读取不同格式的图像。它能处理超过 127 种全球语言的图像。

要安装 IronOCR，请打开 NuGet 软件包管理器并浏览 IronOCR。选择项目并点击安装按钮。

在 NuGet 软件包管理器中安装 IronOcr 软件包

在 _Imports.razor 文件中添加 IronOCR 命名空间：

@using IronOCR

@using IronOCR

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@using IronOCR

创建 Blazor UI 组件

一个组件代表一个带有业务逻辑的用户界面，以展示动态行为。Blazor 使用 Razor 组件构建应用程序。这些组件可以嵌套、重复使用并在项目间共享。默认情况下，应用程序中提供了 "计数器 "和 "FetchData "页面，为简单起见，可移除这些页面。

右键单击BlazorReadText应用程序下的pages文件夹，然后选择添加 > Razor组件。如果没有找到 Razor Component，则点击New Item，然后从 C# 组件中选择 "Razor Component"。将组件命名为 "OCR.razor"，然后点击添加。

添加新的雷泽组件

最佳做法是将该剃刀页面的代码分离到另一个类中。同样，右键单击页面文件夹，选择添加 > 类。将该类命名为与页面名称相同的名称，然后点击添加。Blazor 是一个智能框架，它会将该类与同名页面进行标记。

为 "OCR.razor "Razor 组件创建 "OCR.razor.cs "代码文件

现在，让我们开始使用 IronOCR 读取图像数据的实际代码实现。

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

要识别图像中的文本，请上传图像，将其转换为二进制数据，然后应用 IronOCR 方法提取文本。

打开 OCR.razor.cs 类并编写以下示例源代码：

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        protected string imageText;
        protected string imagePreview;
        byte [] imageFileBytes;

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

        const int MaxFileSize = 4 * 1024 * 1024; // 4MB

        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)
            {
                IronTesseract ocr = new IronTesseract();
                using (OcrInput input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        protected string imageText;
        protected string imagePreview;
        byte [] imageFileBytes;

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

        const int MaxFileSize = 4 * 1024 * 1024; // 4MB

        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)
            {
                IronTesseract ocr = new IronTesseract();
                using (OcrInput input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

Imports BlazorInputFile
Imports Microsoft.AspNetCore.Components
Imports IronOcr

Namespace BlazorReadText.Pages
	Public Class OCRModel
		Inherits ComponentBase

		Protected imageText As String
		Protected imagePreview As String
		Private imageFileBytes() As Byte

		Private Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
		Protected status As String = DefaultStatus

		Private Const MaxFileSize As Integer = 4 * 1024 * 1024 ' 4MB

		Protected Async Function ViewImage(ByVal files() As IFileListEntry) As Task
			Dim file = files.FirstOrDefault()
			If file Is Nothing Then
				Return
			ElseIf file.Size > MaxFileSize Then
				status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes."
				Return
			ElseIf Not file.Type.Contains("image") Then
				status = "Please uplaod a valid image file"
				Return
			Else
				Dim memoryStream As New MemoryStream()
				Await file.Data.CopyToAsync(memoryStream)
				imageFileBytes = memoryStream.ToArray()
				Dim base64String As String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length)

				imagePreview = String.Concat("data:image/png;base64,", base64String)
				memoryStream.Flush()
				status = DefaultStatus
			End If
		End Function

		Private Protected Async Function GetText() As Task
			If imageFileBytes IsNot Nothing Then
				Dim ocr As New IronTesseract()
				Using input As New OcrInput(imageFileBytes)
					Dim result As OcrResult = ocr.Read(input)
					imageText = result.Text
				End Using
			End If
		End Function
	End Class
End Namespace

在上述代码中，"ViewImage "方法用于从输入文件中获取上传文件，并检查其是否为图像且大小小于指定值。如果文件大小或文件类型出现任何错误，if-else 块会进行处理。然后将图像复制到一个 MemoryStream 中。最后，图像会被转换成字节数组，因为 IronOcr.OcrInput 可以接受二进制格式的图像。

GetText "方法使用 IronOCR 阅读文本 从输入图像中提取。IronOCR 使用最新的 Tesseract 5 引擎，支持超过 127 种语言。转换为字节数组的图像以 OcrInput 并使用 钢铁魔方 阅读 方法。IronOCR团队开发的 "IronTesseract "是谷歌Tesseract的扩展版本。欲了解更多信息，请访问 C# Tesseract OCR 示例.

最后，提取的文本会保存在 imageText 变量中，以便显示。该库支持英文文本图像，无需额外配置。您可以在此查看如何使用不同语言。 代码示例页面.

Blazor 前端用户界面组件源代码

现在，创建应用程序的用户界面。打开 OCR.razor 文件并编写以下代码：

@page "/IronOCR"
@inherits OCRModel

<h2>Optical Character Recognition (OCR) Using Blazor and IronOCR Software</h2>

<div class="row">
    <div class="col-md-5">
        <textarea disabled class="form-control" rows="10" cols="15">@imageText</textarea>
    </div>
    <div class="col-md-5">
        <div class="image-container">
            <img class="preview-image" width="800" height="500" src=@imagePreview>
        </div>
        <BlazorInputFile.InputFile OnChange="@ViewImage" />
        <p>@status</p>
        <hr />
        <button class="btn btn-primary btn-lg" @onclick="GetText">
            Extract Text
        </button>
    </div>
</div>

@page "/IronOCR"
@inherits OCRModel

<h2>Optical Character Recognition (OCR) Using Blazor and IronOCR Software</h2>

<div class="row">
    <div class="col-md-5">
        <textarea disabled class="form-control" rows="10" cols="15">@imageText</textarea>
    </div>
    <div class="col-md-5">
        <div class="image-container">
            <img class="preview-image" width="800" height="500" src=@imagePreview>
        </div>
        <BlazorInputFile.InputFile OnChange="@ViewImage" />
        <p>@status</p>
        <hr />
        <button class="btn btn-primary btn-lg" @onclick="GetText">
            Extract Text
        </button>
    </div>
</div>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@page "/IronOCR" @inherits OCRModel <h2> Optical Character Recognition(OCR) @Using Blazor @and IronOCR Software</h2> <div class="row"> <div class="col-md-5"> <textarea disabled class="form-control" rows="10" cols="15"> @imageText</textarea> </div> <div class="col-md-5"> <div class="image-container"> <img class="preview-image" width="800" height="500" src=@imagePreview> </div> <BlazorInputFile.InputFile OnChange="@ViewImage" /> <p> @status</p> <hr /> <button class="btn btn-primary btn-lg" @onclick="GetText"> Extract Text </button> </div> </div>

在上面的代码中，用户界面包含一个用于选择图像文件的输入文件标记和一个用于显示图像的图像标记。输入框下方有一个按钮，用于触发 "GetText "方法。有一个文本区域用于显示从图像数据中提取的文本。

在导航菜单中添加链接

最后，在共享文件夹下的 NavMenu.razor 文件中添加指向 OCR.razor 页面的链接。

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronOCR">
        <span class="oi oi-plus" aria-hidden="true"></span> Read Image Text
    </NavLink>
</div>

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronOCR">
        <span class="oi oi-plus" aria-hidden="true"></span> Read Image Text
    </NavLink>
</div>

删除指向 Counter 和 FetchData 的链接，因为不需要它们。

现在一切都已完成，可以使用了。按 F5 运行应用程序。

前台应如下所示：

Blazor服务器应用程序的用户界面

让我们上传一张图片并提取文本，使输出结果可视化。

上传图像和提取文本

输出文本干净整洁，可从文本区复制。

摘要

本文演示了如何在 Blazor 服务器应用程序中创建一个带有代码的 Blazor UI 组件，以便从图像中读取文本。IronOCR 是一个多功能库，可在任何基于 C# 的应用程序中提取文本。它支持最新的.NET框架，可与Razor应用程序配合使用。IronOCR 是一个跨平台库，支持 Windows、Linux 和 macOS、 DockerAzure、AWS 和 毛伊岛.此外，IronOCR 利用 Tesseract 的最佳结果提供高精度，无需任何额外设置。它支持 多页帧 TIFF, PDF 文件以及所有流行的图像格式。还可以 从图像中读取条形码值.

您还可以尝试使用 IronOCR 免费试用.从以下网址下载软件库 这里.