.NET MAUI Scanner de Código QR

Pré-requisitos

1. Visual Studio 2022 com a carga de trabalho .NET MAUI instalada
2. Um projeto .NET MAUI visando Android ou iOS

Instalar o IronQR

Instale a biblioteca IronQR usando o Console do Gerenciador de Pacotes NuGet no Visual Studio. Navegue até Tools > NuGet Package Manager > Package Manager Console e execute:

Install-Package IronQR

Como alternativa, procure por IronQR no NuGet e instale a versão mais recente.

Design Frontal

A interface do scanner consiste em um botão para acionar a seleção de imagem, uma visualização de imagem para pré-visualizar o código QR selecionado e um rótulo para exibir o resultado decodificado.

Substitua o conteúdo de MainPage.xaml pelo seguinte:

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

Exemplo de Entrada

Use o código QR abaixo como imagem de teste. Salve-o no seu dispositivo, então selecione-o através do seletor de arquivos do aplicativo. O valor decodificado deve ser exibido como https://ironsoftware.com.

Código QR de exemplo — codifica https://ironsoftware.com

Escaneando Códigos QR com IronQR

Ao tocar no botão de digitalização, FilePicker abre a biblioteca de imagens do dispositivo. Após o usuário selecionar uma foto, o caminho completo é carregado em um AnyBitmap, que é passado para QrReader.Read(). O valor decodificado do primeiro código QR detectado é exibido no rótulo de resultado.

Adicione o seguinte método a 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 é fornecido pela camada de abstração da plataforma MAUI e funciona no Android, iOS e Windows sem qualquer código específico da plataforma. AnyBitmap.FromFile lida com a decodificação da imagem e QrReader.Read retorna um IEnumerable<QrResult> com uma entrada para cada código QR encontrado na imagem.

Saída

Selecionar uma imagem de código QR dispara o escaneamento. O valor decodificado aparece no rótulo de resultado abaixo da pré-visualização da imagem.

Código QR selecionado e valor decodificado exibido no rótulo de resultado