Blazor'da QR Kod Tarayıcı Nasıl Yapılır

Ön Koşullar

1. ASP.NET ve web geliştirme iş yükü yüklü Visual Studio 2022
2. .NET 8 veya daha üstünü hedefleyen bir Blazor Server projesi

IronQR Yükleme

Visual Studio'daki NuGet Package Manager Console kullanarak IronQR kütüphanesini yükleyin. Aşağıdaki komutu çalıştırmak için Tools > NuGet Package Manager > Package Manager Console'a gidin:

Install-Package IronQR

Alternatif olarak, NuGet üzerinde IronQR arayın ve en son sürümü yükleyin.

Blazor Bileşen Yerleşimi

Tarayıcı arayüzü, tarayıcı yerel dosya seçimi için Blazor'un yerleşik InputFile bileşenini, taramayı tetiklemek için bir buton ve çözümlenen sonucu göstermek için bir paragraf kullanır. JavaScript entegrasyonu gerektirmez.

Aşağıdaki işaretleme ile yeni bir Razor bileşeni Scanner.razor ekleyin:

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

Örnek Girdi

Aşağıdaki QR kodunu test resmi olarak kullanın. Cihazınıza kaydedin, uygulamadaki dosya seçim aracılığıyla yükleyin, ardından QR Kodunu Taramak için Tıklayın tıklayın. Çözümlenen değer https://ironsoftware.com olarak görüntülenmelidir.

Örnek QR kodu - https://ironsoftware.com kodluyor

IronQR ile QR Kod Tarama

Bir dosya seçildiğinde, OnFileSelected tarayıcı yüklemesini sunucuda geçici bir dosyaya aktarır. Taramayı başlat butonuna tıklandığında, ScanQRCode dosyayı AnyBitmap içine yükler, onu QrReader.Read()'a iletir ve ilk çözümlenen değeri scannedText'a yazar, bu da Blazor tarafından bileşende otomatik olarak render edilir.

Scanner.razor'a aşağıdaki @code bloğunu ekleyin:

: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 yüklenen baytları doğrudan sunucu tarafında bir geçici dosyaya aktarır. AnyBitmap.FromFile görüntü formatını çözer ve QrReader.Read, bulunan her QR kodu için bir giriş ile birlikte bir IEnumerable<QrResult> döndürür. FirstOrDefault istisna atmadan QR kod içermeyen görselleri güvenle işler.

Çıktı

Bir QR kodu görüntüsü seçip QR Kodunu Tara tıkladıktan sonra, çözümlenen değer aşağıdaki kontrolün altındaki sonuç paragrafında gösterilir.

Çözümlenen QR kodu değeri Blazor bileşende gösteriliyor

Projeyi İndir

Tamamlanmış BlazorQrScanner projesini indirmek için buraya tıklayın.

Sonuç

IronQR, herhangi bir JavaScript olmadan Blazor Server uygulamasına entegre ediliyor. InputFile tarayıcı-yerel dosya seçimi sağlar ve QrReader.Read tamamen sunucu üzerinde çözümlemeyi gerçekleştirir. Aynı desen, FirstOrDefault çağrısı yerine tam sonuçlar koleksiyonu üzerinde iterasyon yaparak görüntü başına birden fazla QR kodu taramak için ölçeklenebilir.

QR kodlarını okuma ve kullanılabilir tarama modları hakkında daha fazla bilgi için, Görselden QR Kodları Oku ve Tarama Modları ile QR Kodları Oku kılavuzlarına bakın.