BlazorでQRコードスキャナーを作成する方法
Blazor Serverは、C#をサーバー側で実行し、SignalR接続を介してUI更新をブラウザーにプッシュする.NET Webフレームワークです。 IronQRはBlazor Serverに直接統合され、JavaScriptを使用せずにブラウザーアップロードされた画像からサーバー側でQRコードをスキャンできます。
このハウツーガイドでは、画像をアップロードしてIronQRを使用して埋め込まれたQRコードをデコードするBlazor Serverページを作成します。
BlazorでQRコードをスキャンする方法
- WebでQRコードをスキャンするためにIronQR C#ライブラリをインストールします
- ブラウザーからの画像アップロードを受け入れるために
InputFileコンポーネントを追加します - アップロードされたファイルをサーバーの一時パスにストリーミングします
- 画像をロードし、それを
QrImageInputにラップします Readを呼び出し、Blazorコンポーネントにデコードされた値を表示します
前提条件
- Visual Studio 2022にASP.NETおよびWeb開発ワークロードがインストールされている
- .NET 8以降をターゲットにするBlazor Serverプロジェクト
IronQRのインストール
Visual StudioのNuGetパッケージマネージャーコンソールを使用してIronQRライブラリをインストールします。 Tools > NuGet Package Manager > Package Manager Console に移動し、次を実行します:
Install-Package IronQR
または、NuGetでIronQRを検索し、最新バージョンをインストールします。
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として表示されるべきです。
サンプル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
IEnumerable<QrResult>を返します。 FirstOrDefaultはQRコードがない画像を例外なく安全に処理します。
出力
QRコード画像を選択し、Scan QR Codeをクリックすると、デコードされた値はコントロール下の結果段落にレンダリングされます。
デコードされたQRコードの値がBlazorコンポーネントにレンダリングされます
プロジェクトをダウンロードする
結論
IronQRはJavaScriptなしでBlazor Serverアプリケーションに統合されます。 QrReader.Readは完全にサーバーでデコードを処理します。 同じパターンは、FirstOrDefaultを呼び出す代わりに結果コレクション全体を繰り返すことで、画像ごとに複数のQRコードをスキャンするようにスケールします。
QRコードの読み取りと利用可能なスキャンモードの詳細については、画像からQRコードを読み取るガイドとスキャンモードを使用してQRコードを読み取るガイドを参照してください。

