BlazorでQRコードスキャナーを作成する方法

This article was translated from English: Does it need improvement?
Translated
View the article in English

Blazor Serverは、C#をサーバー側で実行し、SignalR接続を介してUI更新をブラウザーにプッシュする.NET Webフレームワークです。 IronQRはBlazor Serverに直接統合され、JavaScriptを使用せずにブラウザーアップロードされた画像からサーバー側でQRコードをスキャンできます。

このハウツーガイドでは、画像をアップロードしてIronQRを使用して埋め込まれたQRコードをデコードするBlazor Serverページを作成します。

前提条件

  1. Visual Studio 2022にASP.NETおよびWeb開発ワークロードがインストールされている
  2. .NET 8以降をターゲットにするBlazor Serverプロジェクト

IronQRのインストール

Visual StudioのNuGetパッケージマネージャーコンソールを使用してIronQRライブラリをインストールします。 Tools > NuGet Package Manager > Package Manager Console に移動し、以下を実行してください:

Install-Package IronQR

あるいは、NuGetIronQR を検索し、最新バージョンをインストールしてください。

Blazorコンポーネントレイアウト

スキャナーのUIは、ブラウザネイティブなファイル選択を行うBlazorの組み込みコンポーネント、スキャンを実行するボタン、およびデコードされた結果を表示する段落で構成されています。 JavaScriptの相互運用は必要ありません。

以下のマークアップを含む新しい Razor コンポーネント Scanner.razor を追加してください:

@page "/scanner"
@using IronQr
@using IronSoftware.Drawing

<h3>QR Code Scanner</h3>

<InputFile OnChange="OnFileSelected" accept="image/*" />

<br /><br />

<button @onclick="ScanQRCode" disabled="@(qrImageSrc == null)">Scan QR Code</button>

<p>Result: @scannedText</p>

サンプル入力

以下のQRコードをテスト画像として使用します。 デバイスに保存し、アプリのファイルピッカーでアップロードした後、Scan QR Codeをクリックします。 デコードされた値は https://ironsoftware.com の形式で表示される必要があります。

Sample QR code encoding https://ironsoftware.com for testing the Blazor QR scanner

サンプルQRコード — https://ironsoftware.comをエンコード

IronQRによるQRコードスキャン

ファイルが選択されると、OnFileSelectedはブラウザからのアップロードデータをサーバー上の一時ファイルにストリーミングします。 スキャンボタンがクリックされると、scannedTextに書き込みます。Blazorはこれをコンポーネント内で自動的にレンダリングします。

@code ブロックを Scanner.razor に追加してください:

:path=/static-assets/qr/content-code-examples/how-to/blazor-qr-code-scanner.cs
using IronQr;
using IronSoftware.Drawing;

private string? qrImageSrc;
private string scannedText = string.Empty;

private async Task OnFileSelected(InputFileChangeEventArgs e)
{
    var file = e.File;
    var tempPath = Path.Combine(Path.GetTempPath(), file.Name);
    await using var stream = file.OpenReadStream(maxAllowedSize: 10_000_000);
    await using var fs = File.Create(tempPath);
    await stream.CopyToAsync(fs);
    qrImageSrc = tempPath;
}

private async Task ScanQRCode()
{
    // Load the scanned QR code
    var inputBmp = AnyBitmap.FromFile(qrImageSrc!);
    var imageInput = new QrImageInput(inputBmp);
    var reader = new QrReader();

    // Read the scanned QR code
    var results = reader.Read(imageInput);

    // Check if a result was found
    var firstResult = results.FirstOrDefault();
    if (firstResult != null)
    {
        // Save the QR code value as a string
        scannedText = firstResult.Value;
    }
    else
    {
        scannedText = "No QR code found in the selected image.";
    }
}
Imports IronQr
Imports IronSoftware.Drawing
Imports System.IO
Imports Microsoft.AspNetCore.Components.Forms
Imports System.Threading.Tasks

Private qrImageSrc As String = Nothing
Private scannedText As String = String.Empty

Private Async Function OnFileSelected(e As InputFileChangeEventArgs) As Task
    Dim file = e.File
    Dim tempPath = Path.Combine(Path.GetTempPath(), file.Name)
    Await Using stream = file.OpenReadStream(maxAllowedSize:=10000000)
        Await Using fs = File.Create(tempPath)
            Await stream.CopyToAsync(fs)
        End Using
    End Using
    qrImageSrc = tempPath
End Function

Private Async Function ScanQRCode() As Task
    ' Load the scanned QR code
    Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
    Dim imageInput = New QrImageInput(inputBmp)
    Dim reader = New QrReader()

    ' Read the scanned QR code
    Dim results = reader.Read(imageInput)

    ' Check if a result was found
    Dim firstResult = results.FirstOrDefault()
    If firstResult IsNot Nothing Then
        ' Save the QR code value as a string
        scannedText = firstResult.Value
    Else
        scannedText = "No QR code found in the selected image."
    End If
End Function
$vbLabelText   $csharpLabel

InputFile.OpenReadStream は、アップロードされたバイトデータをサーバーサイドの一時ファイルに直接ストリーム送信します。AnyBitmap.FromFile は画像形式をデコードし、QrReader.Read は、検出された QR コードごとに 1 つのエントリを含む IEnumerable<QrResult> を返します。 FirstOrDefault は、QRコードが含まれていない画像を例外を発生させることなく安全に処理します。

出力

QRコード画像を選択し、Scan QR Codeをクリックすると、デコードされた値はコントロール下の結果段落にレンダリングされます。

Blazor QR Code Scanner using IronQR — decoded result displayed on the page

デコードされたQRコードの値がBlazorコンポーネントにレンダリングされます

プロジェクトをダウンロードする

完全なBlazorQrScannerプロジェクトをダウンロードするにはこちらをクリックしてください。

結論

IronQRはJavaScriptなしでBlazor Serverアプリケーションに統合されます。 InputFile はブラウザネイティブのファイル選択機能を提供し、QrReader.Read はデコード処理を完全にサーバー側で行います。 このパターンは、FirstOrDefaultを呼び出す代わりに、結果のコレクション全体を反復処理することで、1つの画像から複数のQRコードをスキャンする場合にも適用できます。

QRコードの読み取りと利用可能なスキャンモードの詳細については、画像からQRコードを読み取るガイドとスキャンモードを使用してQRコードを読み取るガイドを参照してください。

よくある質問

Blazor ServerアプリケーションにおけるIronQRの主な用途は何ですか?

IronQRは主に、ブラウザーからアップロードされた画像からのサーバーサイドQRコードスキャンを可能にするために、Blazor Serverアプリケーションで使用されます。

BlazorプロジェクトにIronQRライブラリをインストールするにはどうすればよいですか?

BlazorプロジェクトにIronQRライブラリをインストールするには、Visual StudioでNuGetパッケージマネージャーコンソールを使用してインストールコマンドを実行するか、NuGetで 'IronQR' を検索して最新バージョンをインストールします。

BlazorでQRコードスキャン用に画像アップロードを処理するコンポーネントは何ですか?

`InputFile`コンポーネントは、BlazorでQRコードスキャンのために画像アップロードを処理し、ブラウザーから画像を選択できるようにします。

BlazorアプリケーションでIronQRがQRコードをどのようにデコードするのですか?

Blazorアプリケーションでは、IronQRは、選択した画像を`AnyBitmap`にロードし、`QrReader.Read()`を使用してQRコードのデータを抽出および表示します。

IronQRは複数のQRコードを含む画像を処理できますか?

はい、IronQRは`QrReader.Read()`によって返された`IEnumerable`コレクションを反復することで、複数のQRコードを含む画像を処理できます。

BlazorでIronQRを使用してQRコードスキャンを実装するためにJavaScriptが必要ですか?

いいえ、BlazorでIronQRを使用してQRコードスキャンを実装するのにJavaScriptは必要ありません。全プロセスがサーバーサイドで処理されます。

`AnyBitmap`はIronQRスキャンプロセスにおいてどのような役割を果たしますか?

`AnyBitmap`はアップロードされたファイルの画像形式をデコードし、QRコードの読み取りのために準備します。

BlazorはQRコードスキャンの結果をどのように表示しますか?

BlazorはQRコードスキャンの結果をコンポーネントのUI内の段落要素にデコードされた値をレンダリングすることで表示します。

BlazorスキャナーにQRコードのない画像がアップロードされた場合はどうなりますか?

QRコードのない画像がアップロードされると、`QrReader.Read()`が返す`IEnumerable`に対して`FirstOrDefault`を呼び出すことで、例外をスローせずに安全に処理されます。

.NET MAUI QR Scannerプロジェクト全体をダウンロードすることは可能ですか?

はい、ガイドのウェブページに提供されているリンクからBlazor QR Scannerプロジェクト全体をダウンロードすることができます。

カーティス・チャウ
テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT(Internet of Things)への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はできましたか?
Nuget ダウンロード 67,270 | バージョン: 2026.5 just released
Still Scrolling Icon

まだスクロールしていますか?

すぐに証拠が欲しいですか? PM > Install-Package IronQR
サンプルを実行する URL が QR コードになるのを見る。