Cómo Crear un Escáner de Códigos QR en Blazor

¿Qué es un servidor Blazor?

Blazor Server es un framework de aplicación web que es parte de la plataforma ASP.NET Core. Permite a los desarrolladores construir interfaces web interactivas usando C# en lugar de JavaScript. Este modelo del lado del servidor opera manejando las interacciones del usuario a través de una conexión SignalR, que proporciona funcionalidad web en tiempo real. Esto ayuda a los desarrolladores a crear aplicaciones web efectivas e interactivas.

Introducción a IronQR

IronQR es una biblioteca de .NET que destaca por su capacidad para leer, interpretar y generar códigos QR con alta precisión. Ofrece una gama de características, incluida la capacidad de manejar diferentes tipos de contenido de código QR. La fortaleza de IronQR radica en su simplicidad y facilidad de integración en aplicaciones .NET, convirtiéndose en una opción preferida para los desarrolladores que buscan incorporar y crear funcionalidad de códigos QR.

Crear una nueva aplicación de servidor Blazor

Inicia Visual Studio y elige "Crear un nuevo proyecto." En la pantalla de selección de plantillas de proyecto, encuentra y selecciona la plantilla "Blazor Server App". Haz clic en Siguiente.

Habiendo elegido la plantilla, ingresa un Nombre del Proyecto y una Ubicación (mantén todo lo demás con valores predeterminados) y haz clic en el botón Siguiente.

Ahora selecciona el .NET Framework deseado y presiona el botón crear. Se creará una aplicación del Servidor Blazor.

Instalación de la biblioteca IronQR

Haz clic en las Herramientas desde la barra de menú. Desde el menú desplegable, selecciona el Administrador de Paquetes NuGet. Desde el menú contextual, selecciona "Gestionar Paquetes NuGet para Solución". Esto abrirá la pestaña del Administrador de Paquetes NuGet.

En el Administrador de Paquetes NuGet, busca "IronQR" dentro de la pestaña "Explorar". Luego localiza el paquete "IronQR" en la lista. Haz clic en el botón "Instalar".

Ahora que tienes todo instalado, podemos repasar la estructura del proyecto e implementar todo en tu proyecto.

Construyendo la interfaz de usuario

La interfaz de usuario para el Escáner de Código QR se construye principalmente dentro del archivo Index.razor. Este archivo, parte de un proyecto del Servidor Blazor, utiliza una combinación de HTML y Sintaxis Razor para crear una página web dinámica e interactiva. La estructura incluye:

@page "/"
@using System.IO
@using Microsoft.AspNetCore.Components.Forms
@using IronQr
@using IronSoftware.Drawing
@inject IJSRuntime JSRuntime
<PageTitle>QR Code Scanner</PageTitle>
<div>
    <h1>QR Code Scanner</h1> 
    <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" />
    @if (!string.IsNullOrEmpty(qrImageSrcForDisplay))
    {
        <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
    }
    <button @onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button">Scan QR Code</button>
    @if (!string.IsNullOrEmpty(scannedText))
    {
        <div class="result-section">
            <input type="text" value="@scannedText" readonly class="result-input" />
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

Título y Encabezado: Las etiquetas <PageTitle> y <h1> definen el título de la página y el encabezado principal, respectivamente, estableciendo el contexto para el usuario.

Control de Carga de Imagen: Se utiliza un componente <InputFile> para cargar imágenes de códigos QR. Este elemento está diseñado para aceptar solo archivos de imagen, mejorando la experiencia del usuario al filtrar tipos de archivos no relevantes.

Muestra de Imágenes: Una vez que se carga una imagen, se muestra usando una etiqueta <img>. Esta retroalimentación visual es crucial para asegurar al usuario que se ha cargado el archivo correcto.

Botón de Escaneo: Un botón etiquetado con @onclick="ScanQRCode" inicia el proceso de escaneo. Su disponibilidad depende de si se ha seleccionado un archivo, mejorando la intuición de la interfaz.

Muestra del Resultado: El texto escaneado del código QR se muestra en un campo de entrada de texto para facilitar la visualización. Un botón separado permite a los usuarios copiar este texto al portapapeles.

Estilo CSS en site.css

La estética visual y el diseño del Escáner de Código QR están definidos en el archivo site.css.

.content {
    padding: 20px;
    margin: 10px auto; /* Centers the content */
    max-width: 500px; /* Sets a max width for the content */
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
}

.file-input, .result-input {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    width: 100%;
}

.button {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    transition: background-color 0.3s, box-shadow 0.3s;
    width: auto; /* Adjusts button width */
    display: inline-block; /* Allows the width to adjust to content */
}

.button:hover {
    background-color: #45a049;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
} 

.qr-image {
    max-width: 300px;
    max-height: 300px;
    display: block;
    margin: 10px auto;
    border-radius: 10px;
}

.result-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.result-input {
    width: 100%;
    box-sizing: border-box;
}

.copy-button {
    margin-top: 10px;
    white-space: nowrap;
}

.content: Esta clase estiliza el área de contenido principal, dándole un ancho definido, alineación centrada y sombra sutil para profundidad.

.file-input, .result-input: Estas clases estilizan los elementos de entrada de archivos y visualización de resultados, asegurando que sean visualmente consistentes y ocupen completamente el ancho de su contenedor.

.button: Los botones se estilizan con un fondo verde distintivo, bordes redondeados y un efecto de desplazamiento para una mejor interacción del usuario.

.qr-image: Los estilos aplicados a la imagen del código QR incluyen restricciones de tamaño y margen automático para centrado, haciendo la imagen prominente pero no abrumadora.

.result-section: Esta clase asegura que los elementos dentro de la sección de resultados estén alineados centralmente y espaciados adecuadamente.

Manejo de cargas de archivos

El método HandleSelectedFile es una parte crucial del proceso de escaneo de códigos QR, manejando la carga del archivo del usuario y preparándolo para el escaneo. Este método se activa cuando el usuario selecciona un archivo a través del componente <InputFile>. Esto se muestra en el siguiente código:

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists

    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);

    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }

    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;

    // Optionally, create a base64 string for displaying the image (if needed)
    byte[] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists

    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);

    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }

    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;

    // Optionally, create a base64 string for displaying the image (if needed)
    byte[] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

Private Async Function HandleSelectedFile(ByVal e As InputFileChangeEventArgs) As Task
	selectedFile = e.File
	fileSelected = True
	Dim imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages")
	Directory.CreateDirectory(imagesDirectory) ' Ensure the directory exists

	' Use a GUID as the unique file name
	Dim uniqueFileName = Guid.NewGuid().ToString() & Path.GetExtension(selectedFile.Name)
	Dim fullPath = Path.Combine(imagesDirectory, uniqueFileName)

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	await using(var fileStream = New FileStream(fullPath, FileMode.Create))
'	{
'		await selectedFile.OpenReadStream().CopyToAsync(fileStream);
'	}

	' Store the full path in qrImageSrc for scanning
	qrImageSrc = fullPath

	' Optionally, create a base64 string for displaying the image (if needed)
	Dim imageBytes() As Byte = Await File.ReadAllBytesAsync(fullPath)
	Dim base64String = Convert.ToBase64String(imageBytes)
	qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart("."c)};base64,{base64String}"
End Function

He aquí un desglose detallado de su funcionalidad:

Selección y Validación del Archivo: Cuando un usuario sube un archivo, el método captura los detalles del archivo usando InputFileChangeEventArgs e. La variable selectedFile se asigna luego a este archivo, y un booleano fileSelected se establece en verdadero, indicando que los datos de entrada/archivo están listos para el procesamiento.

Creación de la Ruta del Archivo: El método prepara un directorio para almacenar la imagen cargada. Utiliza Path.Combine para crear una ruta al directorio 'UploadedImages', asegurándose de que exista con Directory.CreateDirectory. Este paso es crucial para organizar sistemáticamente los archivos cargados.

Generación de un Nombre de Archivo Único: Para evitar conflictos con archivos existentes, se genera un nombre de archivo único usando un GUID (Identificador Único Global) agregado con la extensión del archivo original. Esto asegura que cada archivo cargado esté identificado de manera única.

Guardado del Archivo: Luego se guarda el archivo en el servidor. El método crea un flujo de archivo que apunta a la ruta de archivo recién generada, y el contenido del archivo cargado se copia en este flujo usando await selectedFile.OpenReadStream().CopyToAsync(fileStream). Este paso finaliza el proceso de carga.

Preparación de la Imagen para el Display: Una vez guardado el archivo, es necesario mostrar la imagen al usuario para confirmación. El método lee el archivo en un arreglo de bytes y lo convierte en una cadena base64, adecuada para incrustarse directamente en el atributo src de una etiqueta <img>. Esta conversión permite que la imagen se muestre sin necesidad de una solicitud separada al servidor para el archivo de imagen.

Escaneando el código QR

El método ScanQRCode es el núcleo de la funcionalidad de escaneo de códigos QR en la aplicación del Servidor Blazor. Este método toma la imagen cargada y utiliza IronQR para extraer los datos del código QR.

private async Task ScanQRCode()
{
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;

    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);

        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

private async Task ScanQRCode()
{
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;

    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);

        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

Private Async Function ScanQRCode() As Task
	' Check if there is a valid image to work with
	If String.IsNullOrEmpty(qrImageSrc) Then
		Return
	End If

	Try
		Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
		Dim imageInput As New QrImageInput(inputBmp)
		Dim reader As New QrReader()
		Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

		' Check if there are any results and if the first result contains text
		Dim firstResult = results.FirstOrDefault()
		If firstResult IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(firstResult.Value.ToString()) Then
			scannedText = firstResult.Value.ToString()
		Else
			scannedText = "QR value not found!"
		End If
	Catch ex As Exception
		scannedText = "Error scanning QR code: " & ex.Message
	End Try
End Function

Inicialmente, el método verifica si la variable qrImageSrc, que contiene la ruta de la imagen cargada, no está vacía. Este chequeo asegura que hay una imagen válida para trabajar antes de proceder.

Una vez confirmado que una imagen está lista para su procesamiento, el método procede al núcleo de la funcionalidad de lectura de códigos QR. Esto involucra unos cuantos pasos clave, comenzando por cargar la imagen desde su ubicación almacenada en un formato adecuado para el análisis del código QR. Esta conversión es posible gracias al método AnyBitmap.FromFile(qrImageSrc), que prepara la imagen para el proceso de escaneo.

El siguiente paso involucra la creación de un objeto QrReader. Este objeto es integral para la biblioteca de IronQR, sirviendo como la herramienta principal para decodificar códigos QR de imágenes. Con la instancia QrReader lista, la aplicación procede a escanear la imagen cargada. La función reader.Read(imageInput) es responsable de esta acción, buscando metódicamente en la imagen códigos QR y extrayendo sus datos.

Los resultados del escaneo se almacenan en una colección IEnumerable<QrResult>. Esta colección se examina luego para encontrar el primer resultado del código QR. Si se detecta un código QR, y este contiene texto legible, este texto se captura y se almacena en la variable scannedText. Sin embargo, en escenarios donde no se encuentra un código QR o no contiene texto, la aplicación establece un mensaje predeterminado para informar al usuario que no se detectó ningún valor QR.

Una vez que el código QR se escanea con éxito, la cadena de texto se muestra en un campo de entrada de texto, gracias a las capacidades de enlace de datos bidireccionales de Blazor. Esto se logra vinculando la variable scannedText a un elemento de entrada de texto. El campo de entrada está deshabilitado, solo de lectura. Esta elección de diseño se centra en la interacción del usuario hacia la visualización del resultado y la copia en lugar de editar el contenido.

Todo el proceso de escaneo está encerrado dentro de un bloque try-catch, protegiéndose contra cualquier error imprevisto durante la operación de escaneo. Esto podría incluir problemas relacionados con el formato del archivo de imagen o errores inesperados durante el proceso de lectura. Si ocurre una excepción, esta es capturada, y se formula y muestra un mensaje de error al usuario. Este enfoque ayuda a rastrear problemas mientras se mantiene la transparencia con el usuario, mejorando la fiabilidad de la aplicación.

Copiando el resultado

Para habilitar la función de copiar al portapapeles, se define una función de JavaScript llamada copyTextToClipboard en el archivo _Host.cshtml. Este script es una forma simple pero efectiva de interactuar con el portapapeles:

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

Esta función acepta un parámetro de texto, que es el texto a copiar. Usa el método navigator.clipboard.writeText, un enfoque moderno para interactuar con el portapapeles. Este método se prefiere por su simplicidad y cumplimiento con los estándares web. Está diseñado para registrar un mensaje de éxito en la consola al copiarse correctamente, ayudando en la depuración y asegurando una funcionalidad fluida. En caso de un error, se registra un mensaje de error en la consola, proporcionando información sobre cualquier problema encontrado durante la operación.

El método CopyToClipboard en la parte @code del index.razor sirve como un puente entre la aplicación de Blazor y la función de JavaScript. Un botón activa este método al hacer clic en la interfaz de usuario. Cuando se activa, invoca la función de JavaScript copyTextToClipboard utilizando las capacidades de JavaScript InterOp de Blazor. El scannedText se pasa como argumento a esta función, copiando efectivamente el texto al portapapeles del usuario.

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

Private Async Function CopyToClipboard() As Task
	Await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText)
End Function

Ejecutando la aplicación

Al ejecutar el proyecto, el usuario verá la siguiente interfaz limpia y simple. La pantalla inicial muestra el módulo de Escáner de Código QR de manera prominente. Este módulo incluye un botón para cargar el archivo de imagen del código QR ('Elegir Archivo') y otro para iniciar el proceso de escaneo ('Escanear Código QR'). Inicialmente, no se selecciona ningún archivo, y el área de escaneo está en blanco, esperando la entrada del usuario.

El usuario selecciona y carga una imagen de código QR usando el botón 'Elegir Archivo', que ahora muestra el nombre del archivo seleccionado (por ejemplo, 'qrvalue.png'). El código QR cargado es visible en el área designada en la interfaz, confirmándole al usuario que la imagen está lista para ser escaneada.

Después de que el usuario hace clic en el botón 'Escanear Código QR', la aplicación procesa la imagen. Si el escaneo es exitoso, el texto codificado dentro del código QR se muestra justo debajo de la imagen. En este caso, el resultado escaneado ('<https://ironsoftware.com/csharp/qr/>') es una URL que indica a dónde dirigiría un usuario el código QR al ser escaneado con un lector de códigos QR. Un botón de copia aparece junto al resultado, permitiendo al usuario copiar fácilmente el texto escaneado al portapapeles para su uso posterior.