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

Introducción

Este artículo explora la integración de un escáner de código de respuesta rápida (escáner de código QR) en una aplicación Blazor utilizando IronQR, una biblioteca .NET. Un código QR es un código de barras bidimensional que almacena muchos más datos que un código de barras unidimensional normal.

Blazor, un framework de Microsoft, permite a los desarrolladores crear aplicaciones de una sola página (utilizando la aplicación Blazor WebAssembly) o usar C# para construir interfaces web interactivas, (Blazor Server, en el que nos centraremos en esta guía).

La integración de IronQR con Blazor Server para el escaneado de códigos QR es una combinación estratégica que aprovecha los puntos fuertes de ambas tecnologías. Mediante la integración de IronQR con las aplicaciones Blazor, puede gestionar eficazmente la generación y el escaneado de códigos QR. Esta funcionalidad de un lector de códigos QR es cada vez más demandada en diversos contextos empresariales, como la gestión de inventarios, los sistemas de venta de entradas y el intercambio de información sin contacto.

Entender lo básico

¿Qué es un servidor Blazor?

Blazor Server es un framework de aplicaciones web que forma parte de la plataforma ASP.NET Core. Permite a los desarrolladores crear interfaces web interactivas utilizando C# en lugar de JavaScript. Este modelo del lado del servidor funciona gestionando las interacciones de los usuarios a través de una conexión SignalR, una funcionalidad web en tiempo real. Esto ayuda a los desarrolladores a crear aplicaciones web eficaces e interactivas.

Introducción a IronQR

IronQR es una biblioteca .NET que destaca por su capacidad para leer, interpretar y generar códigos QR con alta precisión. Ofrece una amplia gama de funciones, incluida la capacidad de gestionar distintos tipos de contenido de códigos QR. La fuerza de IronQR radica en su sencillez y facilidad de integración en aplicaciones .NET, lo que lo convierte en la opción preferida de los desarrolladores que desean incorporar y crear funciones de código QR.

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

1. Crear una aplicación de servidor Blazor en Visual Studio Code

2. Instalar la biblioteca de clases de código QR mediante el gestor de paquetes NuGet

3. Crear la interfaz de usuario utilizando HTML y CSS en el index.razor

4. Escribir la lógica de gestión de archivos cargados

5. Escribir la lógica de escaneo QR utilizando la biblioteca QR

6. Mostrar el resultado en el cuadro de texto

Configuración del entorno

Crear una nueva aplicación Blazor Server

Inicie Visual Studio y seleccione "Crear un nuevo proyecto". En la pantalla de selección de plantilla de proyecto, busque y seleccione la plantilla "Blazor Server App". Haga clic en Siguiente.

Habiendo elegido la plantilla, ingrese un Nombre de Proyecto y Ubicación (mantenga todo lo demás con los valores predeterminados) y haga clic en el botón Siguiente.

Ahora seleccione el .NET Framework deseado y pulse el botón crear. Creará una aplicación Blazor Server.

Instalación de la biblioteca IronQR

Haga clic en Herramientas en la barra de menús. En el menú desplegable, seleccione NuGet Package Manager. En el menú contextual, seleccione "Gestionar paquetes NuGet para la solución". Se abrirá la pestaña Gestor de paquetes NuGet.

En el gestor de paquetes NuGet, busque "IronQR" en la pestaña "Examinar". A continuación, localice el paquete "IronQR" en la lista. Haz clic en el botón "Instalar".

Ahora que lo tienes todo instalado, podemos repasar la estructura del proyecto y cómo implementarlo todo en tu proyecto.

Implantación del escaneado de códigos QR

Creación de la interfaz de usuario

La interfaz de usuario para el Escáner de Códigos QR está construida principalmente dentro del archivo Index.razor. Este archivo, parte del proyecto de Blazor Server, 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(qrImageSrc))
    {
        <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">
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

@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(qrImageSrc))
    {
        <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">
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @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(qrImageSrc))
"image/*" Class="file-input" /> [if](Not String.IsNullOrEmpty(qrImageSrc))
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Friend @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
"HandleSelectedFile" accept="image/*" Class
Friend page "/" [using] System.IO [using] Microsoft.AspNetCore.Components.Forms [using] IronQr [using] IronSoftware.Drawing inject IJSRuntime JSRuntime (Of PageTitle) QR Code Scanner</PageTitle> (Of div) (Of h1) QR Code Scanner</h1> <InputFile OnChange="HandleSelectedFile" accept
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
		"QR Code Image" class="qr-image" />
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class
		"@qrImageSrcForDisplay" alt="QR Code Image" class
		<img src="@qrImageSrcForDisplay" alt
End Class
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button"> Scan QR Code</button> if(!string.IsNullOrEmpty(scannedText))
	"@(!fileSelected)" class="button scan-button"> Scan QR Code</button> [if](Not String.IsNullOrEmpty(scannedText))
	If True Then
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class
	"ScanQRCode" disabled="@(!fileSelected)" class
	<button onclick="ScanQRCode" disabled
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class="button copy-button"> Copy</button> </div>
		"CopyToClipboard" class="button copy-button"> Copy</button> </div>
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class
		"result-section"> <button onclick="CopyToClipboard" class
		<div class="result-section"> <button onclick
	End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'</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 imágenes: Se utiliza un componente <InputFile> para subir imágenes de códigos QR. Este elemento está adaptado para aceptar sólo archivos de imagen, lo que mejora la experiencia del usuario al filtrar los tipos de archivo no pertinentes.

Visualización de imagen: Una vez que se carga una imagen, se muestra usando una etiqueta <img>. Esta información visual es crucial para garantizar al usuario que ha cargado el archivo correcto.

Botón de Escaneo: Un botón etiquetado con @onclick="ScanQRCode activa el proceso de escaneo. Su disponibilidad depende de si se ha seleccionado un archivo, lo que mejora la intuitividad de la interfaz.

Visualización del Resultado: El texto del código QR escaneado se muestra en un campo de entrada de texto para facilitar su visualización. Otro botón permite copiar este texto en el portapapeles.

Estilo CSS en site.css

Los aspectos visuales 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 da estilo al área principal de contenido, proporcionando un ancho definido, alineación centrada y una sutil sombra para profundidad.

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

.button: Los botones están diseñados con un fondo verde distintivo, bordes redondeados y un efecto de desplazamiento para mejorar la interacción del usuario.

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

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

Carga de archivos

El método HandleSelectedFile es una parte crucial del proceso de escaneo de códigos QR, gestionando 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

Aquí tienes un desglose detallado de su funcionalidad:

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

Creando la Ruta del Archivo: El método prepara un directorio para almacenar la imagen subida. Usa Path.Combine para crear una ruta al directorio 'UploadedImages', asegurando que exista con Directory.CreateDirectory. Este paso es crucial para organizar sistemáticamente los archivos cargados.

Generar un nombre de archivo único: Para evitar conflictos con archivos existentes, se genera un nombre de archivo único utilizando un GUID (Identificador Único Global) añadido con la extensión del archivo original. Esto garantiza que cada archivo subido sea uniquePathdentified.

Guardando el archivo: El archivo se guarda entonces en el servidor. El método crea un flujo de archivo que apunta a la ruta del archivo recién generado, y el contenido del archivo subido se copia en este flujo utilizando await selectedFile.OpenReadStream().CopyToAsync(fileStream). Este paso finaliza el proceso de carga.

Preparando la imagen para mostrar: Después de guardar el archivo, es necesario mostrar la imagen de nuevo al usuario para su confirmación. El método lee el archivo en un array de bytes y lo convierte en una cadena base64, adecuada para incrustarse directamente en el atributo src de la etiqueta <img>. Esta conversión permite mostrar la imagen sin necesidad de solicitar por separado el archivo de imagen al servidor.

Escanear 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 de 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. Esta comprobación garantiza que existe una imagen válida con la que trabajar antes de continuar.

Una vez confirmado que una imagen está lista para ser procesada, el método procede a la funcionalidad principal de lectura de códigos QR. Esto implica unos cuantos pasos clave, empezando por cargar la imagen desde su ubicación almacenada a un formato adecuado para el análisis de códigos 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 implica la creación de un objeto QrReader. Este objeto forma parte de la biblioteca IronQR y es la herramienta principal para descodificar códigos QR a partir de imágenes. Con la instancia de QrReader lista, la aplicación procede a escanear la imagen subida. 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>. A continuación, se examina esta colección para encontrar el primer resultado del código QR. Si se detecta un código QR y contiene texto legible, este texto se captura y se almacena en la variable scannedText. Sin embargo, en los casos en los que no se encuentra un código QR o no contiene texto, la aplicación establece un mensaje predeterminado para informar al usuario de que no se ha detectado ningún valor QR.

Una vez que el código QR se ha escaneado correctamente, la cadena de texto se muestra en un campo de entrada de texto, gracias a las capacidades de enlace de datos bidireccional de Blazor. Esto se logra vinculando la variable scannedText a un elemento de entrada de texto. El campo de entrada está desactivado, por lo que es de sólo lectura. Esta elección de diseño centra la interacción del usuario hacia la visualización del resultado y su copia en lugar de la edición del contenido.

Todo el proceso de escaneado está encerrado dentro de un bloque try-catch, que protege contra cualquier error imprevisto durante la operación de escaneado. Esto podría incluir problemas relacionados con el formato del archivo de imagen o errores inesperados durante el proceso de lectura. Si se produce una excepción, se captura y se formula un mensaje de error que se muestra al usuario. Este enfoque no sólo ayuda a detectar problemas, sino que también mantiene la transparencia con el usuario, lo que aumenta la fiabilidad de la aplicación.

Copiar el resultado

Para habilitar la función de copiar al portapapeles, se define una función JavaScript llamada copyTextToClipboard en el archivo _Host.cshtml. Este script es una manera 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. Utiliza el método navigator.clipboard.writeText, un enfoque moderno para interactuar con el portapapeles. Este método es el preferido por su sencillez y su conformidad con los estándares web. Está diseñado para registrar un mensaje de éxito en la consola tras una copia correcta, lo que ayuda en la depuración y garantiza un funcionamiento sin problemas. En caso de error, se registra un mensaje de error en la consola, que proporciona información sobre los problemas encontrados durante la operación.

El método CopyToClipboard está en la parte @code del index.razor y sirve como un puente entre la aplicación Blazor y la función JavaScript. Un botón activa el clic de este método en la interfaz de usuario. Cuando se activa, invoca la función de JavaScript copyTextToClipboard utilizando las capacidades de InterOp de JavaScript 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

Ejecución de la aplicación

Al ejecutar el proyecto, el usuario verá la siguiente interfaz limpia y sencilla. La pantalla inicial muestra de forma destacada el módulo de escáner de códigos QR. Este módulo incluye un botón para subir 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 escaneado está en blanco, a la espera de que el usuario introduzca los datos.

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 la zona designada de la interfaz, lo que confirma al usuario que la imagen está lista para ser escaneada.

Cuando el usuario pulsa el botón "Escanear código QR", la aplicación procesa la imagen. Si el escaneado es correcto, el texto codificado en el código QR aparece 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 código QR a un usuario cuando se escanea con un lector de QR. Junto al resultado aparece el botón Copiar, que permite al usuario copiar fácilmente el texto escaneado en el portapapeles para su uso posterior.

Conclusión

En resumen, el proceso de integración del IronQR en una aplicación Blazor Server es fluido y eficaz, dando como resultado una solución de escaneado de códigos QR. Sensible y fácil de usar, desde el inicio de la configuración de este proyecto hasta su implementación de la funcionalidad de escaneado, gracias a una mezcla del potente procesamiento de IronQR con el renderizado dinámico de la interfaz de usuario de Blazor. El proceso, desde la configuración del entorno hasta la implantación, pone de relieve la practicidad y eficacia de esta integración en aplicaciones del mundo real. Aunque IronQR es experto en códigos QR, para proyectos que requieren la función de escaneo de códigos de barras, IronBarcode es una opción ideal, ofreciendo un nivel similar de facilidad e integración.

IronQR ofrece una prueba gratuita para que los desarrolladores exploren sus características antes de comprar. Para uso extendido y acceso a todas sus funciones profesionales en producción, las licencias de IronQR comienzan a partir de $749.