Wie man einen QR-Code-Scanner in Blazor erstellt

Voraussetzungen

1. Visual Studio 2022 mit der Arbeitslast ASP.NET und Webentwicklung installiert
2. Ein Blazor Server-Projekt mit Ziel .NET 8 oder höher

Installieren Sie IronQR

Installieren Sie die IronQR-Bibliothek mit der NuGet-Paket-Manager-Konsole in Visual Studio. Navigieren Sie zu Tools > NuGet Package Manager > Package Manager Console und führen Sie aus:

Install-Package IronQR

Alternativ suchen Sie nach IronQR auf NuGet und installieren die neueste Version.

Blazor-Komponentenlayout

Das Scanner-UI verwendet Blazors integrierte InputFile-Komponente für die browsernative Dateiauswahl, einen Knopf zum Auslösen des Scans und einen Absatz, um das dekodierte Ergebnis anzuzeigen. Keine JavaScript-Interop ist erforderlich.

Fügen Sie eine neue Razor-Komponente Scanner.razor mit dem folgenden Markup hinzu:

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

Beispieleingabe

Verwenden Sie den untenstehenden QR-Code als Testbild. Speichern Sie es auf Ihrem Gerät, laden Sie es über den Dateiauswähler in der App hoch und klicken Sie dann auf QR-Code scannen. Der dekodierte Wert sollte als https://ironsoftware.com angezeigt werden.

Beispiel-QR-Code — kodiert `https://ironsoftware.com`

QR-Code-Scannen mit IronQR

Wenn eine Datei ausgewählt wird, streamt OnFileSelected den Browser-Upload in eine temporäre Datei auf dem Server. Wenn der Scan-Knopf geklickt wird, lädt ScanQRCode die Datei in ein AnyBitmap, übergibt es an QrReader.Read() und schreibt den ersten dekodierten Wert in scannedText, das Blazor automatisch in der Komponente rendert.

Fügen Sie den folgenden @code-Block zu Scanner.razor hinzu:

: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 streamt die hochgeladenen Bytes direkt in eine serverseitige Temporärdatei. AnyBitmap.FromFile dekodiert das Bildformat, und QrReader.Read gibt ein IEnumerable<QrResult> mit einem Eintrag pro gefundenem QR-Code zurück. FirstOrDefault handhabt Bilder ohne QR-Code sicher, ohne eine Ausnahme zu werfen.

Ausgabe

Nach der Auswahl eines QR-Code-Bildes und dem Klick auf QR-Code scannen, wird der dekodierte Wert im Ergebnisabsatz unter den Bedienelementen gerendert.

Dekodierter QR-Code-Wert in der Blazor-Komponente gerendert

Projekt herunterladen

Klicken Sie hier, um das vollständige BlazorQrScanner-Projekt herunterzuladen.

Abschluss

IronQR integriert sich in eine Blazor Server-Anwendung ohne JavaScript. InputFile bietet eine browsernative Dateiauswahl, und QrReader.Read verarbeitet das Dekodieren vollständig auf dem Server. Das gleiche Muster skaliert auf das Scannen mehrerer QR-Codes pro Bild, indem über die vollständige Ergebnissammlung iteriert wird, anstatt FirstOrDefault zu aufzurufen.

Für weitere Informationen zum Lesen von QR-Codes und den verfügbaren Scanmodi siehe die Anleitungen QR-Codes vom Bild lesen und QR-Codes mit Scanmodi lesen.