Wie man einen QR-Code-Scanner in Blazor erstellt

Voraussetzungen

1. Visual Studio 2022 mit dem ASP.NET und Webentwicklung Arbeitslast installiert
2. Ein Blazor Server-Projekt, das .NET 8 oder höher anvisiert

IronQR installieren

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

Install-Package IronQR

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

Blazor-Komponentenlayout

Die Benutzeroberfläche des Scanners nutzt die in Blazor integrierte InputFile-Komponente für die browser-native Dateiauswahl, eine Schaltfläche zum Auslösen des Scans und einen Absatz zur Anzeige des decodierten Ergebnisses. Kein JavaScript-Interoperabilität 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>

Beispielformat

Verwenden Sie den untenstehenden QR-Code als Testbild. Speichern Sie es auf Ihrem Gerät, laden Sie es über den Dateiauswahl im 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, leitet OnFileSelected den Browser-Upload in eine temporäre Datei auf dem Server um. Wenn die Scan-Schaltfläche angeklickt wird, lädt ScanQRCode die Datei in ein AnyBitmap, übergibt sie an QrReader.Read() und schreibt den ersten decodierten Wert in scannedText, den 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äre Datei. AnyBitmap.FromFile dekodiert das Bildformat, und QrReader.Read gibt ein IEnumerable<QrResult> mit einem Eintrag pro gefundenem QR-Code zurück. FirstOrDefault verarbeitet Bilder ohne QR-Code sicher, ohne eine Ausnahme auszulösen.

Ausgabe

Nach Auswahl eines QR-Code-Bildes und Klick auf QR-Code scannen wird der dekodierte Wert im Ergebnisabsatz unter den Steuerelementen dargestellt.

Dekodierter QR-Code-Wert im Blazor-Komponenten gerendert

Downloaden Sie das Projekt

Hier klicken, um das komplette BlazorQrScanner-Projekt herunterzuladen.

Abschluss

IronQR integriert sich nahtlos in eine Blazor Server-Anwendung ohne JavaScript. InputFile bietet eine browser-native Dateiauswahl, und QrReader.Read übernimmt die Dekodierung vollständig auf dem Server. Das gleiche Muster lässt sich auf das Scannen mehrerer QR-Codes pro Bild übertragen, indem die gesamte Ergebnissammlung durchlaufen wird, anstatt FirstOrDefault aufzurufen.

Für mehr Informationen zum Lesen von QR-Codes und den verfügbaren Scanmodi, siehe die Lesen von QR-Codes aus Bild und Lesen von QR-Codes mit Scanmodi Anleitungen.