Saltar al pie de página
USANDO IRONQR

Cómo generar códigos QR en ASP.NET Core

Los códigos QR se han convertido en una parte integral de la tecnología moderna, ofreciendo una forma conveniente de almacenar y transmitir información. En el desarrollo web, generadores de códigos QR como el que implementaremos usando IronQR en ASP.NET Core, ofrecen capacidades robustas para la creación dinámica de códigos QR. Los generadores de códigos QR son invaluables para varias aplicaciones como sistemas de boletos, autenticación, gestión de inventario, y más. Este artículo profundiza en el proceso de creación de códigos QR en ASP.NET Core usando IronQR, una biblioteca poderosa diseñada para este propósito. ASP.NET Core, al ser un marco versátil para construir aplicaciones web, ofrece capacidades robustas para la generación de códigos QR. En este artículo, profundizaremos en el proceso de creación de códigos QR en ASP.NET Core usando IronQR, una poderosa biblioteca para la generación de códigos QR de Iron Software.

Cómo generar códigos QR en ASP.NET Core

  1. Crear un proyecto ASP.Net usando Visual Studio
  2. Instalar la biblioteca IronQR desde el Administrador de Paquetes
  3. Generar Código QR
  4. Generar Código QR con Formato

Entendiendo IronQR

IronQR es una biblioteca de generación de códigos QR de alto rendimiento para aplicaciones .NET. Proporciona una API simple e intuitiva para generar códigos QR con varias opciones de personalización. IronQR es compatible con .NET Standard, lo que lo hace compatible con una amplia gama de plataformas, incluido ASP.NET Core. Con IronQR, los desarrolladores pueden generar sin esfuerzo códigos QR con diferentes tipos de datos, niveles de corrección de errores, tamaños y formatos.

Características principales

1. Lectura y creación de códigos QR

IronQR te permite generar y leer códigos QR con facilidad. Ya sea que necesites crear códigos QR dinámicamente o extraer información de los existentes, esta biblioteca lo cubre.

2. API fácil de usar

La biblioteca proporciona una API amigable para los usuarios que permite a los desarrolladores integrar la funcionalidad de códigos de barras en sus proyectos .NET rápidamente. Puedes empezar a trabajar con códigos QR en solo unos minutos.

3. Compatibilidad

IronQR es compatible con varias versiones de .NET, incluyendo:

  1. C#, VB.NET, F#
  2. .NET Core (8, 7, 6, 5 y 3.1+)
  3. .NET Standard (2.0+)
  4. .NET Framework (4.6.2+)

Cubre una amplia gama de tipos de proyectos, incluyendo web (Blazor & WebForms), móvil (Xamarin & MAUI), de escritorio (WPF & MAUI), y aplicaciones de consola.

4. Modelo de aprendizaje automático para la detección de códigos QR

IronQR utiliza un modelo avanzado personalizado de Aprendizaje Automático para detectar códigos QR. Esto asegura un reconocimiento preciso y confiable de los códigos. Además, hay una opción de Modo Slim (no-ML) disponible para aquellos que prefieren un enfoque liviano.

5. Lectura de códigos QR

Puedes leer códigos QR de varios formatos de imagen, incluyendo:

  1. Imágenes (jpg, png, svg, bmp)
  2. Imágenes Multipágina (gif, tif, tiff)
  3. Bitmaps de System.Drawing
  4. Imágenes de IronDrawing (AnyBitmap)

6. Escritura de códigos QR

IronQR te permite escribir códigos QR para diferentes tipos de documentos, tales como:

  1. Imágenes (jpg, png, gif, tiff, bmp)
  2. Imágenes de System.Drawing
  3. Flujos (MemoryStream, byte[])
  4. PDF (Estampar en PDF Existente)

7. Estilo de códigos QR

Personaliza los códigos QR redimensionándolos, ajustando márgenes y bordes, recoloreándolos, añadiendo logotipos

8. Manejo y corrección de errores

IronQR proporciona mensajes detallados de error y soporta niveles personalizados de corrección de errores QR.

Con este conocimiento, comencemos con la aplicación para generar el código QR en ASP.NET Core.

Paso 1: Cree un nuevo proyecto ASP.NET con Visual Studio

Antes de profundizar en la generación de códigos QR, configuremos un nuevo proyecto ASP.NET Core. Aquí están los pasos para iniciar un nuevo proyecto:

Empieza creando un nuevo proyecto en Visual Studio y seleccionando la aplicación de plantilla ASP.Net Core Web App

Cómo Generar Códigos QR en ASP .NET Core: Figura 1 - Seleccionar la plantilla de aplicación web ASP.NET CORE

Proporciona Nombre del Proyecto y ubicación

Cómo Generar Códigos QR en ASP .NET Core: Figura 2 - Nombra el proyecto y la ubicación a la que deseas guardar

Seleccione la versión .NET requerida.

Cómo Generar Códigos QR en ASP .NET Core: Figura 3 - Selecciona la versión correcta de .NET.

Haz clic en el botón "crear" para generar el código de la aplicación desde la plantilla

Cómo Generar Códigos QR en ASP .NET Core: Figura 4 - Haz clic en el botón crear para generar el código de plantilla

Paso 2: Instalar la biblioteca IronQR desde el Administrador de paquetes

Instala la biblioteca IronQR desde el Administrador de Paquetes de Visual Studio como se muestra a continuación.

Cómo Generar Códigos QR en ASP .NET Core: Figura 5 - Busca IronOCR usando el Administrador de Paquetes de Visual Studio e instálalo

IronQR también se puede instalar usando el Administrador de Paquetes NuGet.

Cómo Generar Códigos QR en ASP .NET Core: Figura 6 - Busca IronOCR usando el Administrador de Paquetes NuGet

Paso 3: Generar un código QR

Ahora, crearemos una aplicación de código QR.

Crear modelo QRCode

using System.ComponentModel.DataAnnotations;

namespace GenerateQRCode.Models
{
    public class QRCodeModel
    {
        [Display(Name = "Enter QR Code Text")]
        public string QRCodeText { get; set; }
    }
}
using System.ComponentModel.DataAnnotations;

namespace GenerateQRCode.Models
{
    public class QRCodeModel
    {
        [Display(Name = "Enter QR Code Text")]
        public string QRCodeText { get; set; }
    }
}
$vbLabelText   $csharpLabel

Crear un controlador de código QR

Para agregar un nuevo controlador, haz clic derecho sobre la carpeta del controlador y proporciona un nombre como se muestra a continuación.

Cómo Generar Códigos QR en ASP .NET Core: Figura 7 - Añadir un nuevo controlador haciendo clic sobre la carpeta y nombrarlo

Selecciona el Controlador Vacío.

Cómo Generar Códigos QR en ASP .NET Core: Figura 8 - Haz clic en Controlador Vacío en el aviso

Proporciona un nombre.

Cómo Generar Códigos QR en ASP .NET Core: Figura 9 - Nombra el controlador

A continuación, integra el siguiente código en el controlador.

using GenerateQRCode.Models;
using IronSoftware.Drawing;
using IronQr;
using Microsoft.AspNetCore.Mvc;

namespace GenerateQRCode.Controllers
{
    public class QrCodeController : Controller
    {
        private readonly IWebHostEnvironment _environment;

        public QrCodeController(IWebHostEnvironment environment)
        {
            _environment = environment;
        }

        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult CreateQRCode(QRCodeModel generateQRCode)
        {
            try
            {
                string path = Path.Combine(_environment.WebRootPath, "GeneratedQRCode");
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }
                string filePath = Path.Combine(_environment.WebRootPath, "GeneratedQRCode/qrcode.png");
                // Create a QR Code object
                QrCode myQr = QrWriter.Write(generateQRCode.QRCodeText);
                // Save QR Code as a Bitmap
                AnyBitmap qrImage = myQr.Save();
                // Save QR Code Bitmap as File
                qrImage.SaveAs(filePath);
                string fileName = Path.GetFileName(filePath); // qr code file
                string imageUrl = $"{this.Request.Scheme}://{this.Request.Host}{this.Request.PathBase}" + "/GeneratedQRCode/" + fileName;
                ViewBag.QrCodeUri = imageUrl;
            }
            catch (Exception)
            {
                throw;
            }
            return View();
        }
    }
}
using GenerateQRCode.Models;
using IronSoftware.Drawing;
using IronQr;
using Microsoft.AspNetCore.Mvc;

namespace GenerateQRCode.Controllers
{
    public class QrCodeController : Controller
    {
        private readonly IWebHostEnvironment _environment;

        public QrCodeController(IWebHostEnvironment environment)
        {
            _environment = environment;
        }

        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult CreateQRCode(QRCodeModel generateQRCode)
        {
            try
            {
                string path = Path.Combine(_environment.WebRootPath, "GeneratedQRCode");
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }
                string filePath = Path.Combine(_environment.WebRootPath, "GeneratedQRCode/qrcode.png");
                // Create a QR Code object
                QrCode myQr = QrWriter.Write(generateQRCode.QRCodeText);
                // Save QR Code as a Bitmap
                AnyBitmap qrImage = myQr.Save();
                // Save QR Code Bitmap as File
                qrImage.SaveAs(filePath);
                string fileName = Path.GetFileName(filePath); // qr code file
                string imageUrl = $"{this.Request.Scheme}://{this.Request.Host}{this.Request.PathBase}" + "/GeneratedQRCode/" + fileName;
                ViewBag.QrCodeUri = imageUrl;
            }
            catch (Exception)
            {
                throw;
            }
            return View();
        }
    }
}
$vbLabelText   $csharpLabel

Explicación del código

Definición de espacio de nombres y clase

El código comienza con declaraciones de uso, que importan los espacios de nombres necesarios. El namespace GenerateQRCode.Controllers contiene la clase QrCodeController.

Constructor del controlador

La clase QrCodeController tiene un constructor que toma un parámetro IWebHostEnvironment. Este parámetro es inyectado por ASP.NET Core para manejar tareas relacionadas con el alojamiento web.

Métodos de acción

  • Index(): Este método devuelve una vista (presumiblemente una página HTML) cuando es accedido. No parece estar directamente relacionado con la generación de códigos QR.
  • CreateQRCode(QRCodeModel generateQRCode): Este método es el corazón de la lógica de generación de códigos QR. Recibe un objeto QRCodeModel (presumiblemente conteniendo el texto del código QR) como parámetro.

Dentro del método

  • Construye una ruta para guardar la imagen generada del código QR.
  • Crea un objeto de código QR usando QrWriter.Write(generateQRCode.QRCodeText).
  • Guarda el código QR como una imagen bitmap.
  • Construye un URL de la imagen basado en los detalles de la solicitud web.
  • Establece la propiedad ViewBag.QrCodeUri con el URL de la imagen.
  • Si ocurre alguna excepción durante este proceso, son lanzadas.

Generación de códigos QR

La generación real de códigos QR ocurre dentro del método CreateQRCode. La llamada QrWriter.Write(generateQRCode.QRCodeText) crea un objeto de código QR basado en el texto proporcionado.

Guardar imagen

El código QR generado se guarda como una imagen bitmap usando qrImage.SaveAs(filePath). La ruta del archivo de imagen se construye basándose en la ruta raíz web y el nombre de archivo deseado.

URL de la imagen

El imageUrl se construye usando el esquema, host y base de ruta de la solicitud web. Este URL apunta a la ubicación donde la imagen generada del código QR puede ser accedida. En general, este controlador maneja la generación de códigos QR, guarda la imagen y proporciona un URL de imagen para uso posterior.

Agregar vista al controlador

Para agregar una nueva vista, haz clic derecho en el método de acción CreateQRCode en la clase QrCodeController.

Cómo Generar Códigos QR en ASP .NET Core: Figura 10 - Añadir una nueva vista en la clase `QrCodeController`

Selecciona "Agregar Vista" luego selecciona "Razor View". Haz clic en el botón "Añadir".

Cómo Generar Códigos QR en ASP .NET Core: Figura 11 - Selecciona la opción Añadir Vista, luego Razor View, luego Añadir

Luego selecciona la plantilla "Create" y la clase del Modelo generada previamente.

Cómo Generar Códigos QR en ASP .NET Core: Figura 12 - Selecciona la plantilla `Create` generada previamente

Ahora reemplaza el código a continuación en la vista

@model GenerateQRCode.Models.QRCodeModel

@{
    ViewData["Title"] = "Generate QR Code";
}

<h1>Generate QR Code</h1>
<h4>QRCodeModel</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="CreateQRCode">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="QRCodeText" class="control-label"></label>
                <input asp-for="QRCodeText" class="form-control" />
                <span asp-validation-for="QRCodeText" class="text-danger"></span>
            </div>
            <div class="form-group">
                <a href="#" class="btn btn-primary">Create QR Code</a>
            </div>
            <div class="form-group">
                <img src="@ViewBag.QrCodeUri" class="img-thumbnail" alt="Your QR Code will appear here." />
            </div>
        </form>
    </div>
</div>
<div>
    <a asp-action="Index">Clear</a>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
@model GenerateQRCode.Models.QRCodeModel

@{
    ViewData["Title"] = "Generate QR Code";
}

<h1>Generate QR Code</h1>
<h4>QRCodeModel</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="CreateQRCode">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="QRCodeText" class="control-label"></label>
                <input asp-for="QRCodeText" class="form-control" />
                <span asp-validation-for="QRCodeText" class="text-danger"></span>
            </div>
            <div class="form-group">
                <a href="#" class="btn btn-primary">Create QR Code</a>
            </div>
            <div class="form-group">
                <img src="@ViewBag.QrCodeUri" class="img-thumbnail" alt="Your QR Code will appear here." />
            </div>
        </form>
    </div>
</div>
<div>
    <a asp-action="Index">Clear</a>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
$vbLabelText   $csharpLabel

Haz lo mismo para el método de acción de índice también, de modo que cuando se inicie la aplicación, no arroje un error para la solicitud POST.

Ahora en el Program.cs, cambia el siguiente código para hacer la vista anterior como la ruta por defecto.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=QrCode}/{action=Index}"
);
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=QrCode}/{action=Index}"
);
$vbLabelText   $csharpLabel

Esta acción modificará la ruta por defecto de HomeController a nuestro QrCodeController.

Ahora, compile y ejecute el proyecto.

Cómo Generar Códigos QR en ASP .NET Core: Figura 13 - Página de inicio de ejemplo del proyecto

Ingresa cualquier texto en el cuadro de texto y haz clic en 'Crear.' Esto creará un nuevo código QR como se muestra a continuación.

Cómo Generar Códigos QR en ASP .NET Core: Figura 14 - Ingresa cualquier texto y haz clic en crear para crear un nuevo código QR utilizando IronQR

Agregar estilo al código QR

Se usan QrStyleOptions para estilizar la generación de código QR.

[HttpPost]
public IActionResult CreateQRCode(QRCodeModel generateQRCode)
{
    try
    {
        string path = Path.Combine(_environment.WebRootPath, "GeneratedQRCode");
        if (!Directory.Exists(path))
        {
            Directory.CreateDirectory(path);
        }
        string filePath = Path.Combine(_environment.WebRootPath, "GeneratedQRCode/qrcode.png");

        // Create a QR Code object
        QrCode qrCode = QrWriter.Write(generateQRCode.QRCodeText);
        QrStyleOptions style = new QrStyleOptions
        {
            Dimensions = 300, // px size
            Margins = 10,     // px margins
            Color = Color.YellowGreen // custom color
        };

        // Save QR Code with style options as a bitmap
        AnyBitmap qrImage = qrCode.Save(style);
        // Save QR Code Bitmap to File
        qrImage.SaveAs(filePath);

        string fileName = Path.GetFileName(filePath); // qr code file
        string imageUrl = $"{this.Request.Scheme}://{this.Request.Host}{this.Request.PathBase}" + "/GeneratedQRCode/" + fileName;
        ViewBag.QrCodeUri = imageUrl;
    }
    catch (Exception)
    {
        throw;
    }
    return View();
}
[HttpPost]
public IActionResult CreateQRCode(QRCodeModel generateQRCode)
{
    try
    {
        string path = Path.Combine(_environment.WebRootPath, "GeneratedQRCode");
        if (!Directory.Exists(path))
        {
            Directory.CreateDirectory(path);
        }
        string filePath = Path.Combine(_environment.WebRootPath, "GeneratedQRCode/qrcode.png");

        // Create a QR Code object
        QrCode qrCode = QrWriter.Write(generateQRCode.QRCodeText);
        QrStyleOptions style = new QrStyleOptions
        {
            Dimensions = 300, // px size
            Margins = 10,     // px margins
            Color = Color.YellowGreen // custom color
        };

        // Save QR Code with style options as a bitmap
        AnyBitmap qrImage = qrCode.Save(style);
        // Save QR Code Bitmap to File
        qrImage.SaveAs(filePath);

        string fileName = Path.GetFileName(filePath); // qr code file
        string imageUrl = $"{this.Request.Scheme}://{this.Request.Host}{this.Request.PathBase}" + "/GeneratedQRCode/" + fileName;
        ViewBag.QrCodeUri = imageUrl;
    }
    catch (Exception)
    {
        throw;
    }
    return View();
}
$vbLabelText   $csharpLabel

Resultado

Cómo Generar Códigos QR en ASP .NET Core: Figura 15 - Modificando el color del código QR programáticamente

Licencia (versión de prueba disponible)

Para los desarrolladores que quieren probar IronQR, una licencia de prueba está disponible aquí. Esta clave de licencia necesita colocarse en el archivo appSettings.json. Hacerlo eliminará la marca de agua mostrada en las imágenes de arriba.

{
  "IronQR.License.LicenseKey": "My key"
}

Conclusión

En este artículo, hemos explorado cómo generar códigos QR en ASP.NET Core usando IronQR. Aprovechando el poder de IronQR, los desarrolladores pueden integrar fácilmente la funcionalidad de generación de códigos QR en sus aplicaciones web. Ya sea para boletos, autenticación o para compartir información, los códigos QR ofrecen una solución versátil para transmitir datos de manera eficiente. Con IronQR, crear y personalizar códigos QR en ASP.NET Core nunca ha sido tan fácil. Comience a incorporar la generación de códigos QR en sus proyectos ASP.NET Core y desbloquee un mundo de posibilidades para la codificación dinámica de datos y el intercambio.

Preguntas Frecuentes

¿Cómo puedo generar códigos QR en ASP.NET Core?

Para generar códigos QR en ASP.NET Core, puede usar la biblioteca IronQR. Comience creando un nuevo proyecto ASP.NET en Visual Studio, instale IronQR a través del Administrador de Paquetes e implemente el código para generar códigos QR usando su API fácil de usar.

¿Qué opciones de personalización están disponibles para los códigos QR en ASP.NET Core?

IronQR ofrece varias opciones de personalización para los códigos QR en ASP.NET Core, incluyendo redimensionar, ajustar márgenes, cambiar colores y agregar logotipos. Estas se pueden gestionar utilizando la clase QrStyleOptions.

¿Cómo funciona la corrección de errores en la generación de códigos QR con ASP.NET Core?

IronQR le permite gestionar los niveles de corrección de errores al generar códigos QR en ASP.NET Core. Esto asegura que los códigos QR tengan el nivel deseado de resistencia al error, lo cual es esencial para un escaneo confiable.

¿Puedo leer códigos QR de diferentes formatos de imagen en ASP.NET Core?

Sí, con IronQR en ASP.NET Core, puede leer códigos QR de varios formatos de imagen como jpg, png, svg, bmp, gif, tif y tiff, así como Bitmaps de System.Drawing e Imágenes de IronDrawing (AnyBitmap).

¿Es posible probar IronQR sin una licencia completa?

Sí, puede obtener una licencia de prueba de IronQR en el sitio web de Iron Software. La prueba le permite probar la biblioteca y eliminar marcas de agua de los códigos QR generados durante la fase de prueba colocando la licencia en el archivo appSettings.json.

¿Cuáles son los beneficios de usar códigos QR en aplicaciones web?

Los códigos QR son beneficiosos para aplicaciones web, ya que permiten un almacenamiento y transmisión de datos eficientes. Son especialmente útiles en aplicaciones como sistemas de boletos, autenticación y gestión de inventarios, proporcionando una forma dinámica de codificar y compartir información.

¿Cómo mejora el aprendizaje automático la detección de códigos QR en ASP.NET Core?

IronQR utiliza un modelo avanzado personalizado de aprendizaje automático para la detección de códigos QR, asegurando alta precisión y fiabilidad en el reconocimiento de códigos. Para los usuarios que prefieren una solución más ligera, también está disponible un Modo Slim sin aprendizaje automático.

Jordi Bardia
Ingeniero de Software
Jordi es más competente en Python, C# y C++. Cuando no está aprovechando sus habilidades en Iron Software, está programando juegos. Compartiendo responsabilidades para pruebas de productos, desarrollo de productos e investigación, Jordi agrega un valor inmenso a la mejora continua del producto. La experiencia variada lo mantiene ...
Leer más