IronQR ハウツー Blazor QRコードスキャナー BlazorでQRコードスキャナーを作成する方法 カーティス・チャウ 更新日:2026年3月2日 IronQR をダウンロード NuGet ダウンロード 無料トライアル LLM向けのコピー LLM向けのコピー LLM 用の Markdown としてページをコピーする ChatGPTで開く このページについてChatGPTに質問する ジェミニで開く このページについてGeminiに問い合わせる Grokで開く このページについてGrokに質問する 困惑の中で開く このページについてPerplexityに問い合わせる 共有する Facebook で共有 Xでシェア(Twitter) LinkedIn で共有 URLをコピー 記事をメールで送る 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ページを作成します。 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 $vbLabelText $csharpLabel IEnumerable<QrResult>を返します。 FirstOrDefaultはQRコードがない画像を例外なく安全に処理します。 出力 QRコード画像を選択し、Scan QR Codeをクリックすると、デコードされた値はコントロール下の結果段落にレンダリングされます。 デコードされた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 リリース 無料トライアル NuGet 無料ダウンロード 総ダウンロード数: 63,625 ライセンスを見る まだスクロールしていますか? すぐに証拠が欲しいですか? PM > Install-Package IronQR サンプルを実行する URL が QR コードになるのを見る。 NuGet 無料ダウンロード 総ダウンロード数: 63,625 ライセンスを見る