Cómo construir un escáner de códigos QR en Blazor

Requisitos previos

1. Visual Studio 2022 con la carga de trabajo de ASP.NET y desarrollo web instalada
2. Un proyecto Blazor Server dirigido a .NET 8 o posterior

Instalar IronQR

Instala la biblioteca IronQR utilizando 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 del componente Blazor

La interfaz de escaneo utiliza el componente integrado InputFile de Blazor para la selección de archivos nativa del navegador, un botón para iniciar el escaneo y un párrafo para mostrar el resultado decodificado. No se requiere interoperabilidad con JavaScript.

Añade un nuevo componente Razor Scanner.razor con el siguiente marcado:

@page "/scanner"
@using IronQr
@using IronSoftware.Drawing

<h3>QR Code Scanner</h3>

<InputFile OnChange="OnFileSelected" accept="image/*" />

<br /><br />

<button @onclick="ScanQRCode" disabled="@(qrImageSrc == null)">Scan QR Code</button>

<p>Result: @scannedText</p>

Ejemplo de entrada

Utiliza el código QR a continuación como imagen de prueba. Guárdalo en tu dispositivo, súbelo a través del selector de archivos en la aplicación y luego haz clic en Escanear Código QR. El valor decodificado debería mostrarse como https://ironsoftware.com.

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

Escaneo de códigos QR con IronQR

Cuando se selecciona un archivo, OnFileSelected transmite la carga del navegador a un archivo temporal en el servidor. Cuando se hace clic en el botón de escaneo, ScanQRCode carga el archivo en un AnyBitmap, lo pasa a QrReader.Read(), y escribe el primer valor decodificado en scannedText, el cual Blazor renderiza automáticamente en el componente.

Añade el siguiente bloque @code a Scanner.razor:

:path=/static-assets/qr/content-code-examples/how-to/blazor-qr-code-scanner.cs

using IronQr;
using IronSoftware.Drawing;

private string? qrImageSrc;
private string scannedText = string.Empty;

private async Task OnFileSelected(InputFileChangeEventArgs e)
{
    var file = e.File;
    var tempPath = Path.Combine(Path.GetTempPath(), file.Name);
    await using var stream = file.OpenReadStream(maxAllowedSize: 10_000_000);
    await using var fs = File.Create(tempPath);
    await stream.CopyToAsync(fs);
    qrImageSrc = tempPath;
}

private async Task ScanQRCode()
{
    // Load the scanned QR code
    var inputBmp = AnyBitmap.FromFile(qrImageSrc!);
    var imageInput = new QrImageInput(inputBmp);
    var reader = new QrReader();

    // Read the scanned QR code
    var results = reader.Read(imageInput);

    // Check if a result was found
    var firstResult = results.FirstOrDefault();
    if (firstResult != null)
    {
        // Save the QR code value as a string
        scannedText = firstResult.Value;
    }
    else
    {
        scannedText = "No QR code found in the selected image.";
    }
}

Imports IronQr
Imports IronSoftware.Drawing
Imports System.IO
Imports Microsoft.AspNetCore.Components.Forms
Imports System.Threading.Tasks

Private qrImageSrc As String = Nothing
Private scannedText As String = String.Empty

Private Async Function OnFileSelected(e As InputFileChangeEventArgs) As Task
    Dim file = e.File
    Dim tempPath = Path.Combine(Path.GetTempPath(), file.Name)
    Await Using stream = file.OpenReadStream(maxAllowedSize:=10000000)
        Await Using fs = File.Create(tempPath)
            Await stream.CopyToAsync(fs)
        End Using
    End Using
    qrImageSrc = tempPath
End Function

Private Async Function ScanQRCode() As Task
    ' Load the scanned QR code
    Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
    Dim imageInput = New QrImageInput(inputBmp)
    Dim reader = New QrReader()

    ' Read the scanned QR code
    Dim results = reader.Read(imageInput)

    ' Check if a result was found
    Dim firstResult = results.FirstOrDefault()
    If firstResult IsNot Nothing Then
        ' Save the QR code value as a string
        scannedText = firstResult.Value
    Else
        scannedText = "No QR code found in the selected image."
    End If
End Function

InputFile.OpenReadStream transmite los bytes subidos directamente a un archivo temporal del lado del servidor. AnyBitmap.FromFile decodifica el formato de la imagen, y QrReader.Read devuelve un IEnumerable<QrResult> con una entrada por cada código QR encontrado. FirstOrDefault maneja de manera segura las imágenes sin código QR sin lanzar una excepción.

Producción

Después de seleccionar una imagen de código QR y hacer clic en Escanear Código QR, el valor decodificado se renderiza en el párrafo de resultado debajo de los controles.

Valor del código QR decodificado renderizado en el componente Blazor

Descargar el proyecto

Haz clic aquí para descargar el proyecto completo BlazorQrScanner.

Conclusión

IronQR se integra en una aplicación de Blazor Server sin JavaScript. InputFile proporciona selección de archivos nativa del navegador, y QrReader.Read maneja la decodificación completamente en el servidor. El mismo patrón se escala para escanear múltiples códigos QR por imagen al iterar sobre la colección completa de resultados en lugar de llamar a FirstOrDefault.

Para más información sobre la lectura de códigos QR y los modos de escaneo disponibles, consulta las guías Leer códigos QR desde imagen y Leer códigos QR con modos de escaneo.