.NET MAUI QR Code Scanner

Wymagania wstępne

1. Visual Studio 2022 z zainstalowanym środowiskiem pracy .NET MAUI
2. Projekt .NET MAUI celujący w Androida lub iOS

Zainstaluj IronQR

Zainstaluj bibliotekę IronQR za pomocą NuGet Package Manager Console w Visual Studio. Przejdź do Tools > NuGet Package Manager > Package Manager Console i uruchom:

Install-Package IronQR

Alternatywnie, wyszukaj IronQR na NuGet i zainstaluj najnowszą wersję.

Projektowanie front-endu

Interfejs użytkownika skanera składa się z przycisku do wyzwalania wyboru obrazu, widoku obrazu do podglądu wybranego kodu QR oraz etykiety do wyświetlania zdekodowanego wyniku.

Zastąp zawartość MainPage.xaml następującym:

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

Przykładowe dane wejściowe

Użyj poniższego kodu QR jako obrazu testowego. Zapisz to na swoim urządzeniu, a następnie wybierz przez selektor plików aplikacji. Zdekodowana wartość powinna być wyświetlana jako https://ironsoftware.com.

Przykładowy kod QR — koduje https://ironsoftware.com

Skanowanie kodów QR za pomocą IronQR

Po dotknięciu przycisku skanowania FilePicker otwiera bibliotekę obrazów urządzenia. Po wybraniu zdjęcia przez użytkownika pełna ścieżka jest ładowana do AnyBitmap, który jest przekazywany do QrReader.Read(). Zdekodowana wartość z pierwszego wykrytego kodu QR jest wyświetlana w etykiecie wyników.

Dodaj następującą metodę do 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 jest dostarczana przez warstwę abstrakcji platformy MAUI i działa na Androidzie, iOS i Windows bez żadnego specyficznego dla platformy kodu. AnyBitmap.FromFile obsługuje dekodowanie obrazów, a QrReader.Read zwraca IEnumerable<QrResult> z jednym wpisem na każdy kod QR znaleziony w obrazie.

Wynik

Wybranie obrazu kodu QR wyzwala skanowanie. Zdekodowana wartość pojawia się w etykiecie wyników poniżej podglądu obrazu.

Kod QR wybrany, a zdekodowana wartość wyświetlona w etykiecie wyniku