.NET MAUI QR-Code-Scanner

Voraussetzungen

1. Visual Studio 2022 mit installiertem .NET MAUI-Arbeitslast
2. Ein .NET MAUI-Projekt für Android oder iOS

Installieren Sie IronQR

Installieren Sie die IronQR-Bibliothek mithilfe der NuGet-Paket-Manager-Konsole in Visual Studio. Navigieren Sie zu Tools > NuGet Package Manager > Package Manager Console und führen Sie Folgendes aus:

Install-Package IronQR

Alternativ können Sie auf NuGet nach IronQR suchen und die neueste Version installieren.

Front-End-Design

Die Scanner-Benutzeroberfläche besteht aus einem Button zum Starten der Bildauswahl, einer Bildansicht zum Vorschau des ausgewählten QR-Codes und einem Label zur Anzeige des dekodierten Ergebnisses.

Ersetzen Sie den Inhalt von MainPage.xaml durch Folgendes:

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

Beispiel-Input

Verwenden Sie den untenstehenden QR-Code als Testbild. Speichern Sie es auf Ihrem Gerät und wählen Sie es dann über den Datei-Picker der App aus. Der dekodierte Wert sollte als https://ironsoftware.com angezeigt werden.

Beispiel-QR-Code — kodiert https://ironsoftware.com

QR-Code-Scannen mit IronQR

Wenn die Scan-Schaltfläche angetippt wird, öffnet FilePicker die Bildbibliothek des Geräts. Nachdem der Benutzer ein Foto ausgewählt hat, wird der vollständige Pfad in ein AnyBitmap geladen, das an QrReader.Read() übergeben wird. Der dekodierte Wert des ersten erkannten QR-Codes wird im Ergebnis-Label angezeigt.

Fügen Sie die folgende Methode zu MainPage.xaml.cs hinzu:

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 wird von der MAUI-Plattform-Abstraktionsschicht bereitgestellt und funktioniert auf Android, iOS und Windows ohne plattformspezifischen Code. AnyBitmap.FromFile übernimmt die Bilddekodierung, und QrReader.Read gibt ein IEnumerable<QrResult> mit einem Eintrag pro im Bild gefundenem QR-Code zurück.

Ausgabe

Das Auswählen eines QR-Code-Bildes löst den Scan aus. Der dekodierte Wert erscheint im Ergebnis-Label unter der Bildvorschau.

QR-Code ausgewählt und dekodierter Wert im Ergebnis-Label angezeigt