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

@using IronOCR

@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;
                }
            }
        }
    }
}

在上述程式碼中

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：上傳的圖像和提取的文本 上傳的圖片和提取的文本

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