En este post de programación web te voy a mostrar cómo generar códigos QR desde JS o JavaScript para que puedas generar un QR desde la web.

Vamos a usar una librería de terceros; verás que es muy simple crear códigos QR y tal vez esto te anime para crear tu propio generador.

Te aviso que vamos a usar JavaScript puro, así que puedes portar este código para frameworks como Angular, React o Vue.

Importando librería

Usaremos la librería QRious traída por el usuario neocotic de GitHub. En su página dice cómo incluirla, pero igualmente te lo dejo aquí. Básicamente puedes importar la última versión desde:

https://unpkg.com/qrious

Pero si quieres usar una versión fija (la cual usaré para el ejemplo, y en este momento es la 4.0.2) entonces puedes usar el siguiente enlace:

https://unpkg.com/qrious@4.0.2/dist/qrious.js

Y puedes cargar el script de JavaScript desde esa URL o descargarlo e importarlo de manera local, al final es tu decisión. Yo lo he hecho así:

See the gist on github.

El elemento para el código QR

Vamos a usar JavaScript del lado del cliente junto con HTML para generar el código QR. Para esto necesitamos un contenedor, un elemento en donde será montado el código. Yo te recomiendo un elemento img.

En mi caso tiene el id codigo y se ve así:

<img alt="Código QR" id="codigo">

Creando primer QR

Hasta este punto ya definimos el contenedor y ya importamos la librería que nos permitirá crear el código QR. Es momento de crear una nueva instancia de QRious pasándole el elemento y las opciones.

Primero te muestro el código y a continuación analizamos las propiedades:

See the gist on github.

El element es el elemento en donde el QR será dibujado. En este caso lo estoy recuperando con document.querySelector pero puedes usar getElementById o funciones similares.

Por otro lado en value estamos especificando el contenido del código QR, que puede ser una URL, un ID, un texto, etcétera. Luego en size especificamos el tamaño en pixeles.

Aquí viene algo importante y es el backgroundAlpha, mismo que permite hacer el fondo transparente. A mí me gusta que sea transparente, así que lo he dejado en 0.

Luego tenemos el foreground que es el color del código QR. Normalmente son color negro pero yo lo he colocado en color verde para demostrar la propiedad.

Finalmente el level es el nivel de corrección: entre mayor sea, mejor; pero también es más pesado.

Poniendo todo junto

El código completo queda así:

See the gist on github.

Descargar imagen de código QR

Si bien la imagen ya se puede descargar, podemos hacer la vida del usuario más fácil colocando un botón para descargar el código QR que acabamos de generar con HTML y JavaScript.

En este caso modificamos el HTML y el script:

See the gist on github.

Para descargar la imagen estoy aplicando un truco muy parecido al que utilizo para descargar un canvas. Te dejo la demostración de la generación del QR por aquí, y el código completo aquí.

Recuerda que en el GitHub del autor de la librería vas a encontrar más detalles importantes. Por otro lado, si te gusta JavaScript te invito a explorar más contenido en mi blog.