Cómo crear un código QR con jQuery fácilmente

Aunque como buena practica deberias usar un servicio externo (escrito en PHP por ejemplo) alojado en un servidor ya sea de terceros o propio para generar imagenes de códigos QR y retornarlo en formato base64 con una llamada asíncrona, pues esto evitará muchos dolores de cabezas debido a temas de compatibilidad con exploradores antiguos etc, hay un asombroso plugin llamado jQUery QR Code, este plugin genera un canvas o una tabla para visualizar un código QR con solo un par de lineas.

Este plugin está basado en qrcode.js pero este plugin añade soporte para https.

Plugin

jQuery QR Code es un plugin de jQuery para la generación de códigos QR de manera independiente en el explorador web. Te permite añadir facilmente códigos QR a tus aplicaciones web. Es completamente independiente así que no necesitará ninguna librería externa aparte de jQuery, pesa menos de 4Kb luego de su minificación (no ejecuta llamadas externas a servidores). Este plugin está basado en una libreria de QR de multiples lenguajes, el wrapper de jQuery hace su integración con javascript sencilla. Hay una versión de este plugin (la original llamada qrcode.js), sin embargo si tu sitio usa el protocolo https, el plugin no funcionará como debido. La versión de jQuery no tiene este problema, por lo tanto puedes usarlo sin preocupacioens acerca del protocolo.

Para empezar a usar el plugin, sigue los siguientes pasos.

Incluye el plugin en tu documento (archivo .js), que puede ser descargado en el repositorio oficial aquí:

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

Luego agrega un DIV en el documento, que contendrá el canvas renderizado por el plugin. Si tu explorador no soporta el elemento canvas, puedes usar un polyfill de canvas o agregar la propiedad render:"table" en la inicialización del código QR.

<div id="demo"></div>

Finalmente inicializa el código QR con jQuery:

jQuery("#demo").qrcode("url o algo de texto");

// ó

jQuery("#demo").qrcode({
    //render:"table"
    width: 128,
    height: 128,
    text: "http://ourcodeworld.com"
});

Puedes ver un ejemplo en vivo en el siguiente fiddle:

Visita la página oficial del plugin aquí en caso de que necesites más información.

Que te diviertas!

jQuery código QR

Esto podría ser de tu interes

Conviertete en un programador más sociable