Wie man einen QR-Code-Scanner in Blazor erstellt

Updated: 3. März 2026

Blazor Server ist ein .NET Web-Framework, das C# auf dem Server ausführt und UI-Updates über eine SignalR-Verbindung an den Browser überträgt. IronQR integriert sich direkt in Blazor Server und ermöglicht serverseitiges QR-Code-Scannen von Browser-hochgeladenen Bildern ohne JavaScript.

In dieser Anleitung erstellen wir eine Blazor Server-Seite, die ein Bild-Upload akzeptiert und jeden eingebetteten QR-Code mit IronQR dekodiert.

Wie man einen QR-Code in Blazor scannt

Installieren Sie die IronQR C#-Bibliothek zum Scannen von QR-Codes im Web
Fügen Sie eine InputFile-Komponente hinzu, um Bild-Uploads vom Browser zu akzeptieren
Streamen Sie die hochgeladene Datei zu einem temporären Pfad auf dem Server
Laden Sie das Bild und umwickeln Sie es in einem QrImageInput
Rufen Sie Read auf und zeigen Sie den dekodierten Wert in der Blazor-Komponente an

Voraussetzungen

Visual Studio 2022 mit dem ASP.NET und Webentwicklung Arbeitslast installiert
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 aus:

PM > Install-Package IronQR

Install-Package IronQR

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

Blazor-Komponentenlayout

Die Scanner-Benutzeroberfläche verwendet Blazors eingebautes InputFile-Komponenten für den browsernativen Dateiauswahl, einen Button, um den Scan auszulösen, und einen Absatz, um das dekodierte Ergebnis anzuzeigen. Kein JavaScript-Interoperabilität erforderlich.

Fügen Sie eine neue Razor-Komponente Scanner.razor mit folgendem 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>

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

Text

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, der https://ironsoftware.com codiert, zum Testen des Blazor-QR-Scanners

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 Scannen-Button geklickt wird, lädt ScanQRCode die Datei in ein AnyBitmap, übergibt es an QrReader.Read() und schreibt den ersten dekodierten Wert nach scannedText, welches Blazor automatisch in der Komponente rendert.

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

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.";
    }
}

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

Private qrImageSrc As String
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

Imports IronQr
Imports IronSoftware.Drawing

Private qrImageSrc As String
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 behandelt 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.

Blazor QR-Code-Scanner mit IronQR – decodiertes Ergebnis auf der Seite angezeigt

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 browsernative Dateiauswahl, und QrReader.Read übernimmt die Decodierung vollständig auf dem Server. Das gleiche Muster skaliert auf das Scannen mehrerer QR-Codes pro Bild, indem über die vollständige Ergebnis-Sammlung iteriert wird, anstatt FirstOrDefault zu rufen.

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.

Häufig gestellte Fragen

Was ist der Hauptzweck von IronQR in einer Blazor Server-Anwendung?

IronQR wird in einer Blazor Server-Anwendung hauptsächlich verwendet, um serverseitiges QR-Code-Scanning von im Browser hochgeladenen Bildern zu ermöglichen, ohne JavaScript zu benötigen.

Wie installieren Sie die IronQR-Bibliothek in einem Blazor-Projekt?

Um die IronQR-Bibliothek in einem Blazor-Projekt zu installieren, verwenden Sie die NuGet-Paket-Manager-Konsole in Visual Studio und führen Sie den Installationsbefehl aus, oder suchen Sie auf NuGet nach 'IronQR' und installieren Sie die neueste Version.

Welche Komponente wird in Blazor verwendet, um Bild-Uploads für QR-Code-Scanning zu handhaben?

Die `InputFile`-Komponente wird in Blazor verwendet, um Bild-Uploads zu handhaben und Benutzern zu ermöglichen, Bilder aus dem Browser für QR-Code-Scanning auszuwählen.

Wie dekodiert IronQR QR-Codes in einer Blazor-Anwendung?

In einer Blazor-Anwendung dekodiert IronQR QR-Codes, indem es das ausgewählte Bild in ein `AnyBitmap` lädt und dann `QrReader.Read()` verwendet, um die Daten des QR-Codes zu extrahieren und anzuzeigen.

Kann IronQR mit Bildern umgehen, die mehrere QR-Codes enthalten?

Ja, IronQR kann mit Bildern umgehen, die mehrere QR-Codes enthalten, indem es über die `IEnumerable`-Sammlung iteriert, die von `QrReader.Read()` zurückgegeben wird.

Benötigen Sie JavaScript, um QR-Code-Scanning mit IronQR in Blazor zu implementieren?

Nein, Sie benötigen kein JavaScript, um QR-Code-Scanning mit IronQR in Blazor zu implementieren, da der gesamte Prozess serverseitig abgewickelt wird.

Welche Rolle spielt `AnyBitmap` im IronQR-Scan-Prozess?

`AnyBitmap` wird verwendet, um das Bildformat der hochgeladenen Datei zu dekodieren und es für die QR-Code-Lesung mit IronQR vorzubereiten.

Wie zeigt Blazor das Ergebnis eines QR-Code-Scans an?

Blazor zeigt das Ergebnis eines QR-Code-Scans an, indem es den dekodierten Wert in einem Absatz innerhalb der UI-Komponente rendert.

Was passiert, wenn ein Bild ohne QR-Code im Blazor-Scanner hochgeladen wird?

Wenn ein Bild ohne QR-Code hochgeladen wird, behandelt `FirstOrDefault` die Situation sicher, ohne eine Ausnahme auszulösen, indem es auf die von `QrReader.Read()` zurückgegebene `IEnumerable` aufgerufen wird.

Ist es möglich, das vollständige Blazor QR Scanner-Projekt herunterzuladen?

Ja, Sie können das vollständige Blazor QR Scanner-Projekt über den bereitgestellten Link auf der Anleitung-Webseite herunterladen.

Curtis Chau

Jetzt mit dem Ingenieurteam chatten

Technischer Autor

Curtis Chau hat einen Bachelor-Abschluss in Informatik von der Carleton University und ist spezialisiert auf Frontend-Entwicklung mit Expertise in Node.js, TypeScript, JavaScript und React. Leidenschaftlich widmet er sich der Erstellung intuitiver und ästhetisch ansprechender Benutzerschnittstellen und arbeitet gerne mit modernen Frameworks sowie der Erstellung gut strukturierter, optisch ansprechender Handbücher.

...