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

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 ce qui suit :

<?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 sous la forme https://ironsoftware.com.

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

Scan de QR Code avec IronQR

Lorsque l'on appuie sur le bouton de numérisation, FilePicker ouvre la galerie d'images de l'appareil. Une fois que l'utilisateur a sélectionné une photo, le chemin d'accès complet est chargé dans un AnyBitmap, qui est transmis à 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 des images, et QrReader.Read renvoie un IEnumerable<QrResult> contenant 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