Comment créer un scanner de code QR Blazor

Introduction

Cet article explore l'intégration d'un scanner de code Quick Response(Scanner de code QR) dans une application Blazor utilisant IronQR for .NET. Un code QR est un code-barres bidimensionnel qui stocke beaucoup plus de données qu'un code-barres unidimensionnel classique.

Blazor, un cadre de Microsoft, permet aux développeurs de produire des applications à page unique(en utilisant l'application Blazor WebAssembly) ou d'utiliser C# pour construire des interfaces web interactives,(Serveur Blazor, sur lequel nous nous concentrerons dans ce guide).

L'intégration d'IronQR et de Blazor Server pour la numérisation des codes QR est une combinaison stratégique qui tire parti des atouts des deux technologies. En intégrant IronQR aux applications Blazor, vous pouvez gérer efficacement la génération et la numérisation des codes QR. Cette fonctionnalité d'un lecteur de code QR est de plus en plus demandée dans divers contextes commerciaux tels que la gestion des stocks, les systèmes de billetterie et le partage d'informations sans contact.

Comprendre les bases

Qu'est-ce qu'un serveur Blazor ?

Serveur Blazor est un framework d'application web qui fait partie de la plateforme ASP.NET Core. Il permet aux développeurs de créer des interfaces 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, une fonctionnalité web en temps réel. Cela permet aux développeurs de créer des applications web efficaces et interactives.

Introduction à IronQR

IronQR est une bibliothèque .NET qui se distingue par sa capacité à lire, interpréter, etgénérer des codes QR avec une grande précision. Il offre une série de fonctionnalités, y compris la possibilité de gérer différents types de contenu de code QR. La force d'IronQR réside dans sa simplicité et sa facilité d'intégration dans les applications .NET, ce qui en fait un choix de premier ordre pour les développeurs qui cherchent à incorporer et à créer une fonctionnalité de code QR.

Comment créer un scanner de code QR Blazor

1. Créer une application Blazor Server dans Visual Studio Code

2. Installer la bibliothèque de classes de codes QR à l'aide du gestionnaire de paquets NuGet

3. Créer l'interface utilisateur en utilisant HTML et CSS dans le fichier index.razor

4. Écrire la logique de traitement des fichiers téléchargés

5. Écrire la logique de lecture des QR à l'aide de la bibliothèque QR

6. Afficher le résultat dans la zone de texte

Mise en place de l'environnement

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, recherchez et sélectionnez le modèle "Blazor Server App". Cliquez sur Suivant.

Après avoir choisi le modèle, saisissez un nom de projet et un emplacement(conserver toutes les autres valeurs par défaut) et cliquez sur le bouton Suivant.

Sélectionnez ensuite le Framework .NET souhaité et cliquez sur le bouton "Créer". Il créera une application Blazor Server.

Installation de la bibliothèque IronQR

Cliquez sur Outils dans la barre de menu. Dans le menu déroulant, sélectionnez le gestionnaire de paquets NuGet. Dans le menu contextuel, sélectionnez "Manage NuGet Packages for Solution". L'onglet NuGet Package Manager s'ouvre alors.

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

Maintenant que tout est installé, nous pouvons passer en revue la structure du projet et la façon de tout mettre en œuvre dans votre projet.

Mise en œuvre de la numérisation des codes QR

Construire l'interface utilisateur

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

@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(qrImageSrc))
    {
        <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">
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

@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(qrImageSrc))
    {
        <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">
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @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(qrImageSrc))
"image/*" Class="file-input" /> [if](Not String.IsNullOrEmpty(qrImageSrc))
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Friend @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
"HandleSelectedFile" accept="image/*" Class
Friend page "/" [using] System.IO [using] Microsoft.AspNetCore.Components.Forms [using] IronQr [using] IronSoftware.Drawing inject IJSRuntime JSRuntime (Of PageTitle) QR Code Scanner</PageTitle> (Of div) (Of h1) QR Code Scanner</h1> <InputFile OnChange="HandleSelectedFile" accept
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
		"QR Code Image" class="qr-image" />
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class
		"@qrImageSrcForDisplay" alt="QR Code Image" class
		<img src="@qrImageSrcForDisplay" alt
End Class
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button"> Scan QR Code</button> if(!string.IsNullOrEmpty(scannedText))
	"@(!fileSelected)" class="button scan-button"> Scan QR Code</button> [if](Not String.IsNullOrEmpty(scannedText))
	If True Then
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class
	"ScanQRCode" disabled="@(!fileSelected)" class
	<button onclick="ScanQRCode" disabled
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class="button copy-button"> Copy</button> </div>
		"CopyToClipboard" class="button copy-button"> Copy</button> </div>
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class
		"result-section"> <button onclick="CopyToClipboard" class
		<div class="result-section"> <button onclick
	End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'</div>

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

Contrôle de téléchargement d'images : Un <InputFile>le composant est utilisé pour télécharger des images de codes QR. Cet élément est conçu pour n'accepter que les fichiers images, ce qui améliore l'expérience de l'utilisateur en filtrant les types de fichiers non pertinents.

Affichage des images : Une fois qu'une image est téléchargée, elle est affichée à l'aide d'un <img> tag. Ce retour d'information visuel est essentiel pour garantir à l'utilisateur que le bon fichier 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 de la sélection d'un fichier, ce qui améliore l'intuitivité de l'interface.

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

Style CSS dans site.css

L'esthétique et la présentation du scanner de codes QR sont définies 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 donne un style à la zone de contenu principale, en lui donnant une largeur définie, un alignement centré et une ombre subtile pour la profondeur.

.file-input, .result-input : Ces classes donnent un style aux éléments d'affichage de l'entrée du fichier et du résultat, en veillant à ce qu'ils soient visuellement cohérents et qu'ils occupent entièrement la largeur de leur conteneur.

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

.qr-image : Les styles appliqués à l'image du code QR incluent des contraintes de taille et une marge automatique pour le centrage, ce qui rend l'image proéminente sans être écrasante.

.result-section : Cette classe garantit que les éléments 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 du code QR, car elle gère le téléchargement du fichier de l'utilisateur et le prépare à la numérisation. Cette méthode est déclenchée lorsque l'utilisateur sélectionne un fichier à l'aide de la fonction <InputFile> composant. C'est ce que montre 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 description détaillée de ses fonctionnalités :

Sélection et validation des fichiers : 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 alors assignée à ce fichier, et le booléen fileSelected est positionné à true, indiquant que les données/fichiers d'entrée sont prêts à être traités.

Création du chemin d'accès au fichier : La méthode prépare un répertoire pour stocker l'image téléchargée. Il 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 systématiquement les fichiers téléchargés.

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 mondial) avec l'extension du fichier d'origine. Cela permet de s'assurer que chaque fichier téléchargé est uniquePathdentifié.

Sauvegarde du fichier : Le fichier est ensuite enregistré sur le serveur. La méthode crée un flux de fichiers pointant vers le chemin d'accès au fichier nouvellement généré, et le contenu du fichier téléchargé est copié dans ce flux à l'aide de await selectedFile.OpenReadStream'().CopyToAsync(fileStream). Cette étape finalise le processus de téléchargement.

Préparation de l'image pour l'affichage : Après l'enregistrement du fichier, 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, qui peut être intégrée directement dans un fichier <img> de la balise src. Cette conversion permet d'afficher l'image sans qu'il soit nécessaire d'adresser une demande distincte au serveur pour obtenir le fichier image.

Scanner le code QR

La méthode ScanQRCode est le coeur de la fonctionnalité de scan de code 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

Dans un premier temps, la méthode vérifie que la variable qrImageSrc, qui contient le chemin vers l'image téléchargée, n'est pas vide. Cette vérification permet de s'assurer qu'il existe une image valide avec laquelle travailler avant de poursuivre.

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

L'étape suivante consiste à créer un objet QrReader. Cet objet fait partie intégrante de la bibliothèque IronQR, servant d'outil principal pour décoder les codes QR à partir d'images. Une fois l'instance QrReader prête, l'application procède à l'analyse de l'image téléchargée. La fonction reader.Read(imageInput)la fonction est responsable de cette action. Elle recherche méthodiquement les codes QR dans l'image et en extrait les données.

Les résultats de l'analyse sont stockés dans un IEnumerable<QrResult> collection. Cette collection est ensuite passée au crible pour trouver le premier résultat du 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. Toutefois, dans les cas où un code QR n'est pas trouvé ou ne contient pas de texte, l'application définit un message par défaut pour informer l'utilisateur qu'aucune valeur QR n'a été détectée.

Une fois le code QR scanné 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 bidirectionnelles de Blazor. Pour ce faire, la variable scannedText est liée à un élément de saisie de texte. Le champ de saisie est désactivé, ce qui le rend en lecture seule. Ce choix de conception oriente l'interaction de l'utilisateur vers la visualisation et la copie du résultat plutôt que vers l'édition du contenu.

L'ensemble du processus de numérisation est enfermé dans un bloc try-catch, ce qui permet de se prémunir contre toute erreur imprévue pendant l'opération de numérisation. Il peut s'agir de problèmes liés au format du fichier image ou d'erreurs inattendues au cours du processus de lecture. Si une exception se produit, elle est rattrapée et un message d'erreur est formulé et affiché à l'utilisateur. Cette approche permet non seulement d'identifier les problèmes, mais aussi de maintenir la transparence avec l'utilisateur, ce qui renforce la fiabilité de l'application.

Copier le résultat

Pour activer la fonction de copie vers le presse-papiers, 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 texte, qui est le texte à copier. Il utilise la méthode navigator.clipboard.writeText, une approche moderne pour interagir avec le presse-papiers. Cette méthode est privilégiée pour sa simplicité et sa conformité aux normes du web. Il est conçu pour enregistrer un message de réussite dans la console lorsque la copie est réussie, ce qui facilite le débogage et garantit un fonctionnement sans heurts. En cas d'erreur, un message d'erreur est enregistré dans la console, ce qui permet de comprendre les problèmes rencontrés au cours de l'opération.

La méthode CopyToClipboard se trouve dans la partie @code de l'index.razor et sert de pont entre l'application Blazor et la fonction JavaScript. Un bouton déclenche le clic de cette méthode dans l'interface utilisateur. Lorsqu'elle est activée, elle invoque la fonction JavaScript copyTextToClipboard en utilisant les capacités JavaScript InterOp de Blazor. Le texte scanné est transmis comme argument à cette fonction, ce qui permet de copier 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écution de l'application

Lorsque le projet est lancé, l'utilisateur voit apparaître l'interface simple et claire suivante. L'écran initial met en évidence le module de lecture de codes QR. Ce module comprend un bouton permettant de télécharger le fichier image du code QR(choisir un fichier) et un autre pour lancer le processus de numérisation(scanner le code QR). Au départ, aucun fichier n'est sélectionné et la zone de numérisation est vierge, en attente des données de l'utilisateur.

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

Une fois que l'utilisateur a cliqué sur le bouton "Scanner le code QR", l'application traite l'image. Si la numérisation est réussie, le texte codé dans le code QR s'affiche juste en dessous de l'image. Dans ce cas, le résultat du balayage( '<https://ironsoftware.com/csharp/qr/>') est une URL indiquant où le code QR doit diriger l'utilisateur lorsqu'il est scanné par un lecteur QR. Le bouton Copier 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.

Conclusion

En résumé, le processus d'intégration de l'IronQR dans une application Blazor Server est fluide et efficace, ce qui permet d'obtenir une solution de lecture de codes QR. Réactif et facile à utiliser, du début de la mise en place de ce projet jusqu'à la mise en œuvre de la fonctionnalité de numérisation, grâce à un mélange du puissant traitement d'IronQR avec le rendu dynamique de l'interface utilisateur de Blazor. Le processus, de la mise en place de l'environnement au déploiement, met l'accent sur l'aspect pratique et l'efficacité de cette intégration dans des applications réelles. Bien qu'IronQR soit compétent pour les codes QR, pour les projets nécessitant la fonction de numérisation des codes-barres,IronBarcode est une option idéale, offrant un niveau similaire de facilité et d'intégration.

IronQR offre uneessai gratuit pour que les développeurs puissent explorer ses fonctionnalités avant de l'acheter. Pour une utilisation étendue et un accès à toutes ses fonctionnalités professionnelles en production, les licences IronQR commencent à $749.