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

Requisitos previos

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

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 del componente Blazor

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

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

Entrada de muestra

Use el código QR a continuación como imagen de prueba. Guárdelo en su dispositivo, cárguelo a través del selector de archivos en la aplicación y luego haga 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ódigo 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, que Blazor renderiza automáticamente en el componente.

Agrega 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 directamente los bytes subidos a un archivo temporal del lado del servidor. AnyBitmap.FromFile decodifica el formato de imagen, y QrReader.Read devuelve un IEnumerable<QrResult> con una entrada por cada código QR encontrado. FirstOrDefault maneja de forma segura 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 de Blazor

Descargar el Proyecto

Haga clic aquí para descargar el proyecto completo BlazorQrScanner.

Conclusión

IronQR se integra en una aplicación Blazor Server sin JavaScript. InputFile proporciona selección de archivos nativa del navegador, y QrReader.Read maneja la decodificación enteramente en el servidor. El mismo patrón escala para escanear múltiples códigos QR por imagen iterando 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, consulte las guías Leer códigos QR desde imagen y Leer códigos QR con modos de escaneo.