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í:

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:

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

Generar código QR con JavaScript

Generar código QR con JavaScript

El código completo queda así:

Descargar imagen de código QR

Código QR con HTML y JS - Descargar como imagen

Código QR con HTML y JS – Descargar como imagen

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:

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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,601 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

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

A %d blogueros les gusta esto: