Generador de códigos QR en TypeScript: biblioteca qrcode |…

Generador de códigos QR en TypeScript: la biblioteca qrcode y su uso

Los códigos QR se han convertido en una parte esencial de la web moderna y las aplicaciones móviles. Se utilizan para la transmisión rápida de enlaces, datos de contacto, texto, contraseñas de Wi-Fi y mucho más. En el ecosistema de TypeScript y JavaScript, existe una biblioteca potente y fácil de usar llamada qrcode, que permite generar códigos QR directamente en el navegador o en el servidor (Node.js). En este artículo, analizaremos en detalle cómo instalar, configurar y usar esta biblioteca para crear códigos QR en TypeScript.

¿Qué es la biblioteca qrcode?

La biblioteca qrcode es un paquete npm popular, escrito en JavaScript y totalmente compatible con TypeScript. Permite generar códigos QR en varios formatos: como cadena de datos, como SVG, como Canvas (para el navegador) o como imagen PNG (para Node.js). Las principales ventajas son:

Soporte para todas las versiones de códigos QR (del 1 al 40).
Corrección de errores configurable (L, M, Q, H).
Funciona tanto en el navegador como en el entorno Node.js.
Soporte completo para TypeScript: los tipos están incluidos en el paquete.
API simple e intuitiva.

Instalación

Para empezar, instale el paquete a través de npm o yarn:

npm install qrcode

yarn add qrcode

Si usa TypeScript, no se requieren tipos adicionales, ya que están integrados en el paquete.

Ejemplo básico: generación de un código QR como cadena

La forma más sencilla de obtener un código QR es generarlo como una cadena con datos (por ejemplo, una URL). Para ello, se utiliza el método toString:

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'terminal' }, (err, string) => {  if (err) throw err;  console.log(string);});

En este ejemplo, el código QR se muestra en la consola como arte ASCII. Esto es útil para depuración o demostración.

Generación de un código QR como SVG (para la web)

Para insertar un código QR en una página web, el mejor formato es SVG: se escala sin pérdida de calidad y se puede estilizar fácilmente con CSS.

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'svg' }, (err, svgString) => {  if (err) throw err;  // Inserte svgString en el DOM, por ejemplo a través de innerHTML  document.getElementById('qrcode-container').innerHTML = svgString;});

También puede usar promesas en lugar de callbacks:

import QRCode from 'qrcode';

async function generateQR() {  const svgString = await QRCode.toString('https://pythonlib.ru', { type: 'svg' });  document.getElementById('qrcode-container').innerHTML = svgString;}

generateQR();

Generación de un código QR como Canvas (para el navegador)

Si necesita incrustar un código QR en un elemento canvas (por ejemplo, para procesamiento o descarga posterior), use el método toCanvas:

import QRCode from 'qrcode';

const canvas = document.getElementById('canvas') as HTMLCanvasElement;

QRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 400 }, (err) => {  if (err) throw err;  console.log('Código QR renderizado exitosamente en canvas');});

El parámetro width define el ancho del canvas (la altura se calcula automáticamente).

Generación de un código QR como PNG (para Node.js)

Para la generación del lado del servidor (por ejemplo, para guardar la imagen en el disco), use toFile:

import QRCode from 'qrcode';

QRCode.toFile('./qrcode.png', 'https://pythonlib.ru', {  color: {    dark: '#000000',    light: '#ffffff'  }}, (err) => {  if (err) throw err;  console.log('Código QR guardado como qrcode.png');});

También puede configurar el color de los módulos y el fondo, el tamaño, el nivel