Scanner de codes QR .NET MAUI

Prérequis

1. Visual Studio 2022 avec la charge de travail .NET MAUI installée
2. Un projet .NET MAUI ciblant Android ou iOS

Installer IronQR

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

Install-Package IronQR

Alternativement, recherchez IronQR sur NuGet et installez la dernière version.

Conception Front-End

L'interface utilisateur du scanner consiste en un bouton pour déclencher la sélection d'image, une vue d'image pour prévisualiser le code QR sélectionné, et un label pour afficher le résultat décodé.

Remplacez le contenu de MainPage.xaml par le suivant :

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiQrScanner.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="scanButton"
                Text="Select QR Code Image"
                SemanticProperties.Hint="Select Image"
                Clicked="OnScanButtonClicked"
                HorizontalOptions="Center" />

            <Image
                x:Name="qrImage"
                SemanticProperties.Description="Selected QR Code"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                x:Name="resultLabel"
                Text="Scanned Text: "
                HorizontalOptions="Center"
                VerticalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiQrScanner.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="scanButton"
                Text="Select QR Code Image"
                SemanticProperties.Hint="Select Image"
                Clicked="OnScanButtonClicked"
                HorizontalOptions="Center" />

            <Image
                x:Name="qrImage"
                SemanticProperties.Description="Selected QR Code"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                x:Name="resultLabel"
                Text="Scanned Text: "
                HorizontalOptions="Center"
                VerticalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Entrée d'exemple

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

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

Scan de QR Code avec IronQR

Lorsque le bouton de scan est tapé, FilePicker ouvre la bibliothèque d'images de l'appareil. Après que l'utilisateur ait sélectionné une photo, le chemin complet est chargé dans un AnyBitmap, qui est passé à QrReader.Read(). La valeur décodée du premier code QR détecté s'affiche dans le label de résultat.

Ajoutez la méthode suivante à MainPage.xaml.cs :

using IronQr;
using IronSoftware.Drawing;

private async void OnScanButtonClicked(object sender, EventArgs e)
{
    // Start scanning QR codes
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });
    var imageSource = images.FullPath.ToString();

    var inputBmp = AnyBitmap.FromFile(imageSource);

    // Load the asset into QrImageInput
    QrImageInput imageInput = new QrImageInput(inputBmp);

    // Create a QR Reader object
    QrReader reader = new QrReader();

    // Read the input and get all embedded QR Codes
    IEnumerable<QrResult> results = reader.Read(imageInput);

    // Display the first result
    resultLabel.Text = "Scanned Text: " + results.First().Value;
}

using IronQr;
using IronSoftware.Drawing;

private async void OnScanButtonClicked(object sender, EventArgs e)
{
    // Start scanning QR codes
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });
    var imageSource = images.FullPath.ToString();

    var inputBmp = AnyBitmap.FromFile(imageSource);

    // Load the asset into QrImageInput
    QrImageInput imageInput = new QrImageInput(inputBmp);

    // Create a QR Reader object
    QrReader reader = new QrReader();

    // Read the input and get all embedded QR Codes
    IEnumerable<QrResult> results = reader.Read(imageInput);

    // Display the first result
    resultLabel.Text = "Scanned Text: " + results.First().Value;
}

Imports IronQr
Imports IronSoftware.Drawing

Private Async Sub OnScanButtonClicked(sender As Object, e As EventArgs)
    ' Start scanning QR codes
    Dim images = Await FilePicker.Default.PickAsync(New PickOptions With {
        .PickerTitle = "Pick image",
        .FileTypes = FilePickerFileType.Images
    })
    Dim imageSource = images.FullPath.ToString()

    Dim inputBmp = AnyBitmap.FromFile(imageSource)

    ' Load the asset into QrImageInput
    Dim imageInput As New QrImageInput(inputBmp)

    ' Create a QR Reader object
    Dim reader As New QrReader()

    ' Read the input and get all embedded QR Codes
    Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

    ' Display the first result
    resultLabel.Text = "Scanned Text: " & results.First().Value
End Sub

FilePicker.Default.PickAsync est fourni par la couche d'abstraction de la plateforme MAUI et fonctionne sur Android, iOS et Windows sans aucun code spécifique à la plateforme. AnyBitmap.FromFile gère le décodage de l'image, et QrReader.Read retourne un IEnumerable<QrResult> avec une entrée par code QR trouvé dans l'image.

Sortie

Sélectionner une image de code QR déclenche le scan. La valeur décodée apparaît dans le label de résultat sous l'aperçu de l'image.

Code QR sélectionné et valeur décodée affichée dans le label de résultat