Escáner de códigos QR .NET MAUI

Prerrequisitos

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

Instale IronQR

Instala la biblioteca IronQR utilizando la Consola del Administrador de Paquetes NuGet en Visual Studio. Navegue a Tools > NuGet Package Manager > Package Manager Console y ejecute:

Install-Package IronQR

Alternativamente, busque IronQR en NuGet e instale la última versión.

Diseño Front-End

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

Reemplace 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

Utiliza el código QR a continuación como imagen de prueba. Guárdelo en su dispositivo y 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 pulsa el botón de escaneo, FilePicker abre la biblioteca de imágenes del dispositivo. Después de que el usuario seleccione 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.

Agregue 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 la 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 la imagen, 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 vista previa de la imagen.

Código QR seleccionado y valor decodificado mostrado en la etiqueta de resultados