Blazorで画像からテキストを読み取る方法

Blazorフレームワークは、ASP.NETチームによって構築されており、JavaScriptの代わりにHTMLとC#を使用してインタラクティブなUIウェブアプリケーションを開発するために使用されます。 Blazorは、WebAssemblyを使用してWebブラウザー内で直接C#コードを実行します。 これにより、ロジックを持つコンポーネントを構築および開発し、それらを何度も再利用することが簡単になります。 それはC#でUIを構築するために開発者の間で人気のあるフレームワークです。

この記事では、IronOCRを使用して画像ファイルからテキストを読み取るためのBlazor Serverアプリを作成します。

Blazorで光学式文字認識を使用して画像からテキストを読み取る方法は？

前提条件

1. 最新バージョンのVisual Studioを入手してください。 このリンクからダウンロードできます。

2. ASP.NETおよびウェブ開発ワークロード。 Visual Studioをインストールする際、このプロジェクトに必要であるため、ASP.NETおよびWeb開発のワークロードを選択してインストールしてください。

3. IronOCR C#ライブラリ 私たちはIronOCRを使用して、画像データを機械判読可能なテキストに変換する予定です。 IronOCRパッケージの.DLLファイルは、Ironのウェブサイトから直接ダウンロードするか、NuGetのウェブサイトからダウンロードできます。 IronOCRをダウンロードおよびインストールするより便利な方法は、Visual StudioのNuGetパッケージマネージャーから行うことです。

Blazorサーバーアプリを作成する

Visual Studioを開き、手順に従ってBlazor Serverアプリを作成します：

1. "Blazor Server App" を選択するリスト内のプロジェクトテンプレートから選び、新しいプロジェクトを作成してください。

   

   Visual Studioで新しいBlazor Serverアプリを作成する

2. 次に、プロジェクトに適切な名前を付けます。 ここでは、それを"BlazorReadText"と名付けています。

   

   Blazor プロジェクトを構成する

3. 最後に、追加情報を設定し、「作成」をクリックします。

   

   Long Term Support .NET Frameworkの選択とプロジェクトの追加情報

   Blazorサーバーアプリが作成されました。 次に、IronOCRを使用して画像データを抽出する前に、必要なパッケージをインストールする必要があります。

必要なパッケージを追加する

BlazorInputFile

最初のステップは、BlazorInputFile パッケージをインストールすることです。 これはBlazorアプリケーションのためのコンポーネントであり、単一または複数のファイルをサーバーにアップロードするために使用されます。 このコンポーネントは、BlazorアプリケーションのRazorページに画像ファイルをアップロードするために使用されます。 ソリューション用 NuGet パッケージの管理を開き、BlazorInputFile をブラウズします。

BlazorInputFile パッケージをインストールする

プロジェクトのチェックボックスを選択し、［インストール］をクリックします。

次に、Pages フォルダー内の _Host.cshtml ファイルを開き、次の JavaScript ファイルを追加します:

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

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

ソリューションエクスプローラーから_Host.cshtmlファイルに移動

最後に、次のコードを_Imports.razorファイルに追加します。

@using BlazorInputFile

@using BlazorInputFile

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

IronOCR

IronOCRは、さまざまな形式の画像をスキャンおよび読み取るC#ライブラリです。 それは127以上の世界の言語で画像を扱う機能を提供します。

IronOCRをインストールするには、NuGetパッケージマネージャーを開き、IronOCRを検索してください。 プロジェクトを選択して、インストールボタンをクリックしてください。

NuGet パッケージ マネージャーで IronOcr パッケージをインストール

_Imports.razor ファイルに IronOCR 名前空間を追加します。

@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 コンポーネントが見つからない場合は、New Item をクリックし、C# コンポーネントから「Razor Component」を選択してください。 コンポーネントを「OCR.razor」と命名し、「Add」をクリックしてください。

新しいRazorコンポーネントを追加

このRazorページのコードを別のクラスとして分離することがベストプラクティスです。 再度、ページフォルダーを右クリックして、追加 > クラスを選択します。 クラス名をページ名と同じにして、「追加」をクリックします。 Blazorはスマートなフレームワークで、同じ名前を共有するページにこのクラスをタグ付けします。

OCR.razor Razorコンポーネント用のOCR.razor.csコードファイルを作成する

それでは、IronOCRを使用して画像データを読み取る実際のコード実装に移りましょう。

Blazor OCR.razor UI コンポーネント ソースコードで画像データを読み取る

画像のテキストを認識するには、画像をアップロードし、バイナリデータに変換してからIronOCRメソッドを適用してテキストを抽出します。

OCR.razor.cs クラスを開いて、次のサンプルソースコードを書きます。

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        protected string imageText;
        protected string imagePreview;
        byte [] imageFileBytes;

        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        const int MaxFileSize = 4 * 1024 * 1024; // 4MB

        protected async Task ViewImage(IFileListEntry [] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }
            else if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes.";
                return;
            }
            else if (!file.Type.Contains("image"))
            {
                status = "Please uplaod a valid image file";
                return;
            }
            else
            {
                var memoryStream = new MemoryStream();
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);

                imagePreview = string.Concat("data:image/png;base64,", base64String);
                memoryStream.Flush();
                status = DefaultStatus;
            }
        }

        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                IronTesseract ocr = new IronTesseract();
                using (OcrInput input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

using BlazorInputFile;
using Microsoft.AspNetCore.Components;
using IronOcr;

namespace BlazorReadText.Pages
{
    public class OCRModel : ComponentBase
    {
        protected string imageText;
        protected string imagePreview;
        byte [] imageFileBytes;

        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        const int MaxFileSize = 4 * 1024 * 1024; // 4MB

        protected async Task ViewImage(IFileListEntry [] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }
            else if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes.";
                return;
            }
            else if (!file.Type.Contains("image"))
            {
                status = "Please uplaod a valid image file";
                return;
            }
            else
            {
                var memoryStream = new MemoryStream();
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);

                imagePreview = string.Concat("data:image/png;base64,", base64String);
                memoryStream.Flush();
                status = DefaultStatus;
            }
        }

        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                IronTesseract ocr = new IronTesseract();
                using (OcrInput input = new OcrInput(imageFileBytes))
                {
                    OcrResult result = ocr.Read(input);
                    imageText = result.Text;
                }
            }
        }
    }
}

Imports BlazorInputFile
Imports Microsoft.AspNetCore.Components
Imports IronOcr

Namespace BlazorReadText.Pages
	Public Class OCRModel
		Inherits ComponentBase

		Protected imageText As String
		Protected imagePreview As String
		Private imageFileBytes() As Byte

		Private Const DefaultStatus As String = "Maximum size allowed for the image is 4 MB"
		Protected status As String = DefaultStatus

		Private Const MaxFileSize As Integer = 4 * 1024 * 1024 ' 4MB

		Protected Async Function ViewImage(ByVal files() As IFileListEntry) As Task
			Dim file = files.FirstOrDefault()
			If file Is Nothing Then
				Return
			ElseIf file.Size > MaxFileSize Then
				status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes."
				Return
			ElseIf Not file.Type.Contains("image") Then
				status = "Please uplaod a valid image file"
				Return
			Else
				Dim memoryStream As New MemoryStream()
				Await file.Data.CopyToAsync(memoryStream)
				imageFileBytes = memoryStream.ToArray()
				Dim base64String As String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length)

				imagePreview = String.Concat("data:image/png;base64,", base64String)
				memoryStream.Flush()
				status = DefaultStatus
			End If
		End Function

		Private Protected Async Function GetText() As Task
			If imageFileBytes IsNot Nothing Then
				Dim ocr As New IronTesseract()
				Using input As New OcrInput(imageFileBytes)
					Dim result As OcrResult = ocr.Read(input)
					imageText = result.Text
				End Using
			End If
		End Function
	End Class
End Namespace

上記のコードでは、ViewImageメソッドを使用して、入力ファイルからアップロードされたファイルを取得し、それが画像であり、指定されたサイズ未満であるかを確認します。 ファイルサイズやファイルタイプにエラーが発生した場合、if-else ブロックがそれを処理します。 次に、画像がMemoryStreamにコピーされます。 最後に、画像はバイト配列に変換されます。これはIronOcr.OcrInputがバイナリ形式の画像を受け入れることができるためです。

GetText メソッドは、IronOCR を使用して入力画像からテキストを読み取ります。 IronOCR は最新の Tesseract 5 エンジンを使用しており、127 以上の言語に対応しています。 バイト配列に変換された画像は、OcrInputとして渡され、結果はIronTesseractのReadメソッドを使用して取得されます。 IronTesseract は、IronOCR チームによって開発された Google Tesseract の拡張バージョンです。 詳細については、C# Tesseract OCR 例をご覧ください。

最後に、抽出されたテキストは表示のために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>

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@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

画像をアップロードしてテキストを抽出し、出力を視覚化しましょう。

アップロードされた画像と抽出されたテキスト

出力テキストはクリーンで、テキストエリアからコピーすることができます。

サマリー

この記事では、Blazor Server アプリケーションでコードをバックに持つ Blazor UI コンポーネントを作成し、画像からテキストを読み取る方法を実証しました。 IronOCRは、任意のC#ベースのアプリケーションでテキストを抽出するための多用途なライブラリです。 最新の.NETフレームワークをサポートしており、Razorアプリケーションとも相性よく使用できます。 IronOCRは、Windows、Linux、macOS、Docker、Azure、AWS、そしてMAUIでサポートされているクロスプラットフォームライブラリです。 さらに、IronOCRは、追加の設定を必要とせずに、Tesseractから得られる最高の結果によって高い精度を提供します。 マルチページフレームTIFF、PDFファイル、すべての一般的な画像形式をサポートしています。 画像からバーコードの値を読み取ることも可能です。

また、無料トライアルで無料でIronOCRを試すことができます。 こちらからソフトウェアライブラリをダウンロードしてください。