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

先決條件

1. 準備最新版的 Visual Studio。 您可以從這個連結下載。
2. ASP.NET 和 Web 開發工作負載。 安裝 Visual Studio 時，選擇安裝 ASP.NET 和 Web 開發工作負載，這是專案所需的。
3. IronOCR C# Library. 我們將使用 IronOCR 將影像資料轉換為機器可讀文字。 您可以從 Iron 網站直接下載 IronOCR 套件 .DLL 文件或從 NuGet 網站下載。 從 NuGet 套件管理器中下載和安裝 IronOCR 是更便捷的方法。

建立 Blazor Server 應用程式

開啟 Visual Studio，並按照以下步驟创建 Blazor Server 應用程式：

1. 按下"建立一個新專案"，然後從列出的專案模板中選擇"Blazor Server App"。

   在 Visual Studio 中建立一個新的 Blazor Server 應用程式

2. 接下來，適當地命名您的專案。 在這裡，我們命名它為 BlazorReadText。

   配置 Blazor 專案

3.最後，設置附加資訊並按下"建立"。

選擇長期支援 .NET Framework和專案的其他資訊

現在 Blazor Server 應用程式已建立。 現在我們需要在使用 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 UI 元件

一個元件代表著具有業務邏輯的使用者介面，以表現動態行為。 Blazor 使用 Razor 元件來構建應用程式。這些元件可以巢狀、重複使用，並在專案之間共享。 預設情況下，應用程式中已提供 Counter 和 FetchData 頁面； 移除它們以簡化。

在 BlazorReadText 應用程式下的 pages 資料夾上按下右鍵，然後選擇 新增 > Razor 元件。 如果找不到 Razor 元件，請單擊 新項目，然後從 C# 元件中選擇 "Razor 元件"。 將元件命名為 "OCR.razor" 並按下"新增"。

新增新的 Razor 元件

同樣的最佳做法是將此 Razor 頁面的程式碼分離到另一個類中。 再次在 pages 資料夾上按下右鍵，並選擇 新增 > 類。 將類命名為與頁面名稱相同，然後按下"新增"。 Blazor 是一個智能框架，會將此類標記為與同名頁面共享的類。

為 OCR.razor.cs 建立程式碼文件，用於 OCR.razor Razor 元件

現在，讓我們進行實際的程式碼實現，將使用 IronOCR 讀取影像資料。

Blazor OCR.razor UI 元件的程式碼源來讀取影像資料

要識別影像中的文字，上傳影像，將其轉換為二進制資料，然後應用 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 前端 UI 元件程式碼源

接下來，為應用程式建立 UI。 打開 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>

在上面的程式碼中，UI 包含：

• 一個輸入文件標籤來選擇影像文件。
• 一個影像標籤來顯示影像。
• 一個按鈕，觸發 GetText 方法。
• 一個文字區域，顯示從影像資料中提取的文字。

在導航選單中新增連結

最後，在 Shared 資料夾下的 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 Server 應用程式的 UI

讓我們上傳一張影像，並提取文字以可視化輸出效果。

上傳的影像和提取的文字

輸出文字乾淨，可以從文字區域中複製。