如何在 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 "。

   如何在 Blazor 中從圖像中讀取文字，圖 1：在 Visual Studio 中建立一個新的 Blazor 伺服器應用程式 在 Visual Studio 中建立一個新的 Blazor Server 應用程式

2. 接下來，為你的專案取個合適的名字。 這裡，我們將其命名為BlazorReadText 。

   如何在 Blazor 中從圖像中讀取文字，圖 2：配置 Blazor 項目 配置 Blazor 項目

3. 最後，設定附加資訊並點選"建立"。

   如何在 Blazor 中從圖像中讀取文字，圖 3：選擇長期支援 .NET Framework 以及專案的其他信息 選擇長期支援的 .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"，然後按一下"新增"。

如何在 Blazor 中從圖像中讀取文字，圖 7：新增新的 Razor 元件 新增新的 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;
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 中從圖像中讀取文字，圖 9：Blazor 伺服器應用程式的使用者介面 Blazor 伺服器應用程式的使用者介面

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

如何在 Blazor 中從圖像中讀取文字，圖 10：上傳的圖像和提取的文字 上傳的圖片和提取的文字

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