使用 IRONOCR

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

更新 2024年一月29日

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

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

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

先决条件

拥有最新版本的 Visual Studio。您可以从以下网址下载链接.
ASP.NET 和 Web 开发工作量。在安装 Visual Studio 时，请选择 ASP.NET 和 Web 开发工作量进行安装，因为本项目需要它。
3.IronOCR C# 库. 我们将使用 IronOCR 将图像数据转换为机器可读文本。您可以直接从以下网站下载 IronOCR 包 .DLL 文件钢铁网站或从NuGet 网站. 从 Visual Studio 中的 NuGet 包管理器下载和安装 IronOCR 是一种更方便的方法。

创建 Blazor 服务器应用程序

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

单击 "创建新项目"，然后从列出的项目模板中选择 "Blazor 服务器应用程序 "。
在 Visual Studio 中创建一个新的 Blazor 服务器应用程序
接下来，为您的项目取一个恰当的名称。在此，我们将其命名为"`BlazorReadText``"。
配置 Blazor 项目
最后，设置附加信息并单击创建。
选择长期支持 .NET Framework 和项目的其他信息
Blazor 服务器应用程序现已创建。现在，在使用 IronOCR 提取图像数据之前，我们需要安装必要的软件包。

添加必要的软件包

Blazor输入文件

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

如何在 Blazor 中从图片读取文本，图 4：安装 BlazorInputFile 软件包

安装 BlazorInputFile 软件包

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

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

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

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

HTML

如何在 Blazor 中从图片读取文本，图 5：从解决方案资源管理器导航到 _Host.cshtml 文件

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

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

@using BlazorInputFile

@using BlazorInputFile

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

VB C#

IronOCR

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

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

如何在 Blazor 中读取图像中的文本，图 6：在 NuGet 软件包管理器中安装 IronOcr 软件包

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

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

@using IronOCR

@using IronOCR

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

VB C#

创建 Blazor UI 组件

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

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

如何在 Blazor 中从图像读取文本，图 7：添加新的 Razor 组件

添加新的 Razor 组件

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

如何在 Blazor 中从图像读取文本，图 8：为 OCR.razor Razor 组件创建 OCR.razor.cs 代码文件

为 "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

VB C#

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

GetText方法使用 IronOCR 来[阅读文本](/csharp/ocr/tutorials/how-to-read-text-from-an-image-in-csharp-net/)从输入的图像。 IronOCR 使用最新的 Tesseract 5 引擎，支持 127 种以上的语言。转换为字节数组的图像将作为[OcrInput](/csharp/ocr/object-reference/api/IronOcr.OcrInput.html)并使用[钢铁魔方](/csharp/ocr/object-reference/api/IronOcr.IronTesseract.html) [阅读](/csharp/ocr/object-reference/api/IronOcr.IronTesseract.html#IronOcr_IronTesseract_Read_IronOcr_OcrInputBase_)方法。 IronOCR 团队开发的IronTesseract` 是 Google 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>

VB C#

在上面的代码中，用户界面包含一个用于选择图像文件的输入文件标签和一个用于显示图像的图像标签。输入框下方有一个按钮，可以触发 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>

HTML

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

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

前台应如下所示：

如何在 Blazor 中读取图像中的文字，图 9：Blazor 服务器应用程序的用户界面

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

让我们上传一张图片并提取文本，以直观地显示输出结果。

如何在 Blazor 中读取图像中的文本，图 10：上传的图像和提取的文本

上传图片和提取文本

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

摘要

本文演示了如何在 Blazor 服务器应用程序中创建一个 Blazor UI Component，并在其背后添加代码，以便从图像中读取文本。 IronOCR 是一个多功能库，可在任何基于 C# 的应用程序中提取文本。它支持最新的 .NET Framework，可以很好地与 Razor 应用程序配合使用。 IronOCR 是一个跨平台库，支持 Windows、Linux 和 macOS、DockerAzure、AWS 和毛伊岛. 此外，IronOCR 使用 Tesseract 的最佳结果提供高准确性，无需任何额外设置。它支持多页帧 TIFF, PDF 文件在翻译过程中，译员必须能够使用 .NET 、Java、Python 或 Node js 等所有流行的图像格式。还可以从图像中读取条形码值.

您也可以试试 IronOCR 的以下功能免费试用. 下载软件库这里.

< 前一页
发票 OCR API（开发者教程）

下一步 >
OCR 收据数据提取（逐步教程）