Generador de códigos QR en TypeScript: qrcode.js

Generador de códigos QR en TypeScript: qrcode.js y qrcode-generator

\n\n

Los códigos QR se han convertido en una parte esencial de la web moderna: desde enlaces a sitios web y contraseñas de Wi-Fi hasta datos de contacto y datos de pago. En el ecosistema de TypeScript, existen varias bibliotecas maduras que permiten generar códigos QR tanto del lado del cliente (navegador) como del servidor (Node.js). En este artículo, analizaremos en detalle las dos más populares: qrcode (qrcode.js) y qrcode-generator, y mostraremos cómo integrarlas en un proyecto TypeScript.

\n\n

1. qrcode (qrcode.js) — biblioteca universal

\n\n

La biblioteca qrcode (paquete npm: qrcode) es el estándar de facto para la generación de códigos QR. Admite la salida del resultado en forma de canvas, SVG, cadena Data URI o texto simple. Gracias a la tipificación de TypeScript (tipos integrados o @types/qrcode), el desarrollo se vuelve seguro y conveniente.

\n\n

Instalación

npm install qrcode\nnpm install --save-dev @types/qrcode  # para TypeScript

\n\n

Ejemplo básico: generación de código QR en canvas (navegador)

import QRCode from 'qrcode';\n\nconst canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;\n\nQRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 300 }, (error) => {\n  if (error) console.error('Error de generación:', error);\n  else console.log('¡Código QR creado!');\n});

\n\n

Generación en SVG (para renderizado del lado del servidor)

import QRCode from 'qrcode';\n\nconst svgString = await QRCode.toString('https://pythonlib.ru', {\n  type: 'svg',\n  color: { dark: '#1a1a2e', light: '#eaeaea' }\n});\nconsole.log(svgString); // Código SVG listo

\n\n

Parámetros de configuración

width — ancho del código QR en píxeles (por defecto 256).
margin — margen desde el borde (en módulos, por defecto 4).
color.dark / color.light — colores de los módulos y del fondo.
errorCorrectionLevel — nivel de corrección de errores: 'L' (7%), 'M' (15%), 'Q' (25%), 'H' (30%).
type — formato de salida: 'png', 'svg', 'utf8'.

\n\n

2. qrcode-generator — alternativa ligera

\n\n

La biblioteca qrcode-generator (paquete npm: qrcode-generator) ofrece una API minimalista y no requiere dependencias. Es ideal si solo necesita obtener una matriz de código QR o generarlo en un formato personalizado.

\n\n

Instalación

npm install qrcode-generator

\n\n

Ejemplo: creación y dibujo en canvas

import QRCode from 'qrcode-generator';\n\nconst qr = QRCode(0, 'M'); // tipo (0 = auto) y nivel de corrección\nqr.addData('https://pythonlib.ru');\nqr.make();\n\nconst canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;\nconst ctx = canvas.getContext('2d')!;\nconst size = qr.getModuleCount();\nconst cellSize = 10;\ncanvas.width = size * cellSize;\ncanvas.height = size * cellSize;\n\nfor (let row = 0; row < size; row++) {\n  for (let col = 0; col < size; col++) {\n    ctx.fillStyle = qr.isDark(row, col) ? '#000' : '#fff';\n    ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);\n  }\n}

\n\n

Obtención de representación de texto (para depuración)

const qr = QRCode(0, 'M');\nqr.addData('Hello TypeScript!');\nqr.make();\nconsole.log(qr.createASCII()); // Mostrará el código QR en la consola con caracteres

\n\n