如何在Blazor中構建QR Code掃描器

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

Blazor Server 是一個.NET網頁框架,能讓C#在伺服器上運行,並通過SignalR連接將介面更新推送到瀏覽器上。 IronQR可直接整合到Blazor Server中,允許伺服器端從瀏覽器上傳的圖像進行QR Code掃描,無須JavaScript。

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

先決條件

  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 Code作為測試圖像。 將其保存到您的裝置,通過應用程式中的文件選擇器上傳,然後點擊掃描QR Code。 解碼值應顯示為https://ironsoftware.com

編碼 https://ironsoftware.com 的範例 QR 碼,用於測試 Blazor QR 掃描器

範例QR Code — 編碼https://ironsoftware.com

使用IronQR掃描QR Code

選擇文件時,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

InputFile.OpenReadStream 將上傳的字節直接流到伺服器端臨時文件。AnyBitmap.FromFile 解碼圖像格式,QrReader.Read 返回一個每個發現的QR Code一個條目的IEnumerable<QrResult>FirstOrDefault 安全地處理沒有QR Code的圖像,而不拋出異常。

輸出

選擇QR Code圖像並點擊掃描QR Code後,解碼值將在控件下方的結果段落中渲染。

使用 IronQR 的 Blazor QR Code 掃描器 — 頁面上顯示解碼結果

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

下載專案

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

結論

IronQR無需JavaScript即可整合到Blazor Server應用程式中。 QrReader.Read則完全在伺服器上處理解碼。 相同的模式可擴展以通過遍歷完整結果集合掃描每張圖像中的多個QR Code,而不是調用FirstOrDefault

要了解更多有關讀取QR Code和可用掃描模式的資訊,請參閱從圖像讀取QR Code使用掃描模式讀取QR Code指南。

常見問題

在 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大學的電腦科學學士學位,專精於前端開發,擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面,喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。

除了開發,Curtis對物聯網(IoT)有濃厚的興趣,探索創新的方法來整合硬體和軟體。在空閒時間,他喜歡玩遊戲和建立Discord機器人,結合他對技術的熱愛與創造力。

準備好開始了嗎?
Nuget 下載 70,398 | 版本: 2026.7 剛剛發布
Still Scrolling Icon

還在滾動?

想要快速證明嗎? PM > Install-Package IronQR
執行一個範例 觀看您的URL變成QR碼。