QR-Code-Scanner for .NET MAUI

Voraussetzungen

1. Visual Studio 2022 mit installiertem .NET MAUI-Workload
2. Ein .NET MAUI-Projekt, das Android oder iOS anvisiert

Installieren Sie IronQR

Installieren Sie die IronQR-Bibliothek mit 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 suchen Sie nach IronQR auf NuGet und installieren die neueste Version.

Front-End-Design

Das Scanner-UI besteht aus einem Button zum Auslösen der Bildauswahl, einer Bildanzeige zur 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 Dateiauswahler der App aus. Der dekodierte Wert sollte als https://ironsoftware.com angezeigt werden.

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

QR-Code-Scan mit IronQR

Wenn der Scan-Button gedrückt 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 Ergebnislabel 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-Plattformabstraktionsschicht bereitgestellt und funktioniert auf Android, iOS und Windows ohne plattformspezifischen Code. AnyBitmap.FromFile übernimmt die Bilddekodierung, und QrReader.Read gibt ein IEnumerable<QrResult> zurück, das einen Eintrag pro im Bild gefundenen QR-Code enthält.

Ausgabe

Die Auswahl eines QR-Code-Bildes löst den Scan aus. Der dekodierte Wert erscheint im Ergebnislabel unterhalb der Bildvorschau.

QR-Code ausgewählt und dekodierter Wert im Ergebnislabel angezeigt