Jak zbudować skaner kodów QR w Blazor

Updated: 3 marca 2026

Blazor Server to web framework .NET, który uruchamia C# po stronie serwera i przesyła aktualizacje interfejsu użytkownika do przeglądarki przez połączenie SignalR. IronQR integruje się bezpośrednio z Blazor Server, umożliwiając skanowanie kodów QR po stronie serwera z obrazów przesyłanych przez przeglądarkę bez użycia JavaScript.

W tym przewodniku krok po kroku zbudujemy stronę Blazor Server, która akceptuje przesyłanie obrazów i dekoduje każdy osadzony kod QR za pomocą IronQR.

Jak zeskanować kod QR w Blazor

Zainstaluj bibliotekę IronQR C# do skanowania kodów QR w sieci
Dodaj komponent InputFile, aby akceptować przesyłanie obrazów z przeglądarki
Prześlij przesłany plik do tymczasowej ścieżki na serwerze
Zaladuj obraz i owin go w QrImageInput
Wywołaj Read i wyświetl wartość dekodowaną w komponencie Blazor

Wymagania wstępne

Visual Studio 2022 z zainstalowanym obciążeniem ASP.NET and web development
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 wykonaj:

PM > Install-Package IronQR

Install-Package IronQR

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

Układ komponentu Blazor

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

Dodaj nowy komponent Razor Scanner.razor z następującą strukturą 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>

@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

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. Zdekodowana wartość powinna być wyświetlana jako https://ironsoftware.com.

Przykładowy kod QR kodujący https://ironsoftware.com do testowania skanera QR w Blazor

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

Skanowanie kodów QR przy użyciu IronQR

Kiedy plik zostanie wybrany, OnFileSelected przesyła przesłanie przeglądarki do tymczasowego pliku na serwerze. Kiedy przycisk skanowania zostanie kliknięty, ScanQRCode ładuje plik do AnyBitmap, przekazuje go do QrReader.Read() i zapisuje pierwszą zdekodowaną wartość do scannedText, która jest automatycznie renderowana przez Blazor w komponencie.

Dodaj następujący blok @code do Scanner.razor:

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 przesyła przesłane bajty bezpośrednio do pliku tymczasowego 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 kodów QR bez generowania 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 natywne wybieranie plików w przeglądarce, a QrReader.Read obsługuje dekodowanie w całości na serwerze. Ten sam schemat skaluje się do skanowania wielu kodów QR na obraz, iterując po pełnej 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.

Często Zadawane Pytania

Jaki jest główny cel stosowania IronQR w aplikacji Blazor Server?

IronQR jest głównie używany w aplikacji Blazor Server do umożliwienia skanowania QR kodów po stronie serwera z obrazów przesłanych przez przeglądarkę, bez potrzeby JavaScriptu.

Jak zainstalować bibliotekę IronQR w projekcie Blazor?

Aby zainstalować bibliotekę IronQR w projekcie Blazor, użyj Konsoli Menedżera Pakietów NuGet w Visual Studio i uruchom polecenie instalacyjne, lub wyszukaj 'IronQR' na NuGet i zainstaluj najnowszą wersję.

Jaki komponent jest używany w Blazor do obsługi przesyłania obrazów do skanowania QR kodów?

Komponent `InputFile` jest używany w Blazor do obsługi przesyłania obrazów, pozwalając użytkownikom wybrać obrazy z przeglądarki do skanowania QR kodów.

Jak IronQR dekoduje QR kody w aplikacji Blazor?

W aplikacji Blazor, IronQR dekoduje QR kody, ładując wybrany obraz do `AnyBitmap`, a następnie używając `QrReader.Read()` do wyodrębnienia i wyświetlenia danych QR kodu.

Czy IronQR obsługuje obrazy z wieloma QR kodami?

Tak, IronQR może obsługiwać obrazy z wieloma QR kodami, iterując nad kolekcją `IEnumerable` zwróconą przez `QrReader.Read()`.

Czy potrzebujesz JavaScriptu do implementacji skanowania QR kodu z IronQR w Blazor?

Nie, nie potrzebujesz JavaScriptu do implementacji skanowania QR kodu z IronQR w Blazor, ponieważ cały proces jest obsługiwany po stronie serwera.

Jaka jest rola `AnyBitmap` w procesie skanowania QR z IronQR?

`AnyBitmap` służy do dekodowania formatu obrazu przesłanego pliku, przygotowując go do odczytu QR kodu za pomocą IronQR.

Jak Blazor wyświetla wynik skanowania QR kodu?

Blazor wyświetla wynik skanowania QR kodu, renderując zdekodowaną wartość w elemencie paragrafu w interfejsie użytkownika komponentu.

Co się dzieje, jeśli obraz bez QR kodu zostanie przesłany w skanerze Blazor?

Jeśli zostanie przesłany obraz bez QR kodu, wywołanie `FirstOrDefault` na `IEnumerable` zwróconym przez `QrReader.Read()` bezpiecznie obsłuży sytuację bez wyrzucania wyjątku.

Czy można pobrać kompletny projekt Blazor QR Scanner?

Tak, można pobrać kompletny projekt Blazor QR Scanner z podanego linku na stronie przewodnika.

Curtis Chau

Czat z zespołem inżynierów teraz

Autor tekstów technicznych

Curtis Chau posiada tytuł licencjata z informatyki (Uniwersytet Carleton) i specjalizuje się w front-endowym rozwoju, z ekspertką w Node.js, TypeScript, JavaScript i React. Pasjonuje się tworzeniem intuicyjnych i estetycznie przyjemnych interfejsów użytkownika, Curtis cieszy się pracą z nowoczesnymi frameworkami i tworzeniem dobrze zorganizowanych, atrakcyjnych wizualnie podręczników.

...

Czytaj więcej