Blazor'da Bir QR Kod Tarayıcı Nasıl Oluşturulur

Gereksinimler

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

IronQR Kurulumu

IronQR kütüphanesini Visual Studio'daki NuGet Paket Yöneticisi Konsolu'nu kullanarak yükleyin. Tools > NuGet Package Manager > Package Manager Console adresine gidin ve şunu çalıştırın:

Install-Package IronQR

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

Blazor Bileşen Düzeni

Tarayıcı kullanıcı arayüzü, tarayıcıya özgü dosya seçimi için Blazor'un yerleşik InputFile bileşenini, taramayı başlatmak için bir düğmeyi ve kod çözülmüş sonucu görüntülemek için bir paragrafı kullanır. JavaScript arayüzü gerekmez.

Aşağıdaki işaretlemeyle 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 Giriş

Aşağıdaki QR kodunu test görüntüsü olarak kullanın. Cihazınıza kaydedin, uygulamadaki dosya seçimci ile yükleyin, ardından QR Kodunu Tara'ya tıklayın. Çözülen değer https://ironsoftware.com şeklinde görüntülenmelidir.

Örnek QR kodu — https://ironsoftware.com kodlar

IronQR ile QR Kod Tarama

Bir dosya seçildiğinde, OnFileSelected tarayıcı yüklemesini sunucudaki geçici bir dosyaya aktarır. Tarama düğmesine tıklandığında, ScanQRCode dosyayı bir AnyBitmap içine yükler, QrReader.Read()'ye aktarır ve ilk kod çözülmüş değeri scannedText'ye yazar; Blazor bu değeri bileşende otomatik olarak görüntüler.

Aşağıdaki @code bloğunu Scanner.razor'ye 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ındaki bir geçici dosyaya aktarır. AnyBitmap.FromFile, görüntü formatını kod çözer ve QrReader.Read, bulunan her QR kodu için bir giriş içeren bir IEnumerable<QrResult> döndürür. FirstOrDefault, istisna oluşturmadan QR kodu içermeyen görüntüleri güvenli bir şekilde işler.

Çıktı

Bir QR kodu görüntüsü seçildikten ve QR Kodunu Tara'ya tıklandıktan sonra, çözülen değer aşağıdaki sonuç paragrafında kontrol ögelerinin altında görüntülenir.

Çözülen QR kodu değeri Blazor bileşeninde görüntülendi

Projeyi İndir

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

Sonuç

IronQR, herhangi bir JavaScript olmadan bir Blazor Server uygulamasına entegre olur. InputFile tarayıcıya özgü dosya seçimi sağlar ve QrReader.Read kod çözme işlemini tamamen sunucuda gerçekleştirir. Aynı model, FirstOrDefault çağrısı yapmak yerine tüm sonuç koleksiyonunu yineleyerek görüntü başına birden fazla QR kodunu taramaya da uygulanabilir.

QR kodlarını okuma ve mevcut tarama modları hakkında daha fazla bilgi için Görüntüden QR Kodları Okuma ve Tarama Modlarıyla QR Kodları Okuma kılavuzlarına bakın.