如何在 Blazor 中建立 QR 碼掃描器

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

Blazor Server 是一個 .NET Framework 網頁框架,可在伺服器端執行 C# 程式碼,並透過 SignalR 連線將使用者介面更新推送至瀏覽器。 IronQR 可直接整合至 Blazor Server,無需任何 JavaScript 即可透過瀏覽器上傳的圖片進行伺服器端 QR 碼掃描。

在這份操作指南中,我們將建立一個 Blazor Server 頁面,該頁面可接受圖片上傳,並使用 IronQR 解碼任何嵌入的 QR 碼。

先決條件

  1. 已安裝 ASP.NET 和網頁開發工作負載的 Visual Studio 2022
  2. 針對 .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

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

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
$vbLabelText   $csharpLabel

InputFile.OpenReadStream 會將上傳的位元組直接串流至伺服器端的暫存檔。AnyBitmap.FromFile 負責解碼影像格式,而 QrReader.Read 則會回傳一個 IEnumerable<QrResult>,其中每個 QR 碼對應一個條目。 FirstOrDefault 能安全地處理不含 QR 碼的圖片,且不會拋出例外。

輸出

選取 QR 碼圖片並點擊"掃描 QR 碼"後,解碼後的值會顯示在控制項下方的結果段落中。

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

在 Blazor 元件中渲染的解碼 QR 碼值

下載專案

點擊此處下載完整的 BlazorQrScanner 專案。

結論

IronQR 可無需 JavaScript 即可整合至 Blazor Server 應用程式中。 InputFile 提供瀏覽器原生檔案選取功能,而 QrReader.Read 則完全在伺服器端進行解碼處理。 相同的模式可擴展至掃描單張圖片中的多個 QR 碼,方法是遍歷完整的結果集合,而非呼叫 FirstOrDefault

有關讀取 QR 碼及可用掃描模式的更多資訊,請參閱《從圖片讀取 QR 碼》和《使用掃描模式讀取 QR 碼》指南。

常見問題

在 Blazor Server 應用程式中,IronQR 的主要用途為何?

IronQR 主要用於 Blazor Server 應用程式中,可透過瀏覽器上傳的圖片進行伺服器端 QR 碼掃描,無需使用 JavaScript。

如何在 Blazor 專案中安裝 IronQR程式庫?

要在 Blazor 專案中安裝 IronQR程式庫,請使用 Visual Studio 中的 NuGet 套件管理主控台並執行安裝指令,或在 NuGet 上搜尋「IronQR」並安裝最新版本。

Blazor 中使用哪個元件來處理 QR 碼掃描的圖片上傳?

`InputFile` 元件用於在 Blazor 中處理圖片上傳,讓使用者能從瀏覽器中選取圖片以進行 QR 碼掃描。

IronQR 如何在 Blazor 應用程式中解碼 QR 碼?

在 Blazor 應用程式中,IronQR 透過將選定的圖片載入 `AnyBitmap`,再使用 `QrReader.Read()` 來解碼 QR 碼,藉此擷取並顯示 QR 碼的資料。

IronQR 能否處理包含多個 QR 碼的圖片?

是的,IronQR 可以透過遍歷 `QrReader.Read()` 所返回的 `IEnumerable` 集合,來處理包含多個 QR 碼的圖片

在 Blazor 中使用 IronQR 實現 QR 碼掃描功能,是否需要 JavaScript?

不,您無需使用 JavaScript 即可在 Blazor 中透過 IronQR 實現 QR 碼掃描,因為整個流程皆由伺服器端處理。

在 IronQR 掃描過程中,`AnyBitmap` 扮演什麼角色?

`AnyBitmap` 用於解碼上傳檔案的圖像格式,使其能透過 IronQR 進行 QR 碼讀取。

Blazor 如何顯示 QR 碼掃描的結果?

Blazor 會透過在元件的 UI 中,於段落元素內渲染解碼後的值,來顯示 QR 碼掃描的結果。

若在 Blazor 掃描器中上傳沒有 QR 碼的圖片,會發生什麼情況?

若上傳的圖片未包含 QR 碼,在 `QrReader.Read()` 所返回的 `IEnumerable` 上呼叫 `FirstOrDefault`,可安全地處理此情況,且不會拋出例外。

是否可以下載完整的 Blazor QR Scanner 專案?

是的,您可以從指南網頁上的連結下載完整的 Blazor QR Scanner 專案。

Curtis Chau
技術撰稿人

Curtis Chau 擁有卡爾頓大學(Carleton University)的電腦科學學士學位,專精於前端開發,並精通 Node.js、TypeScript、JavaScript 及 React。他熱衷於打造直觀且美觀的用戶介面,喜歡運用現代框架,並創建結構完善、視覺上吸引人的手冊。

除了開發工作之外,Curtis 對物聯網(IoT)抱有濃厚興趣,致力於探索整合硬體與軟體的創新方法。閒暇時,他喜歡玩遊戲和開發 Discord 機器人,將對科技的熱愛與創意相結合。

準備開始了嗎?
Nuget 下載 67,270 | 版本: 2026.5 just released
Still Scrolling Icon

還在往下捲動嗎?

想要快速確認成果嗎? PM > Install-Package IronQR
執行範例 觀看您的 URL 轉為 QR 碼。