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の組み込みInputFileコンポーネントを使用してブラウザーネイティブのファイル選択を行い、スキャンをトリガーするボタンとデコード結果を表示する段落を持っています。 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がコンポーネントに自動的にレンダリングします。

次の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

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アプリケーションに統合されます。 QrReader.Readは完全にサーバーでデコードを処理します。 同じパターンは、FirstOrDefaultを呼び出す代わりに結果コレクション全体を繰り返すことで、画像ごとに複数のQRコードをスキャンするようにスケールします。

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

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

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

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

準備はできましたか?
Nuget ダウンロード 63,625 | バージョン: 2026.4 リリース
Still Scrolling Icon

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

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