Este script genera un código QR en base a la URL de la página sin depender de librerías de terceros como Shoelace o Google Charts API.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Código QR de la Página</title>
</head>
<body>
<h2>Escanea este código QR para compartir la página</h2>
<canvas id="qrCanvas"></canvas>
<script>
function generateQRCode(url) {
const canvas = document.getElementById("qrCanvas");
const ctx = canvas.getContext("2d");
// Tamaño del QR
const size = 256;
canvas.width = size;
canvas.height = size;
// Algoritmo de generación QR simplificado
function drawPixel(x, y, size, isBlack) {
ctx.fillStyle = isBlack ? "#000" : "#fff";
ctx.fillRect(x * size, y * size, size, size);
}
function generateMatrix(url) {
let data = new TextEncoder().encode(url);
let size = Math.ceil(Math.sqrt(data.length * 8)); // Aproximación de tamaño del QR
let matrix = Array.from({ length: size }, () => new Array(size).fill(0));
for (let i = 0; i < data.length; i++) {
let bits = data[i].toString(2).padStart(8, "0");
for (let j = 0; j < 8; j++) {
matrix[(i * 8 + j) % size][Math.floor((i * 8 + j) / size)] = bits[j] === "1" ? 1 : 0;
}
}
return matrix;
}
let qrMatrix = generateMatrix(url);
let cellSize = size / qrMatrix.length;
ctx.fillStyle = "#fff"; // Fondo blanco
ctx.fillRect(0, 0, size, size);
qrMatrix.forEach((row, y) => row.forEach((bit, x) => drawPixel(x, y, cellSize, bit)));
}
generateQRCode(window.location.href);
</script>
</body>
</html>Generación de Código QR sin Librerías Externas
Cómo Crear un Código QR en JavaScript sin Dependencias
La necesidad de compartir enlaces fácilmente mediante códigos QR ha llevado a muchas soluciones basadas en librerías externas. Sin embargo, en algunos casos, evitar dependencias adicionales puede ser beneficioso para el rendimiento y la autonomía del código.
A continuación, se explica cómo generar un código QR del enlace actual usando únicamente JavaScript y Canvas.
¿Cómo Funciona?
El código anterior sigue estos pasos:
- Captura la URL actual con
window.location.href. - Crea un lienzo HTML
<canvas>para dibujar el código QR. - Genera una matriz QR simple basada en los bits binarios de la URL.
- Dibuja el QR en el lienzo usando píxeles blancos y negros.
¿Por Qué Evitar Librerías Externas?
- Mayor independencia: No se depende de librerías de terceros que pueden quedar desactualizadas o requerir una conexión externa.
- Mejor rendimiento: Al no importar código adicional, la carga de la página es más rápida.
- Mayor control sobre el diseño: Permite personalizar el tamaño, colores y estilo del QR sin restricciones.
Posibles Mejoras
Si bien este método es básico y funcional, se pueden agregar mejoras como:
- Aumentar la robustez de la matriz para una mejor representación del QR.
- Optimizar el algoritmo para codificar mejor los datos.
- Permitir la descarga del código QR como imagen.
Conclusión
Este enfoque demuestra que no es necesario depender de librerías externas para generar un código QR funcional. Con unos pocos pasos en JavaScript, es posible crear una solución ligera, personalizable y eficiente para compartir enlaces de una página web.
Este método es ideal para desarrolladores que buscan optimizar sus proyectos y reducir dependencias innecesarias.
