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

先決條件

1. 擁有最新版本的 Visual Studio。 你可以透過這個連結下載。
2. ASP.NET和 Web 開發工作量。 安裝 Visual Studio 時，請選擇ASP.NET和 Web 開發工作負載進行安裝，因為本專案需要這些元件。
3. IronOCR C# 庫。 我們將使用IronOCR將圖像資料轉換為機器可讀文字。 您可以直接從Iron 網站下載IronOCR套件 .DLL 文件，也可以從NuGet網站下載。 更方便的下載和安裝IronOCR的方式是透過 Visual Studio 中的NuGet套件管理器。

創建Blazor伺服器應用程式

開啟 Visual Studio，請依照下列步驟建立Blazor伺服器應用程式：

1. 點選建立新項目，然後從列出的項目範本中選擇" Blazor Server App "。

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

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 UI 元件

元件代表使用者介面，並包含用於展現動態行為的業務邏輯。 Blazor使用Razor元件來建立應用程式。這些元件可以嵌套、重複使用，並在項目之間共用。 預設情況下，應用程式中提供了 Counter 和 FetchData 頁面； 為了簡化起見，省略了這些內容。

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

新增新的Razor元件

最佳實踐是將此Razor頁面的程式碼分離出來，放在另一個類別中。 再次右鍵點選"頁面"資料夾，然後選擇"新增" > "類別" 。 將類別名稱與頁面名稱相同，然後按一下"新增"。 Blazor是一個智慧框架，它會將這個類別與同名頁面關聯起來。

如何在Blazor中從圖像中讀取文本，圖 8：建立用於 OCR 的Razor程式碼檔案。 RazorRazor@@-- Razor -372-EG--@@ 為Razor元件建立 OCR.razor.cs 程式碼檔案 OCR.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元件原始碼

接下來，創建應用程式的使用者介面。 開啟 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 方法的按鈕。
• 用於顯示從圖像資料中提取的文字的文字區域。

新增導航選單連結

最後，在 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伺服器應用程式的使用者介面

讓我們上傳一張圖片，提取其中的文本，並將結果視覺化。

上傳的圖片和提取的文本

輸出文字清晰，可以從文字區域複製。