C#で画像からテキストを読む方法

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

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

Blazorで光学式文字認識を使って画像からテキストを読み取るには？ ### 前提条件 1.Visual Studioの最新バージョンを持っていること。 この[リンク](https://visualstudio.microsoft.com/downloads/)からダウンロードできます。 2.ASP.NETおよびWeb開発ワークロード。 Visual Studioをインストールするときに、ASP.NETとWeb Development workloadを選択してインストールしてください。 3.[IronOCR C#ライブラリ](/csharp/ocr/). IronOCRを使って画像データを機械可読テキストに変換します。 You can download the IronOCR package .DLL file directly from the [Iron website](/csharp/ocr/packages/IronOcr.zip) or download it from the [NuGet website](https://www.nuget.org/packages/IronOcr/). IronOCRのダウンロードとインストールは、Visual StudioのNuGetパッケージマネージャから行うのが便利です。 ### Blazorサーバーアプリの作成 Visual Studioを開き、手順に従ってBlazorサーバーアプリを作成してください： 1.新規プロジェクトの作成をクリックし、リストされたプロジェクトテンプレートから"**Blazor Server App**"を選択してください。 [Blazorで画像からテキストを読み取る方法、図1：Visual Studioで新しいBlazorサーバーアプリを作成する](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-1.webp)。 **VisualStudioで新しいBlazorサーバーアプリを作成する**。 2.次に、プロジェクトに適切な名前を付けます。 ここでは、**BlazorReadText**と名付けています。 [Blazorで画像からテキストを読み取る方法、図2：Blazorプロジェクトの設定](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-2.webp)。 **Blazorプロジェクトを設定する**。 3.最後に、追加情報を設定し、[作成]をクリックします。 [Blazorで画像からテキストを読み取る方法、図3：長期サポート.NET Frameworkの選択とプロジェクトの追加情報](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-3.webp)。 **プロジェクトの長期サポート.NET Frameworkと追加情報を選択する**。 Blazor サーバーアプリが完成しました。 IronOCRを使って画像データを抽出する前に、必要なパッケージをインストールする必要があります。 ### 必要なパッケージの追加 #### BlazorInputFile 最初のステップは、`BlazorInputFile`パッケージをインストールすることです。 Blazorアプリケーションのコンポーネントで、単一または複数のファイルをサーバーにアップロードするために使用されます。 このコンポーネントは、Blazor アプリケーションの Blazor ページに画像ファイルをアップロードするために使用されます。 **Manage NuGet Packages for Solutions** を開き、`BlazorInputFile`をブラウズしてください。 [Blazorで画像からテキストを読み取る方法、図4：BlazorInputFileパッケージをインストールする](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-4.webp)。 **`BlazorInputFile`パッケージをインストールしてください**。 プロジェクトのチェックボックスを選択し、[インストール]をクリックします。 では、Pagesフォルダ内の`_Host.cshtml`ファイルを開き、次のJavaScriptファイルを追加してください： ```html ``` [Blazorで画像からテキストを読み取る方法、図5：ソリューションエクスプローラーから_Host.cshtmlファイルに移動する](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-5.webp)。 **ソリューションエクスプローラーから`_Host.cshtml`ファイルに移動する**。 最後に、`_Imports.razor`ファイルに以下のコードを追加します。 ```csharp @using BlazorInputFile ``` #### IronOCRについて IronOCRは異なるフォーマットの画像をスキャンして読み取るためのC#ライブラリです。 125以上の世界言語の画像を扱う機能を提供します。 IronOCRをインストールするには、NuGetパッケージマネージャを開き、IronOCRをブラウズする。 プロジェクトを選択し、**インストール**ボタンをクリックしてください。 [Blazorで画像からテキストを読み取る方法、図6: NuGetパッケージマネージャでIronOcrパッケージをインストールする](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-6.webp)。 **NuGetパッケージマネージャでIronOcrパッケージをインストールする**。 `_Imports.razor`ファイルにIronOCR名前空間を追加してください： ```csharp @using IronOCR ``` ### BlazorのUIコンポーネントを作成する。 コンポーネントは、動的な動作を示すビジネス・ロジックを備えたユーザー・インターフェースを表します。 Blazor はアプリの構築に Razor Components を使用しています。これらのコンポーネントは、入れ子にしたり、再利用したり、プロジェクト間で共有することができます。 デフォルトでは、`Counter`と`FetchData`ページがアプリケーションで提供されます； シンプルにするために、それらを削除します。 BlazorReadText アプリケーションの下にある *pages* フォルダを右クリックし、**Add** > **Razor Component** を選択します。 Razor Component が見つからない場合は、**New Item** をクリックし、C# コンポーネントから "Razor Component" を選択してください。 コンポーネントの名前を "OCR.razor "とし、Addをクリックします。 [Blazorで画像からテキストを読み取る方法、図7：新しいRazorコンポーネントを追加する](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-7.webp)。 **新しいRazorコンポーネントを追加する**。 ベストプラクティスは、このカミソリページのコードを別のクラスのように分けることです。 もう一度、pagesフォルダを右クリックし、**Add** > **Class**を選択します。 ページ名と同じクラス名を付け、Addをクリックします。 Blazorはスマートなフレームワークであり、このクラスと同じ名前のページをタグ付けします。 [Blazorで画像からテキストを読み取る方法、図8：OCR.razor BlazorコンポーネントのOCR.razor.csコードファイルを作成する](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-8.webp)。 **`OCR.razor`レイザーコンポーネント**の`OCR.razor.cs`コードファイルを作成してください。 それでは、IronOCRを使って画像データを読み込む実際のコード実装に移りましょう。 ### 画像データを読み取る Blazor OCR.razor UI コンポーネント ソースコード

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`変数に格納され、表示されます。 ライブラリは、追加設定なしで英語のテキスト画像をサポートします。 この[コード例ページ](/csharp/ocr/examples/intl-languages/)で、異なる言語の使用についてもっと学ぶことができます。 ### BlazorフロントエンドUIコンポーネントのソースコード

Optical Character Recognition (OCR) Using Blazor and IronOCR Software

@imageText

@status

---

Extract Text

``` 上記のコードでは、UIが含まれています： - 画像ファイルを選択するための入力ファイルタグ。 - 画像を表示するための画像タグ。 - `GetText`メソッドをトリガーするボタン。 - 画像データから抽出したテキストを表示するテキストエリア。 ### ナビゲーション メニューにリンクを追加 最後に、共有フォルダ下の`NavMenu.razor`ファイルに`OCR.razor`ページへのリンクを追加します： ```html

Read Image Text

``` `Counter`と`FetchData`へのリンクは不要なので削除してください。 すべてが完成し、使用できるようになりました。 F5キーを押してアプリケーションを実行してください。 フロントエンドは以下のように表示される必要があります： [Blazorで画像からテキストを読み取る方法、図9：BlazorサーバーアプリのUI](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-9.webp)。 **BlazorサーバーアプリのUI**。 画像をアップロードし、テキストを抽出して、出力を視覚化してみましょう。 [Blazorで画像からテキストを読み取る方法、図10：アップロードされた画像と抽出されたテキスト](/static-assets/ocr/blog/read-text-from-image-blazor-tutorial/read-text-from-image-blazor-tutorial-10.webp)。 **アップロードされた画像と抽出されたテキスト**。 出力テキストはきれいで、テキストエリアからコピーできます。 ## 概要 この記事では、画像からテキストを読み取る Blazor UI コンポーネントを Blazor サーバーアプリケーションで作成する方法を紹介しました。 IronOcrはC#ベースのアプリケーションでテキストを抽出するための汎用ライブラリです。 最新の.NET Frameworkをサポートし、Razorアプリケーションと組み合わせて使用できます。 IronOCR is a cross-platform library supported on Windows, Linux, macOS, [Docker](/csharp/ocr/get-started/docker/), Azure, AWS, and [MAUI](/csharp/ocr/get-started/net-maui-ocr-tutorial/). さらに、IronOCRはTesseractの最高の結果を使用し、追加設定なしで高い精度を提供します。 It supports [multipage frame TIFF](/csharp/ocr/how-to/input-tiff-gif/), [PDF files](/csharp/ocr/how-to/input-pdfs/), and all popular image formats. [画像からバーコード値を読み取る](/csharp/ocr/how-to/barcodes/)ことも可能です。 [無料トライアル](trial-license)でIronOCRを試すこともできます。 ソフトウェア・ライブラリは[こちら](/csharp/ocr/)からダウンロードしてください。