Jak zbudować skaner kodów QR w Blazor

Wymagania wstępne

1. Visual Studio 2022 z zainstalowanym obciążeniem ASP.NET and web development
2. Projekt Blazor Server skierowany na .NET 8 lub nowszy

Zainstaluj IronQR

Zainstaluj bibliotekę IronQR za pomocą NuGet Package Manager Console w Visual Studio. Przejdź do Tools > NuGet Package Manager > Package Manager Console i uruchom:

Install-Package IronQR

Alternatywnie, wyszukaj IronQR na NuGet i zainstaluj najnowszą wersję.

Układ komponentu Blazor

Interfejs skanera używa wbudowanego komponentu InputFile w Blazor do natywnego wyboru plików w przeglądarce, przycisku do wywołania skanowania oraz akapitu do wyświetlania dekodowanego wyniku. Nie jest wymagana interoperacyjność z JavaScript.

Dodaj nowy komponent Razor Scanner.razor z następującym kodem znaczników:

@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>

Przykładowe wejście

Użyj poniższego kodu QR jako obrazu testowego. Zapisz go na swoim urządzeniu, prześlij przez selektor plików w aplikacji, a następnie kliknij Scan QR Code. Dekodowana wartość powinna wyświetlać się jako https://ironsoftware.com.

Przykładowy kod QR — koduje https://ironsoftware.com

Skanowanie kodów QR przy użyciu IronQR

Po wybraniu pliku, OnFileSelected przesyła przesyłkę przeglądarkową do tymczasowego pliku na serwerze. Gdy przycisk skanowania jest kliknięty, ScanQRCode ładuje plik do AnyBitmap, przekazuje go do QrReader.Read() i zapisuje pierwszą dekodowaną wartość w scannedText, którą Blazor automatycznie renderuje w komponencie.

Dodaj poniższy blok @code do 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 przesyła przesłane bajty bezpośrednio do temp pliku po stronie serwera. AnyBitmap.FromFile dekoduje format obrazu, a QrReader.Read zwraca IEnumerable<QrResult> z jednym wpisem na każdy znaleziony kod QR. FirstOrDefault bezpiecznie obsługuje obrazy bez kodu QR, nie zgłaszając wyjątku.

Wynik

Po wybraniu obrazu kodu QR i kliknięciu Scan QR Code, dekodowana wartość renderuje się w akapicie wyników pod kontrolkami.

Dekodowana wartość kodu QR renderowana w komponencie Blazor

Pobierz projekt

Kliknij tutaj, aby pobrać kompletny projekt BlazorQrScanner.

Wnioski

IronQR integruje się z aplikacją Blazor Server bez JavaScript. InputFile zapewnia natywny wybór plików w przeglądarce, a QrReader.Read obsługuje dekodowanie całkowicie po stronie serwera. Ten sam schemat skaluje się na skanowanie wielu kodów QR na obraz, iterując po całej kolekcji wyników zamiast wywoływać FirstOrDefault.

Aby dowiedzieć się więcej o czytaniu kodów QR i dostępnych trybach skanowania, zobacz przewodniki Read QR Codes from Image oraz Read QR Codes with Scan Modes.