Gerador de QR Codes em TypeScript: qrcode.js e qrcode-generator

Gerador de QR Codes em TypeScript: qrcode.js e qrcode-generator

Os QR Codes se tornaram uma parte essencial da web moderna: desde links para sites e senhas de Wi-Fi até dados de contato e informações de pagamento. No ecossistema TypeScript, existem várias bibliotecas maduras que permitem gerar QR Codes tanto no lado do cliente (navegador) quanto no servidor (Node.js). Neste artigo, analisaremos detalhadamente as duas mais populares: qrcode (qrcode.js) e qrcode-generator, além de mostrar como integrá-las em um projeto TypeScript.

1. qrcode (qrcode.js) — biblioteca universal

A biblioteca qrcode (pacote npm: qrcode) é o padrão de facto para geração de QR Codes. Ela suporta a saída do resultado em formato canvas, SVG, string Data URI ou texto simples. Graças à tipagem TypeScript (tipos integrados ou @types/qrcode), o desenvolvimento se torna seguro e conveniente.

Instalação

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

Exemplo básico: geração de QR Code em 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('Erro de geração:', error);\n  else console.log('QR Code criado!');\n});

Geração em SVG (para renderização no 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 pronto

Parâmetros de configuração

\n
• width — largura do QR Code em pixels (padrão 256).
\n
• margin — margem da borda (em módulos, padrão 4).
\n
• color.dark / color.light — cores dos módulos e do fundo.
\n
• errorCorrectionLevel — nível de correção de erros: 'L' (7%), 'M' (15%), 'Q' (25%), 'H' (30%).
\n
• type — formato de saída: 'png', 'svg', 'utf8'.
\n

2. qrcode-generator — alternativa leve

A biblioteca qrcode-generator (pacote npm: qrcode-generator) oferece uma API minimalista e não requer dependências. Ela é ideal se você precisa apenas obter uma matriz de QR Code ou gerá-lo em um formato personalizado.

Instalação

npm install qrcode-generator

Exemplo: criação e renderização em canvas

import QRCode from 'qrcode-generator';\n\nconst qr = QRCode(0, 'M'); // tipo (0 = auto) e nível de correção\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}

Obtendo representação textual (para depuração)

const qr = QRCode(0, 'M');\nqr.addData('Hello TypeScript!');\nqr.make();\nconsole.log(qr.createASCII()); // Exibe o QR Code no console com caracteres

3. Comparação das bibliotecas

Também na biblioteca

Cliente Elasticsearch para Rust: visão geral da biblioteca elasticsearch-rs Agendador de Tarefas PHP Cliente HTTP para Rust: visão geral das melhores bibliotecas (reqwest, ureq, hyper) Stripe para JavaScript (Node.js): guia completo com exemplos Trabalhando com arquivos ZIP em PHP: ZipArchive e bibliotecas de compressão

Recommendations

Registro de Logs para PHP (Monolog)

Event Bus e o padrão Observer em TypeScript: Implementação e exemplos

Autorização e Autenticação em Go: pacotes e exemplos práticos

nock para TypeScript: guia completo com exemplos práticos