Código QR con HTML y JS - Descargar como imagen
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.
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:
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í:
<!--Puedes descargar el script e incluirlo de manera local si así prefieres-->
<script src="https://unpkg.com/qrious@4.0.2/dist/qrious.js"></script>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">
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:
new QRious({
element: document.querySelector("#codigo"),
value: "https://parzibyte.me/blog", // La URL o el texto
size: 200,
backgroundAlpha: 0, // 0 para fondo transparente
foreground: "#8bc34a", // Color del QR
level: "H", // Puede ser L,M,Q y H (L es el de menor nivel, H el mayor)
});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.
El código completo queda así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Puedes descargar el script e incluirlo de manera local si así prefieres-->
<script src="https://unpkg.com/qrious@4.0.2/dist/qrious.js"></script>
<title>Generar códigos QR - By Parzibyte</title>
</head>
<body>
<img alt="Código QR" id="codigo">
<script>
new QRious({
element: document.querySelector("#codigo"),
value: "https://parzibyte.me/blog", // La URL o el texto
size: 200,
backgroundAlpha: 0, // 0 para fondo transparente
foreground: "#8bc34a", // Color del QR
level: "H", // Puede ser L,M,Q y H (L es el de menor nivel, H el mayor)
});
</script>
</body>
</html>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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Puedes descargar el script e incluirlo de manera local si así prefieres-->
<script src="https://unpkg.com/qrious@4.0.2/dist/qrious.js"></script>
<title>Generar códigos QR - By Parzibyte</title>
</head>
<body>
<h1>Generando códigos QR desde parzibyte.me</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br>
<img alt="Código QR" id="codigo">
<br>
<button id="btnDescargar">Descargar</button>
<script>
const $imagen = document.querySelector("#codigo"),
$boton = document.querySelector("#btnDescargar");
new QRious({
element: $imagen,
value: "https://parzibyte.me/blog", // La URL o el texto
size: 500,
backgroundAlpha: 0, // 0 para fondo transparente
foreground: "#8bc34a", // Color del QR
level: "H", // Puede ser L,M,Q y H (L es el de menor nivel, H el mayor)
});
$boton.onclick = () => {
const enlace = document.createElement("a");
enlace.href = $imagen.src;
enlace.download = "Código QR generado desde parzibyte.me.png";
enlace.click();
}
</script>
</body>
</html>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.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.