[Tips]Generar Codigos QR con jQuery

Hola que tal, buscando unos ejemplos me encontré con esta plugin para jquery muy útil a la hora de generar códigos QR. http://larsjung.de/qrcode/. La verdad me gustó mucho por que tiene la opción de hacer el render mediante un canvas, divs  mediante una tabla, lo que es muy útil al momento de dar compatibilidad con browsers antiguos. Su uso es bastante fácil, solo baje el plugin y armé el proyecto como ASP.NET como lo vez a continuación:

image

Luego incluí los scripts:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>

<script src="js/jquery.qrcode-0.2.js"></script>

 

y seguí las instrucciones de la página, en donde se indica que se deben crear los divs correspondiente para hacer el render, luego utilizando los ya clásicos

selectores de jquery, vamos a asignar el plugin a dichos divs.

 

 

   <p>Render en tabla</p>

    <div id="qrcodeTable"></div>

 

    <p>Render en canvas</p>

    <div id="qrcodeCanvas"></div>

<script>

 

    jQuery(‘#qrcodeTable’).qrcode({

        render: "table",

        text: "http://www.chalalo.cl"

    });

 

 

    $(‘#qrcodeCanvas’).qrcode({

        render: ‘div’,

        width: 100,

        height: 100,

        color: ‘#CCAA00’,

        text: ‘http://www.chalalo.cl’

    });

</script>

Atención especial a como se hace el render en el cliente,  como puedes ver, si elegimos canvas, el código generado es el siguiente:

image

Si elegimos tabla, debido a que estamos con un browser antiguo, o lo simulas como lo hice con IE con el modo de documento, se generan muchas celdas una tabla generada en tiempo de ejecución con el backgound de la celda coloreado según especificamos en el plugin.

image

Si elegimos divs tendemos algo similar, aunque más rápido en el render

image

Otro ejemplo de la personalización que podemos llegar a hacer:

$(‘#qrcodeCanvas’).qrcode({

        render: ‘div’,

        width: 100,

        height: 100,

        color: ‘#CCAA00’,

        text: ‘http://www.chalalo.cl’

    });

image

Además podemos desde la versión 0.2 de este plugin encodear aprox 2900 caracteres. Para probar tomé una porción de código de la página de ASP.NET y la agregué a la propiedad text del plugin,

image

El código (hay mucho más en la línea, pero se entiende verdad?)

image

y el código QR Generado:

image

Y puedes comprobarlo desde tu teléfono, para este ejemplo, por el tema de los screenshot utilice mi galaxy nexus. (PD: luego de ver la imagen, me reí, el número 911 se me repite en todos lados)

image

Ahora bien, esto lo hizo generando como div, por lo que son muuuuchos divs en la página, por lo que le tomó un tiempo de aprox 8 segundos en hacer el render,  como canvas un par de segundos menos, como tabla, mejor olvídalo Sonrisa

Bueno, espero que les sirva el tips, y si, pueden ocuparlo con WebForms también , pueden encapsular este plugin y listo! en otro artículo lo hago.

Nos vemos!!
@chalalo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *