Desde hace algún tiempo tengo publicada una aplicación para generar códigos QR que no te obliga a usar ningún servicio de internet. Al crear un QR con mi aplicación vas a poder tener un QR por todo el tiempo del mundo sin tener que suscribirte a algún servicio o con la probabilidad de que dicho servicio desaparezca.
Los QR creados con mi generador son totalmente offline, es decir, llevan el contenido directamente en el QR, y este contenido puede ser una página web, página de facebook, número de teléfono, etcétera.
El generador de QR es muy simple y rápido, ningún dato es enviado al servidor y te permite personalizar los datos más importantes del QR como lo son el contenido, colores, calidad y formato de exportación.
No hay límite en la cantidad de códigos QR que puedes crear.
La aplicación de la que hablo está publicada en mi página de apps gratuitas. https://parzibyte.me/apps/generador-qr/
¿Por qué actualizar?
En estos días que he estado migrando mi blog también revisé mis aplicaciones publicadas y entre ellas está el generador de códigos QR pero algo que no me gustó y que apenas noté es que, por defecto, la aplicación no elige el color blanco de fondo y el negro para el QR, el usuario siempre tenía que cambiarlos, y si no lo hacía, el fondo transparente hacía que el QR se viera distinto.
Así que cloné el repositorio pero al intentar hacer un cambio tuve algunos problemas con las versiones de Node y NPM. Para evitar estarme complicando con dichas versiones decidí volver a crear el generador, quitando a su vez la dependencia de Vue 2 que ya no tiene soporte.
La versión anterior del generador no era mala; funcionaba muy bien pero no ofrecía buenos valores por defecto, y como lo dije, no quise perder más tiempo peleando con Node y NPM.
Nueva versión del generador de códigos QR
La versión anterior usaba Buefy con Vue y la librería QRious de neocotic. Estaba bien, pero podría hacerse todavía más ligera quitando los componentes de color y el framework Vue 2 en sí.
Esta nueva versión sigue usando QRious pero sin Buefy ni Vue; es con JavaScript puro, pues realmente no es obligatorio usar algún framework para estos casos y al hacerlo de este modo se asegura una compatibilidad en el futuro.
Todo funciona igual, lo único distinto es que ahora se selecciona el color usando un input
de tipo color que es un campo nativo en lugar de alguna librería o componente adicional, y que también se da a elegir
el formato de descarga del QR que puede ser PNG, JPG, WEBP y AVIF.
Todo es más ligero
Ya no estoy importando todo el JavaScript y CSS que tenía Buefy, ahora solo coloco las clases necesarias de TailwindCSS.
Repito que el framework anterior no tenía nada de malo, pero siento que era mucho framework y estilo para una aplicación tan simple.
Código fuente
El código es muy limpio y simple. Como QRious permite actualizar el mismo código QR decidí tenerlo en una variable global:
const $canvas = document.querySelector("#canvas");
let apuntadorGlobalAQr = new QRious({
element: $canvas,
});
Y cuando cualquier opción como el tamaño, contenido, color o calidad cambian, lo actualizo con la siguiente función:
const refrescarQr = () => {
apuntadorGlobalAQr.set({
value: $contenido.value,
background: $colorFondo.value,
foreground: $colorFrente.value,
level: $nivelRecuperacion.value,
size: $tamaño.valueAsNumber,
});
}
Al invocar a set el QR muestra los nuevos cambios. Ahora solo resta invocar a la
función que refresca el QR en el evento input de los elementos del DOM, ya sea el contenido,
color, calidad, etcétera. Lo hago así:
[$contenido, $colorFondo, $colorFrente, $nivelRecuperacion, $tamaño].forEach(elemento => elemento.oninput = refrescarQr);
Que sería lo mismo que hacer un:
$contenido.oninput = refrescarQr;
O:
$contenido.oninput = ()=>{
refrescarQr();
}
El resto del código es para descargar el QR usando la función
que el autor provee: toDataURL que es en donde se indica
el formato deseado para la salida.
$descargar.onclick = () => {
const formato = $formatoSalida.value;
let extension = "";
if (formato === "image/jpeg") {
extension = "jpg";
} else {
extension = formato.substring(formato.indexOf("/") + 1)
}
const contenidoCanvasComoBase64 = apuntadorGlobalAQr.toDataURL(formato);
const enlace = document.createElement('a');
enlace.download = "Qr." + extension;
enlace.href = contenidoCanvasComoBase64;
enlace.click();
}
Todo el código es explorable en GitHub y puedes probar la app en el mismo lugar de antes: Generador de códigos QR offline
El código fuente de la versión anterior todavía es explorable por si lo quieres revisar: https://github.com/parzibyte/generador-qr