Comment créer un scanner de code QR dans Blazor

Prérequis

1. Visual Studio 2022 avec la charge de travail ASP.NET et développement web installée
2. Un projet Blazor Server ciblant .NET 8 ou une version ultérieure

Installer IronQR

Installez la bibliothèque IronQR en utilisant la console du gestionnaire de packages NuGet dans Visual Studio. Accédez à Tools > NuGet Package Manager > Package Manager Console et exécutez :

Install-Package IronQR

Vous pouvez également rechercher IronQR sur NuGet et installer la dernière version.

Disposition du composant Blazor

L'interface utilisateur du scanner utilise le composant intégré InputFile de Blazor pour la sélection de fichiers native du navigateur, un bouton pour lancer la numérisation et un paragraphe pour afficher le résultat décodé. Aucune interopérabilité JavaScript n'est requise.

Ajoutez un nouveau composant Razor Scanner.razor avec le balisage suivant :

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

Exemple d'entrée

Utilisez le code QR ci-dessous comme image test. Enregistrez-le sur votre appareil, téléchargez-le via le sélecteur de fichiers dans l'application, puis cliquez sur Scanner le code QR. La valeur décodée doit s'afficher sous la forme https://ironsoftware.com.

Exemple de code QR — encode https://ironsoftware.com

Scan de code QR avec IronQR

Lorsqu'un fichier est sélectionné, OnFileSelected transfère le fichier téléchargé par le navigateur vers un fichier temporaire sur le serveur. Lorsque l'on clique sur le bouton de numérisation, ScanQRCode charge le fichier dans un AnyBitmap, le transmet à QrReader.Read() et écrit la première valeur décodée dans scannedText, que Blazor affiche automatiquement dans le composant.

Ajoutez le bloc @code suivant à Scanner.razor :

: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 transmet les octets téléchargés directement vers un fichier temporaire côté serveur. AnyBitmap.FromFile décode le format d'image, et QrReader.Read renvoie un IEnumerable<QrResult> contenant une entrée par code QR trouvé. FirstOrDefault gère en toute sécurité les images ne contenant pas de code QR sans générer d'exception.

Sortie

Après avoir sélectionné une image de code QR et cliqué sur Scanner le code QR, la valeur décodée s'affiche dans le paragraphe de résultat sous les contrôles.

Valeur du code QR décodée rendue dans le composant Blazor

Téléchargez le projet

Cliquez ici pour télécharger le projet BlazorQrScanner complet.

Conclusion

IronQR s'intègre dans une application Blazor Server sans JavaScript. InputFile permet la sélection de fichiers native du navigateur, et QrReader.Read gère entièrement le décodage sur le serveur. Le même modèle s'applique à la lecture de plusieurs codes QR par image en parcourant l'ensemble des résultats au lieu d'appeler FirstOrDefault.

Pour en savoir plus sur la lecture de codes QR et les modes de scan disponibles, consultez les guides Lire les codes QR à partir d'une image et Lire les codes QR avec les modes de scan.