Comment créer un scanner de codes QR Blazor

Qu'est-ce qu'un Blazor Server ?

Blazor Server est un framework d'applications web qui fait partie de la plateforme ASP.NET Core. Il permet aux développeurs de créer des interfaces utilisateur web interactives en utilisant C# au lieu de JavaScript. Ce modèle côté serveur fonctionne en gérant les interactions des utilisateurs via une connexion SignalR, qui fourni une fonctionnalité web en temps réel. Cela aide les développeurs à créer des applications web efficaces et interactives.

Introduction à IronQR

IronQR is a .NET library that stands out for its ability to read, interpret, and générer des codes QR avec une grande précision. Elle offre une gamme de fonctionnalités, notamment la capacité de gérer différents types de contenus de code QR. La force d'IronQR réside dans sa simplicité et sa facilité d'intégration dans les applications .NET, en faisant un choix privilégié pour les développeurs qui cherchent à incorporer et créer des fonctionnalités de codes QR.

Créer une Nouvelle Application Blazor Server

Démarrez Visual Studio et choisissez "Créer un nouveau projet". Dans l'écran de sélection du modèle de projet, trouvez et sélectionnez le modèle "Blazor Server App". Cliquez sur Suivant.

Après avoir choisi le modèle, entrez un nom de projet et un emplacement (gardez tout le reste aux valeurs par défaut) et cliquez sur le bouton Suivant.

Sélectionnez maintenant le Framework .NET souhaité et cliquez sur le bouton créer. Cela créera une application Blazor Server.

Installer la Bibliothèque IronQR

Cliquez sur les Outils dans la barre de menu. Dans le menu déroulant, sélectionnez le gestionnaire de packages NuGet. Dans le menu contextuel, sélectionnez "Gérer les packages NuGet pour la solution". Cela ouvrira l'onglet du gestionnaire de packages NuGet.

Dans le gestionnaire de packages NuGet, recherchez "IronQR" dans l'onglet "Parcourir". Localisez ensuite le package "IronQR" dans la liste. Cliquez sur le bouton "Installer".

Maintenant que vous avez tout installé, nous pouvons passer à la structure du projet et tout implémenter dans votre projet.

Construire l'Interface Utilisateur

L'interface utilisateur pour le scanner de code QR est principalement construite dans le fichier Index.razor. Ce fichier, qui fait partie d'un projet Blazor Server, utilise une combinaison de HTML et de syntaxe Razor pour créer une page web dynamique et interactive. La structure inclut :

@page "/"
@using System.IO
@using Microsoft.AspNetCore.Components.Forms
@using IronQr
@using IronSoftware.Drawing
@inject IJSRuntime JSRuntime
<PageTitle>QR Code Scanner</PageTitle>
<div>
    <h1>QR Code Scanner</h1> 
    <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" />
    @if (!string.IsNullOrEmpty(qrImageSrcForDisplay))
    {
        <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
    }
    <button @onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button">Scan QR Code</button>
    @if (!string.IsNullOrEmpty(scannedText))
    {
        <div class="result-section">
            <input type="text" value="@scannedText" readonly class="result-input" />
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

Titre et En-tête : Les balises <PageTitle> et <h1> définissent respectivement le titre de la page et l'en-tête principal, définissant le contexte pour l'utilisateur.

Contrôle de Téléchargement d'Image : Un composant <InputFile> est utilisé pour télécharger les images de code QR. Cet élément est conçu pour accepter uniquement les fichiers image, améliorant l'expérience utilisateur en filtrant les types de fichiers non pertinents.

Affichage de l'Image : Une fois une image téléchargée, elle est affichée à l'aide d'une balise <img>. Ce retour visuel est crucial pour assurer à l'utilisateur que le fichier correct a été téléchargé.

Bouton de Numérisation : Un bouton étiqueté avec @onclick="ScanQRCode" déclenche le processus de numérisation. Sa disponibilité dépend du fait qu'un fichier soit sélectionné, améliorant l'intuitivité de l'interface.

Affichage du Résultat : Le texte du code QR numérisé est affiché dans un champ de saisie de texte pour une visualisation facile. Un bouton distinct permet aux utilisateurs de copier ce texte dans le presse-papiers.

Stylisation CSS dans site.css

Les aspects visuels et la mise en page du scanner de code QR sont définis dans le fichier site.css.

.content {
    padding: 20px;
    margin: 10px auto; /* Centers the content */
    max-width: 500px; /* Sets a max width for the content */
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
}

.file-input, .result-input {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    width: 100%;
}

.button {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    transition: background-color 0.3s, box-shadow 0.3s;
    width: auto; /* Adjusts button width */
    display: inline-block; /* Allows the width to adjust to content */
}

.button:hover {
    background-color: #45a049;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
} 

.qr-image {
    max-width: 300px;
    max-height: 300px;
    display: block;
    margin: 10px auto;
    border-radius: 10px;
}

.result-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.result-input {
    width: 100%;
    box-sizing: border-box;
}

.copy-button {
    margin-top: 10px;
    white-space: nowrap;
}

.content : Cette classe stylise la zone de contenu principale, lui donnant une largeur définie, une alignement centré et une ombre subtile pour la profondeur.

.file-input, .result-input : Ces classes stylisent les éléments d'entrée de fichier et d'affichage de résultat, assurant qu'ils soient visuellement cohérents et occupent entièrement la largeur de leur conteneur.

.button : Les boutons sont stylisés avec un fond vert distinctif, des coins arrondis et un effet au survol pour une meilleure interaction utilisateur.

.qr-image : Les styles appliqués à l'image de code QR incluent des contraintes de taille et une marge automatique pour le centrage, rendant l'image proéminente mais non écrasante.

.result-section : Cette classe garantit que les éléments au sein de la section de résultats sont alignés au centre et espacés de manière appropriée.

Gestion des Téléchargements de Fichiers

La méthode HandleSelectedFile est une partie cruciale du processus de numérisation des codes QR, gérant le téléchargement du fichier de l'utilisateur et le préparant pour la numérisation. Cette méthode est déclenchée lorsque l'utilisateur sélectionne un fichier via le composant <InputFile>. Ceci est montré dans le code suivant :

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists

    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);

    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }

    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;

    // Optionally, create a base64 string for displaying the image (if needed)
    byte[] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists

    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);

    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }

    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;

    // Optionally, create a base64 string for displaying the image (if needed)
    byte[] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

Private Async Function HandleSelectedFile(ByVal e As InputFileChangeEventArgs) As Task
	selectedFile = e.File
	fileSelected = True
	Dim imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages")
	Directory.CreateDirectory(imagesDirectory) ' Ensure the directory exists

	' Use a GUID as the unique file name
	Dim uniqueFileName = Guid.NewGuid().ToString() & Path.GetExtension(selectedFile.Name)
	Dim fullPath = Path.Combine(imagesDirectory, uniqueFileName)

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	await using(var fileStream = New FileStream(fullPath, FileMode.Create))
'	{
'		await selectedFile.OpenReadStream().CopyToAsync(fileStream);
'	}

	' Store the full path in qrImageSrc for scanning
	qrImageSrc = fullPath

	' Optionally, create a base64 string for displaying the image (if needed)
	Dim imageBytes() As Byte = Await File.ReadAllBytesAsync(fullPath)
	Dim base64String = Convert.ToBase64String(imageBytes)
	qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart("."c)};base64,{base64String}"
End Function

Voici une explication détaillée de sa fonctionnalité :

Sélection et Validation de Fichier : Lorsqu'un utilisateur télécharge un fichier, la méthode capture les détails du fichier en utilisant InputFileChangeEventArgs e. La variable selectedFile est ensuite assignée à ce fichier et un booléen fileSelected est mis à true, indiquant que les données/dossier d'entrée sont prêtes à être traitées.

Créer le Chemin du Fichier : La méthode prépare un répertoire pour stocker l'image téléchargée. Elle utilise Path.Combine pour créer un chemin vers le répertoire 'UploadedImages', en s'assurant qu'il existe avec Directory.CreateDirectory. Cette étape est cruciale pour organiser les fichiers téléchargés de manière systématique.

Génération d'un Nom de Fichier Unique : Pour éviter les conflits avec les fichiers existants, un nom de fichier unique est généré à l'aide d'un GUID (Identifiant Unique Global) ajouté avec l'extension d'origine du fichier. Cela garantit que chaque fichier téléchargé est identifié de manière unique.

Sauvegarder le Fichier : Le fichier est ensuite sauvegardé sur le serveur. La méthode crée un flux de fichier pointant vers le chemin de fichier nouvellement généré, et le contenu du fichier téléchargé est copié dans ce flux en utilisant await selectedFile.OpenReadStream().CopyToAsync(fileStream). Cette étape finalise le processus de téléchargement.

Préparer l'Image pour l'Affichage : Après que le fichier soit enregistré, il est nécessaire d'afficher l'image à l'utilisateur pour confirmation. La méthode lit le fichier dans un tableau d'octets et le convertit en une chaîne base64, adaptée pour être intégrée directement dans l'attribut src d'une balise <img>. Cette conversion permet à l'image d'être affichée sans nécessiter une demande séparée au serveur pour le fichier image.

Numériser le Code QR

La méthode ScanQRCode est le cœur de la fonctionnalité de numérisation de codes QR dans l'application Blazor Server. Cette méthode prend l'image téléchargée et utilise IronQR pour extraire les données du code QR.

private async Task ScanQRCode()
{
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;

    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);

        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

private async Task ScanQRCode()
{
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;

    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);

        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

Private Async Function ScanQRCode() As Task
	' Check if there is a valid image to work with
	If String.IsNullOrEmpty(qrImageSrc) Then
		Return
	End If

	Try
		Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
		Dim imageInput As New QrImageInput(inputBmp)
		Dim reader As New QrReader()
		Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

		' Check if there are any results and if the first result contains text
		Dim firstResult = results.FirstOrDefault()
		If firstResult IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(firstResult.Value.ToString()) Then
			scannedText = firstResult.Value.ToString()
		Else
			scannedText = "QR value not found!"
		End If
	Catch ex As Exception
		scannedText = "Error scanning QR code: " & ex.Message
	End Try
End Function

Initialement, la méthode vérifie si la variable qrImageSrc, qui contient le chemin vers l'image téléchargée, n'est pas vide. Cette vérification garantit qu'il y a une image valide à traiter avant de continuer.

Une fois qu'il est confirmé qu'une image est prête à être traitée, la méthode passe à la fonctionnalité principale de lecture de code QR. Cela implique quelques étapes clés, en commençant par charger l'image depuis son emplacement stocké dans un format adapté à l'analyse de code QR. Cette conversion est rendue possible par la méthode AnyBitmap.FromFile(qrImageSrc), qui prépare l'image pour le processus de numérisation.

L'étape suivante consiste à créer un objet QrReader. Cet objet est une partie intégrante de la bibliothèque IronQR, servant d'outil principal pour décoder les codes QR à partir d'images. Avec l'instance de QrReader prête, l'application procède ensuite à la numérisation de l'image téléchargée. La fonction reader.Read(imageInput) est responsable de cette action, recherchant méthodiquement l'image pour les codes QR et extrayant leurs données.

Les résultats de la numérisation sont stockés dans une collection IEnumerable<QrResult>. Cette collection est ensuite examinée pour trouver le premier résultat de code QR. Si un code QR est détecté et qu'il contient un texte lisible, ce texte est capturé et stocké dans la variable scannedText. Cependant, dans les scénarios où aucun code QR n'est trouvé ou ne contient pas de texte, l'application fixe un message par défaut pour informer l'utilisateur qu'aucune valeur de QR n'a été détectée.

Une fois le code QR numérisé avec succès, la chaîne de texte est affichée dans un champ de saisie de texte, grâce aux capacités de liaison de données à double sens de Blazor. Cela est réalisé en liant la variable scannedText à un élément de saisie de texte. Le champ de saisie est défini sur être désactivé, le rendant en lecture seule. Ce choix de conception se concentre sur l'interaction de l'utilisateur pour visualiser le résultat et le copier plutôt que d'éditer le contenu.

L'ensemble du processus de numérisation est enveloppé dans un bloc try-catch, protégeant contre toute erreur imprévue pendant l'opération de numérisation. Cela pourrait inclure des problèmes liés au format du fichier image ou des erreurs inattendues pendant le processus de lecture. Si une exception se produit, elle est capturée et un message d'erreur est formulé et affiché à l'utilisateur. Cette approche aide à suivre les problèmes tout en maintenant la transparence avec l'utilisateur, améliorant la fiabilité de l'application.

Copier le Résultat

Pour activer la fonction copier-coller, une fonction JavaScript nommée copyTextToClipboard est définie dans le fichier _Host.cshtml. Ce script est un moyen simple mais efficace d'interagir avec le presse-papiers :

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

Cette fonction accepte un paramètre de texte, qui est le texte à copier. Elle utilise la méthode navigator.clipboard.writeText, une approche moderne pour interagir avec le presse-papiers. Cette méthode est préférée pour sa simplicité et sa conformité aux standards du web. Elle est conçue pour enregistrer un message de succès dans la console lors d'une copie réussie, aidant au débogage et assurant une fonctionnalité fluide. En cas d'erreur, un message d'erreur est enregistré dans la console, fournissant des informations sur les problèmes rencontrés lors de l'opération.

La méthode CopyToClipboard dans la part @code de l'index.razor sert de pont entre l'application Blazor et la fonction JavaScript. Un bouton déclenche cette méthode en cliquant dans l'interface utilisateur. Lorsqu'il est activé, il invoque la fonction JavaScript copyTextToClipboard en utilisant les capacités JavaScript InterOp de Blazor. Le scannedText est passé comme argument à cette fonction, copiant effectivement le texte dans le presse-papiers de l'utilisateur.

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

Private Async Function CopyToClipboard() As Task
	Await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText)
End Function

Exécuter l'Application

En exécutant le projet, l'utilisateur verra l'interface suivante propre et simple. L'écran initial met en avant le module de scanner de code QR. Ce module comprend un bouton pour télécharger le fichier image de code QR ('Choisir le Fichier') et un autre pour initier le processus de numérisation ('Numériser le Code QR'). Initialement, aucun fichier n'est sélectionné et la zone de numérisation est vide, en attente de saisie par l'utilisateur.

L'utilisateur sélectionne et télécharge une image de code QR à l'aide du bouton 'Choisir le Fichier', qui affiche désormais le nom du fichier sélectionné (par exemple, 'qrvalue.png'). Le QR code téléchargé est visible dans la zone désignée sur l'interface, confirmant à l'utilisateur que l'image est prête à être numérisée.

Après que l'utilisateur clique sur le bouton 'Numériser le Code QR', l'application traite l'image. Si la numérisation réussit, le texte encodé dans le code QR est affiché juste en dessous de l'image. Dans ce cas, le résultat numérisé ('<https://ironsoftware.com/csharp/qr/>') est une URL indiquant où le code QR dirigerait un utilisateur lorsqu'il est numérisé avec un lecteur de code QR. Un bouton de copie apparaît à côté du résultat, permettant à l'utilisateur de copier facilement le texte numérisé dans le presse-papiers pour une utilisation ultérieure.