Hoy vengo a presentar un generador de códigos QR que es gratis de usar para el usuario final (no necesitas registrarte ni usar una cuenta) además de que es open source para los programadores.

En este post te voy a mostrar el enlace de la aplicación, cómo usarlo y cómo está hecho.

Generador de códigos QR online

Si quieres, puedes ir directamente al generador de códigos QR gratuito y comenzar a usarlo para generar tus códigos, personalizarlos y descargarlos.

Puedes personalizar el color del código, color de fondo, transparencia del fondo, tamaño de la imagen del código QR y la calidad de la misma,

Obviamente también puedes personalizar el contenido que lleva el código QR, mismo que puede ser una URL, tu página de Facebook, un texto, etcétera.

Un poco de historia

Estaba buscando un generador de códigos QR simple y el único que encontré tardaba mucho tiempo en descargar el QR; me parece que genera los códigos del lado del servidor y por eso la lentitud.

Si bien el mismo estaba muy completo y me imagino que debe cumplir con su función, decidí hacer el mío que fuera lo más simple posible, sin llamadas al servidor (totalmente del lado del cliente).

Por cierto, quiero dejar claro que estoy usando la librería QRious y vue-color para este proyecto; mis agradecimientos van a los autores de esas librerías.

Apartado técnico

Estoy usando las librerías que mencioné anteriormente junto con el framework de JavaScript llamado Vue. Los estilos y todo lo demás son de Bulma, y concretamente estoy usando Buefy para la interfaz.

He creado todo con la Vue CLI de modo que al final pude compilar la app y minificar el código para tenerlo listo para producción. Más adelante te dejaré el código fuente en caso de que quieras analizarlo y modificarlo.

Explicación del código

Al inicio de todo, en el mounted del componente estoy creando una instancia de QRious para crear el código QR en la imagen. Solo le estoy pasando el elemento en donde se va a generar y nada más.

Por otro lado, en ese mismo método estoy enfocando el textarea y refrescando el código QR con los valores seleccionados (opacidad, color, etcétera).

mounted() {
  this.qr = new QRious({
    element: document.querySelector("#codigo"),
  });
  this.actualizarCodigoQr();
  this.$refs.textareaContenido.focus();
},

El método actualizarCodigoQr simplemente invoca al método set del código QR que, como lo dice el autor, hay que invocar cuando vamos a actualizar varias propiedades:

actualizarCodigoQr() {
  this.qr.set({
    value: this.detallesQr.value,
    foreground: this.detallesQr.foreground,
    background: this.detallesQr.background,
    size: this.detallesQr.size,
    backgroundAlpha: this.detallesQr.backgroundAlpha,
    level: this.detallesQr.level,
  });
},

Como puedes ver, tengo todos los detalles del código QR en la propiedad detallesQr, incluyendo el nivel de corrección, transparencia, etcétera.

Nota: recuerda que ya expliqué todo lo del QR en mi otro post.

Los colores

Como ya expliqué en el post del selector de color, cada que el color cambia se invocan a estas funciones que cambian la propiedad y luego invocan al método que refresca el código QR. Los selectores se ven así:

<b-field label="Color del código">
  <SeleccionadorColor
    @input="onColorCambiado"
    :value="colores"
  ></SeleccionadorColor>
</b-field>

<b-field label="Color de fondo">
  <SeleccionadorColor
    @input="onColorDeFondoCambiado"
    :value="coloresFondo"
  ></SeleccionadorColor>
</b-field>

Y las funciones así:

onColorCambiado(nuevoColor) {
  this.detallesQr.foreground = nuevoColor.hex;
  this.actualizarCodigoQr();
},
onColorDeFondoCambiado(nuevoColor) {
  this.detallesQr.background = nuevoColor.hex;
  this.actualizarCodigoQr();
},

Descargar QR

Para descargar el código apliqué el mismo truco de crear un enlace, colocar el atributo download y luego hacer clic en él de manera programada. El código queda así:

    descargar() {
      const a = document.createElement("a");
      a.href = document.querySelector("#codigo").src;
      a.download = "Código QR.png";
      a.click();
    }

Poniendo todo junto

Te dejo de nuevo el enlace para acceder al generador de códigos QR en línea. Si quieres el código fuente completo te lo voy a dejar en mi GitHub.

Por aquí te dejo enlaces para leer más sobre Vue y JavaScript en mi blog.