如何在 Blazor 中建立 QR 碼掃描器
Blazor Server 是一個 .NET Framework 網頁框架,可在伺服器端執行 C#,並透過 SignalR 連線將使用者介面更新推送至瀏覽器。 IronQR 可直接整合至 Blazor Server,無需任何 JavaScript 即可對瀏覽器上傳的圖片進行伺服器端 QR 碼掃描。
在這份操作指南中,我們將建立一個 Blazor Server 頁面,該頁面可接受圖片上傳,並使用 IronQR 解碼任何嵌入的 QR 碼。
如何在 Blazor 中掃描 QR 碼
- 安裝 IronQR C# 程式庫,即可在網頁上掃描 QR 碼
- 新增 `InputFile` 元件以接收來自瀏覽器的圖片上傳
- 將上傳的檔案串流至伺服器上的臨時路徑
- 載入圖片並將其封裝在 `QrImageInput` 中
- 呼叫 `Read` 並在 Blazor 元件中顯示解碼後的值
先決條件
- 已安裝 ASP.NET 和網頁開發工作負載的 Visual Studio 2022
- 針對 .NET 8 或更高版本的 Blazor Server 專案
安裝 IronQR
請透過 Visual Studio 中的 NuGet 套件管理員主控台安裝 IronQR程式庫。 請導航至 Tools > NuGet Package Manager > Package Manager Console 並執行:
Install-Package IronQR
或者,您也可以在 NuGet 上搜尋 IronQR 並安裝最新版本。
Blazor 元件佈局
掃描器的使用者介面採用 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 碼作為測試圖片。 將其儲存至您的裝置,透過應用程式中的檔案選擇器上傳,然後點擊"掃描 QR 碼"。 解碼後的值應顯示為 https://ironsoftware.com。
QR 碼範例 — 編碼網址:`https://ironsoftware.com`
使用 IronQR 掃描 QR 碼
當選取檔案時,OnFileSelected 會將瀏覽器上傳的內容串流至伺服器上的臨時檔案。 當點擊掃描按鈕時,ScanQRCode 會將檔案載入至 AnyBitmap,傳遞給 QrReader.Read(),並將第一個解碼後的值寫入 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
InputFile.OpenReadStream 將上傳的位元組直接串流至伺服器端的暫存檔。AnyBitmap.FromFile 解碼圖像格式,並由 QrReader.Read 返回一個 IEnumerable<QrResult>,其中每個 QR 碼對應一個條目。 FirstOrDefault 能安全處理不含 QR 碼的圖片,且不會拋出例外。
輸出
選取 QR 碼圖片並點擊"掃描 QR 碼"後,解碼後的值會顯示在控制項下方的結果段落中。
在 Blazor 元件中渲染的解碼 QR 碼值
下載專案
結論
IronQR 可無需 JavaScript 即可整合至 Blazor Server 應用程式中。 InputFile 提供瀏覽器原生檔案選取功能,而 QrReader.Read 則完全在伺服器端進行解碼。 相同的模式可擴展至掃描單張圖片中的多個 QR 碼,方法是遍歷完整的結果集合,而非呼叫 FirstOrDefault。
有關讀取 QR 碼及可用掃描模式的更多資訊,請參閱《從圖片讀取 QR 碼》和《使用掃描模式讀取 QR 碼》指南。

