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

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

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

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

前提条件

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

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

3. IronOCR C# ライブラリ. 私たちはIronOCRを使用して、画像データを機械判読可能なテキストに変換する予定です。 IronOCRパッケージの .DLL ファイルは直接ダウンロードできます： アイアンウェブサイト または、それをダウンロードしてください 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は、.NETプラットフォーム向けに開発された高度なOCR（光学式文字認識）ライブラリです。このツールは、PDFファイルや画像からテキストデータを抽出するために利用されます。IronOCRは、多言語サポートと高い認識精度を特徴としており、企業や開発者にとって非常に有用です。

主な機能：

• PDFファイル、スキャン画像、写真からテキストを抽出
• 多種多様な画像フォーマットに対応（JPEG, PNG, BMP, TIFFなど）
• 高速かつ正確な文字認識
• 日本語を含む複数の言語に対応
• APIが簡単で使いやすい

用途：

• 紙の書類をデジタル化し、容易に検索可能にする
• 自動データ入力システムの構築
• 携帯アプリやウェブアプリへのOCR機能の統合
• テキスト認識によるデータ抽出の自動化

ライセンス： IronOCRにはさまざまなライセンスオプションが用意されています。Lite License、Plus License、Professional License、Unlimited License から選択でき、利用規模や用途に応じて最適なプランを選ぶことができます。

公式ウェブサイトで詳しい情報やサポートを確認できます: IronOCR公式サイト

IronOCRを使用することで、あなたのプロジェクトに高性能なOCR機能を取り入れることが可能です。

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コンポーネントが見つからない場合は、新しい項目をクリックし、C#コンポーネントから「Razorコンポーネント」を選択してください。 コンポーネントを「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（OCR入力） そして、結果はそのを使用して取得されます IronTesseract `読取 (読み取り)もちろん、英語のテキストを教えていただけますでしょうか？ メソッド。 IronOCRチームによって開発された IronTesseract は、Google Tesseract の拡張バージョンです。 詳細情報については、以下をご覧ください C# テッセラクト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で画像からテキストを読み取る方法

図10: アップロードされた画像と抽出されたテキスト](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-10.webp)

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

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

サマリー

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

また、可能です 画像からバーコードの値を読み取る.

IronOCR もお試しください 無料体験版で無料. ソフトウェアライブラリをダウンロードする これ.