Escáner de códigos QR .NET MAUI

Prerrequisitos

1. Visual Studio 2022 con la carga de trabajo de .NET MAUI instalada
2. Un proyecto de .NET MAUI apuntando a Android o iOS

Instalar IronQR

Instale la biblioteca IronQR usando la Consola del Administrador de Paquetes NuGet en Visual Studio. Navega a Tools > NuGet Package Manager > Package Manager Console y ejecuta:

Install-Package IronQR

Alternativamente, busca IronQR en NuGet e instala la última versión.

Diseño de interfaz

La interfaz del escáner consta de un botón para iniciar la selección de imagen, una vista de imagen para previsualizar el código QR seleccionado y una etiqueta para mostrar el resultado decodificado.

Reemplaza el contenido de MainPage.xaml con lo siguiente:

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

Entrada de muestra

Use el código QR a continuación como imagen de prueba. Guárdelo en su dispositivo, luego selecciónelo a través del selector de archivos de la aplicación. El valor decodificado debería mostrarse como https://ironsoftware.com.

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

Escaneo de código QR con IronQR

Cuando se toca el botón de escaneo, FilePicker abre la biblioteca de imágenes del dispositivo. Después de que el usuario selecciona una foto, la ruta completa se carga en un AnyBitmap, que se pasa a QrReader.Read(). El valor decodificado del primer código QR detectado se muestra en la etiqueta de resultados.

Añade el siguiente 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 es proporcionado por la capa de abstracción de plataforma MAUI y funciona en Android, iOS y Windows sin ningún código específico de la plataforma. AnyBitmap.FromFile maneja la decodificación de imágenes, y QrReader.Read devuelve un IEnumerable<QrResult> con una entrada por cada código QR encontrado en la imagen.

Resultado

Seleccionar una imagen de código QR activa el escaneo. El valor decodificado aparece en la etiqueta de resultados debajo de la previsualización de imagen.

Imagen de código QR seleccionada y valor decodificado mostrado en la etiqueta de resultados