Generando Código QR en ASP.net y C# Paso a Paso.

En esta ocasión vamos a desarrollar una aplicación para generar Códigos QR en ASP.Net y C#, para ello vamos a necesitar una DLL llamada ThoughtWorks, esta DLL la puedes descargar en el siguiente enlace: http://www.ajpdsoft.com/modules.php?name=Downloads&d_op=viewdownloaddetails&lid=298

Una vez descargada la DLL será necesario agregarla a nuestro proyecto o sitio web en ASP.Net, para ello bastará con Dar Clic con el botón derecho o secundario del mouse sobre el Sitio Web y seleccionar la opción Agregar Referencia.

Anexando la referencia a nuestro proyecto.

De la ventana emergente, Administrador de Referencias, seleccionar de la columna izquierda la opción Examinar, posteriormente, seleccionar el Botón Examinar situado en la parte inferior derecha de la misma ventana.

Ubicando referencia o DDL.

De la ventana emergente, seleccionar la DDL deseada y posteriormente dar clic en el Botón Agregar.

Seleccionando la referencia o DDL deseada.

Ya estando en la ventana Administrador de Referencias, verificar que la DDL este seleccionada y posteriormente dar clic en el Botón Aceptar, con esto quedará agregada a nuestro sistema o sitio web.

Anexando la referencia o DDL.

Lo siguiente consiste en diseñar la página de contenido con la cual trabajaremos, para ello agregamos los siguientes controles necesarios: Un botón que generara el código QR, una textbox donde introduciremos el texto a codificar, un label para mostrar un error en caso de existir y sobretodo, un componente Image donde mostraremos el código QR Generado.

Diseño de la Página de Contenido.

Lo siguiente consiste en agregar dentro del evento del botón Generar QR el siguiente Código, el cual explicare a continuación:

try

        {         

            //Se guarda en una variable de sesion el texto a codificar.

            this.Page.Session["Texto"] = txtTexto.Text;

            //Se le indica al componenete image de donde obtendra la imagen

            imgCodigoQR.ImageUrl = "~/Default15.aspx";

        }

        catch (Exception Exd)

        {           

            //Se muestra en el label el mensaje de error si existiera

            lblMensaje.Text = Exd.Message;

        }

Notar que la imagen que se le asignara al componente image se obtendrá a través de una página de contenido que en este caso se llama Default15.aspx, que será justamente ahí donde generaremos el Código QR, por eso guardamos en una variable de sesión el texto a codificar, para posteriormente recuperarlo y codificarlo, vamos entonces a codificar la página de contenido Default15.aspx donde generaremos el Código QR.

Agregamos una página de contenido a nuestro sistema o sitio web de ASP.Net, visualizamos la página de código asociada y agregamos las siguientes referencias de nuestra DDL justo debajo de los using situados al inicio de la página de código.

using System.Data.Odbc;

using ThoughtWorks.QRCode;

using ThoughtWorks.QRCode.Codec;

using ThoughtWorks.QRCode.Codec.Data;

using System.Drawing;

Agregando los Using.

Lo siguiente consiste en codificar un método que nos generé el Código QR, para ello agregamos la siguiente función:

/// <summary>

    /// Este metodo genera un codigo QR el cual contiene el texto a codificar.

    /// </summary>

    /// <param name="TextoCodificar">Representa el texto que sera codificado en forma de Codigo QR</param>

    /// <returns>Retorna un arreglo de byte's que es el codigo QR generado.</returns>

    public byte[] GeneraCodigoQR(string TextoCodificar)

    {

        //Instancia del objeto encargado de codificar el codigo QR

        QRCodeEncoder CodigoQR = new QRCodeEncoder();

        //configuracion de las propiedades del objeto.

        CodigoQR.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.BYTE;

        CodigoQR.QRCodeScale = 4;

        CodigoQR.QRCodeErrorCorrect = ThoughtWorks.QRCode.Codec.QRCodeEncoder.ERROR_CORRECTION.M;

        CodigoQR.QRCodeVersion = 0;

        CodigoQR.QRCodeBackgroundColor = System.Drawing.Color.White;

        CodigoQR.QRCodeForegroundColor = System.Drawing.Color.Black;

        //Se retorna el Codigo QR codificado en formato de arreglo de bytes.

        return imageToByteArray(CodigoQR.Encode(TextoCodificar, System.Text.Encoding.UTF8));

    }

Como podemos observar, la función nos retorna un arreglo de bytes que es la imagen codificada en formato QR, por ello es necesario codificar una función alterna que nos codifique de Imagen a Arreglo de bytes, para este caso la función es la siguiente:

/// <summary>

    /// Este metodo permite convertir una imagen en un arreglo de byte's.

    /// </summary>

    /// <param name="imageIn">Representa el objeto de imagen enviado a esta función</param>

    /// <returns>Retorna un arreglo de byte's</returns>

    public byte[] imageToByteArray(System.Drawing.Image imageIn)

    {

        //Se crea un buffer de lectura

        System.IO.MemoryStream ms = new System.IO.MemoryStream();

        //Se guarda la imagen que es enviada como parametro a traves de la funcion Save del componente de imagen en el buffer de lectura

        imageIn.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);

        //Se retorna la imagen en formato de arreglo de bytes

        return ms.ToArray();

    }

Una vez definida la función que nos generará el Código QR, nos dirigimos al evento Load de la página de contenido y agregamos el siguiente código:

if (!IsPostBack)

        {

            //Se crea un arreglo de tipo byte que contendra el texto codificado en QR.

            Byte[] Arreglo_Imagen = GeneraCodigoQR(Page.Session["Texto"].ToString());           

           

            //Se indica el tipo de contexto que devolverá la página encuestion

            Response.ContentType = "Image/JPEG";

            //Se escribe la respuesta de la página, la cual en este caso es la imagen del QR.

            Response.BinaryWrite(Arreglo_Imagen);

        } 

De esta manera es como generamos un Código QR en ASP.Net y C# que contiene un texto especificado por el usuario, bastará con aplicar la optimización para obtener mejores resultados, como eliminar algunas funciones y hacer más directa la generación del Código QR.

Resultado Final.

Les dejo el Código del Ejemplo, incluye todo, Proyecto, CSS, DLLs, etc.

Peso Aproximado 4 MB.

Descarga Aquí....


Saludos y espero les sea de utilidad!!! Gracias!!!