如何在 Blazor 中從影像中讀取文本

先決條件

1. 擁有最新版本的 Visual Studio。 你可以從這個鏈接下載。
2. ASP.NET 和網絡開發工作負載。 安裝 Visual Studio 時，選擇 ASP.NET 和網絡開發工作負載進行安裝，因為這是此項目所需的。
3. IronOCR C# 庫。 我們將使用 IronOCR 將圖像數據轉換為機器可讀文本。 You can download the IronOCR package .DLL file directly from the Iron website or download it from the NuGet website. 從 Visual Studio 中的 NuGet 程序包管理器下載並安裝 IronOCR 是一種更方便的方法。

創建一個 Blazor 伺服器應用程式

打開 Visual Studio，按照步驟創建一個 Blazor 伺服器應用程式：

1. 點擊創建新項目，然後從列出的項目模板中選擇「Blazor 伺服器應用程式」。

在 Visual Studio 中創建一個新的 Blazor 伺服器應用程式

2. 接下來，適當地為您的項目命名。 在這裡，我們將其命名為 BlazorReadText。

配置 Blazor 項目

3. 最後，設置附加信息並點擊創建。

選擇長期支持的 .NET Framework 和項目的附加信息

Blazor 伺服器應用程式現已創建。 現在，我們需要安裝必要的程序包，然後才可以使用 IronOCR 擷取圖像數據。

添加必要的程序包

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

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

@using BlazorInputFile

@using BlazorInputFile

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

@using IronOCR

@using IronOCR

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

創建 Blazor 用戶界面組件

組件表示一個具有業務邏輯以展現動態行為的用戶界面。 Blazor 使用 Razor 組件來構建其應用程式。這些組件可以嵌套、重用並在項目之間共享。 默認情況下，應用程式中提供了 Counter 和 FetchData 頁面； 出於簡化考量，將其移除。

右鍵單擊 BlazorReadText 應用程式下的 pages 文件夾，然後選擇添加 > Razor 組件。 如果找不到 Razor 組件，請點擊新建項目，然後從 C# 組件中選擇「Razor 組件」。 將組件命名為 "OCR.razor"，然後點擊添加。

添加新的 Razor 組件

一個最佳實踐是將這個 Razor 頁面的代碼與其他類分離。 再次右鍵單擊 pages 文件夾並選擇添加 > 類。 將類的名稱設置為與頁面名稱相同，然後點擊添加。 Blazor 是一個智能框架，它將此類標記為與其同名的頁面共享。

為 OCR.razor Razor 組件創建一個 OCR.razor.cs 代碼文件

現在，讓我們移至實際代碼實施部分，這部分將使用 IronOCR 讀取圖像數據。

Blazor OCR.razor 用戶界面組件源代碼以讀取圖像數據

要在圖像中識別文本，請上傳圖像，將其轉換為二進製數據，然後應用 IronOCR 方法以提取文本。

打開 OCR.razor.cs 類，並寫入以下示例源代碼：

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        // Holds the extracted text from the image
        protected string imageText;

        // Holds the base64 string preview of the image
        protected string imagePreview;

        // Byte array to store uploaded image data
        private byte[] imageFileBytes;

        // Default status message for file upload
        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        // Maximum file size allowed (4MB)
        const int MaxFileSize = 4 * 1024 * 1024;

        // Method to handle image preview and size/type validation
        protected async Task ViewImage(IFileListEntry[] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }

            if (file.Size > 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;
                }
            }
        }
    }
}

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        // Holds the extracted text from the image
        protected string imageText;

        // Holds the base64 string preview of the image
        protected string imagePreview;

        // Byte array to store uploaded image data
        private byte[] imageFileBytes;

        // Default status message for file upload
        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        // Maximum file size allowed (4MB)
        const int MaxFileSize = 4 * 1024 * 1024;

        // Method to handle image preview and size/type validation
        protected async Task ViewImage(IFileListEntry[] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }

            if (file.Size > 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;
                }
            }
        }
    }
}

Imports BlazorInputFile
Imports Microsoft.AspNetCore.Components
Imports IronOcr
Imports System.IO
Imports System.Linq
Imports System.Threading.Tasks

Namespace BlazorReadText.Pages
	Public Class OCRModel
		Inherits ComponentBase

		' Holds the extracted text from the image
		Protected imageText As String

		' Holds the base64 string preview of the image
		Protected imagePreview As String

		' Byte array to store uploaded image data
		Private imageFileBytes() As Byte

		' Default status message for file upload
		Private Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
		Protected status As String = DefaultStatus

		' Maximum file size allowed (4MB)
		Private Const MaxFileSize As Integer = 4 * 1024 * 1024

		' Method to handle image preview and size/type validation
		Protected Async Function ViewImage(ByVal files() As IFileListEntry) As Task
			Dim file = files.FirstOrDefault()
			If file Is Nothing Then
				Return
			End If

			If file.Size > MaxFileSize Then
				status = $"The file size is {file.Size} bytes, which exceeds the allowed limit of {MaxFileSize} bytes."
				Return
			End If

			If Not file.Type.Contains("image") Then
				status = "Please upload a valid image file."
				Return
			End If

			Using memoryStream As New MemoryStream()
				Await file.Data.CopyToAsync(memoryStream)
				imageFileBytes = memoryStream.ToArray()
				Dim base64String As String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length)
				imagePreview = $"data:image/png;base64,{base64String}"
				status = DefaultStatus
			End Using
		End Function

		' Method to extract text from the uploaded image using IronOCR
		Private Protected Async Function GetText() As Task
			If imageFileBytes IsNot Nothing Then
				Using ocr = New IronTesseract()
				Using input = New OcrInput(imageFileBytes)
					Dim result As OcrResult = ocr.Read(input)
					imageText = result.Text
				End Using
				End Using
			End If
		End Function
	End Class
End Namespace

在上述代碼中：

• ViewImage 方法用於處理上傳的圖像文件。它會驗證文件是否為圖像並檢查大小是否符合規定限制。 如果在文件大小或文件類型中出現任何錯誤，則使用 if-else 塊來處理。 然後圖像被複製到 MemoryStream，並轉換為字節數組，因為 IronOcr.OcrInput 可以接受二進制格式的圖像。
• GetText 方法利用 IronOCR 從輸入圖像中提取文本。 IronOCR 使用 Tesseract 5 引擎，支持超過 125 種語言。

提取的文本存儲在 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>

在上述代碼中，用戶界面包括：

• 一個輸入文件標籤，以選擇圖像文件。
• 一個圖像標籤，用於顯示圖像。
• 一個按鈕，用於觸發 GetText 方法。
• 一個文本區域，用於顯示從圖像數據中提取的文本。

添加鏈接到導航菜單

最後，將鏈接添加到 OCR.razor 頁面中共享文件夾下的 NavMenu.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 伺服器應用程式的用戶界面

讓我們上傳一張圖片，然後提取文本以視覺化輸出。

上傳的圖片和提取的文本

輸出文本很乾淨，可以從文本區域中復制。