Générateur de QR codes en TypeScript : qrcode.js

Générateur de QR codes en TypeScript : qrcode.js et qrcode-generator

\n\n

Les QR codes sont devenus une partie intégrante du web moderne : des liens vers des sites web et mots de passe Wi-Fi aux coordonnées et informations de paiement. Dans l'écosystème TypeScript, il existe plusieurs bibliothèques matures permettant de générer des QR codes à la fois côté client (navigateur) et côté serveur (Node.js). Dans cet article, nous allons détailler les deux plus populaires : qrcode (qrcode.js) et qrcode-generator, et montrer comment les intégrer dans un projet TypeScript.

\n\n

1. qrcode (qrcode.js) — une bibliothèque universelle

\n\n

La bibliothèque qrcode (package npm : qrcode) est la norme de facto pour la génération de QR codes. Elle prend en charge la sortie sous forme de canvas, SVG, chaîne Data URI ou texte simple. Grâce au typage TypeScript (types intégrés ou @types/qrcode), le développement devient sûr et pratique.

\n\n

Installation

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

\n\n

Exemple de base : génération d'un QR code dans un canvas (navigateur)

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('Erreur de génération :', error);\n  else console.log('QR code créé !');\n});

\n\n

Génération en SVG (pour le rendu serveur)

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); // Code SVG prêt

\n\n

Paramètres de configuration

width — largeur du QR code en pixels (par défaut 256).
margin — marge depuis le bord (en modules, par défaut 4).
color.dark / color.light — couleurs des modules et du fond.
errorCorrectionLevel — niveau de correction d'erreurs : 'L' (7%), 'M' (15%), 'Q' (25%), 'H' (30%).
type — format de sortie : 'png', 'svg', 'utf8'.

\n\n

2. qrcode-generator — une alternative légère

\n\n

La bibliothèque qrcode-generator (package npm : qrcode-generator) propose une API minimaliste et ne nécessite aucune dépendance. Elle est idéale si vous avez simplement besoin d'obtenir une matrice de QR code ou de le générer dans un format personnalisé.

\n\n

Installation

npm install qrcode-generator

\n\n

Exemple : création et rendu sur canvas

import QRCode from 'qrcode-generator';\n\nconst qr = QRCode(0, 'M'); // type (0 = auto) et niveau de correction\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

Obtention d'une représentation textuelle (pour le débogage)

const qr = QRCode(0, 'M');\nqr.addData('Hello TypeScript!');\nqr.make();\nconsole.log(qr.createASCII()); // Affiche le QR code dans la console avec des caractères

\n\n