1. IronOCR
  2. IronOCR博客
  3. 使用 IronOCR
  4. 从图像中读取 Blazor 文本
使用 IRONOCR

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

Kannaopat Udonpant
坎那帕·乌东攀
2023年六月20日
更新 2024年一月29日
分享:

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

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

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

先决条件

  1. 拥有最新版本的 Visual Studio。 您可以从这个链接下载。

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

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

创建 Blazor 服务器应用程序

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

  1. 点击创建一个新项目，然后从列出的项目模板中选择“Blazor Server App”。

    ！如何在Blazor中从图像读取文本，图1：在Visual Studio中创建一个新的Blazor服务器应用程序

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

  2. 接下来，为您的项目取一个恰当的名称。 在这里，我们将其命名为"BlazorReadText"。

    如何在 Blazor 中读取图像中的文字，图2：配置 Blazor 项目

    配置Blazor项目

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

    如何在Blazor中从图像读取文本，图3：选择长期支持的.NET Framework以及项目的附加信息

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

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

添加必要的软件包

BlazorInputFile

第一步是安装BlazorInputFile包。 它是 Blazor 应用程序的一个组件，用于将单个或多个文件上传到服务器。 该组件将用于在 Blazor 应用程序中的 Razor 页面上传图片文件。 打开管理解决方案的 NuGet 包，然后浏览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
$vbLabelText   $csharpLabel

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
$vbLabelText   $csharpLabel

创建 Blazor UI 组件

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

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

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

添加新的 Razor 组件

最佳做法是将该剃刀页面的代码与其他类分开。 再次右键单击 pages 文件夹，然后选择添加 > 类。 将该类命名为与页面名称相同的名称，然后单击添加。 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
$vbLabelText   $csharpLabel

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

GetText 方法使用 IronOCR 从输入图像中读取文本。 IronOCR 使用最新的 Tesseract 5 引擎，支持 127 种以上的语言。 转换后的图像以字节数组形式传递为OcrInput，并使用IronTesseract的Read方法检索结果。 由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>
$vbLabelText   $csharpLabel

在上面的代码中，用户界面包含一个用于选择图像文件的输入文件标签和一个用于显示图像的图像标签。 在输入字段下方有一个按钮，用于触发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、Docker、Azure、AWS 和 MAUI。 此外，IronOCR 使用 Tesseract 的最佳结果提供高准确性，无需任何额外设置。 支持 多页框架 TIFF、PDF 文件以及所有流行的图像格式。 也可以从图像中读取条形码的值。

您还可以在免费试用中免费试用IronOCR。 从这里下载软件库。

Kannaopat Udonpant
坎那帕·乌东攀
  立即与工程团队聊天
软件工程师
在成为软件工程师之前，Kannapat 从日本北海道大学完成了环境资源博士学位。在攻读学位期间，Kannapat 还成为了生物生产工程系车辆机器人实验室的成员。2022年，他利用自己的 C# 技能加入了 Iron Software 的工程团队，专注于 IronPDF。Kannapat 珍视他的工作，因为他能直接向编写 IronPDF 大部分代码的开发者学习。除了同伴学习，Kannapat 还享受在 Iron Software 工作的社交方面。不写代码或文档时，Kannapat 通常在 PS5 上玩游戏或重看《最后生还者》。
< 前一页
发票 OCR API（开发者教程）
下一步 >
OCR 收据数据提取（逐步教程）

报告问题

准备开始了吗？ 版本： 2025.4 刚刚发布

免费开始
NuGet 下载 DLL 下载 Windows 安装程序 开始免费试用
查看许可证 >
Textlogo Iron Suite related to 如何在Blazor中从图像读取文本

IronOCR 是 IRON 的一部分。套装

10 个 .NET API 产品用于您的办公文档

以2个产品的价格获取10个产品   开始免费试用