TypeScript QR-Code-Generator: qrcode.js

TypeScript QR-Code-Generator: qrcode.js und qrcode-generator

\n\n

QR-Codes sind zu einem festen Bestandteil des modernen Webs geworden: von Links zu Websites und WLAN-Passwörtern bis hin zu Kontaktdaten und Zahlungsinformationen. Im TypeScript-Ökosystem gibt es mehrere ausgereifte Bibliotheken, die die Generierung von QR-Codes sowohl clientseitig (im Browser) als auch serverseitig (Node.js) ermöglichen. In diesem Artikel werden wir die beiden beliebtesten im Detail betrachten: qrcode (qrcode.js) und qrcode-generator, und zeigen, wie man sie in ein TypeScript-Projekt integriert.

\n\n

1. qrcode (qrcode.js) — eine universelle Bibliothek

\n\n

Die Bibliothek qrcode (npm-Paket: qrcode) ist der De-facto-Standard für die QR-Code-Generierung. Sie unterstützt die Ausgabe als Canvas, SVG, Data-URI-String oder einfachen Text. Dank der TypeScript-Typisierung (integrierte Typen oder @types/qrcode) wird die Entwicklung sicher und komfortabel.

\n\n

Installation

npm install qrcode\nnpm install --save-dev @types/qrcode  # für TypeScript

\n\n

Basisbeispiel: QR-Code-Generierung im Canvas (Browser)

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('Fehler bei der Generierung:', error);\n  else console.log('QR-Code erstellt!');\n});

\n\n

Generierung als SVG (für serverseitiges Rendering)

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); // Fertiger SVG-Code

\n\n

Konfigurationsparameter

width — Breite des QR-Codes in Pixeln (Standard: 256).
margin — Randabstand (in Modulen, Standard: 4).
color.dark / color.light — Farben der Module und des Hintergrunds.
errorCorrectionLevel — Fehlerkorrekturstufe: 'L' (7%), 'M' (15%), 'Q' (25%), 'H' (30%).
type — Ausgabeformat: 'png', 'svg', 'utf8'.

\n\n

2. qrcode-generator — eine leichte Alternative

\n\n

Die Bibliothek qrcode-generator (npm-Paket: qrcode-generator) bietet eine minimalistische API und benötigt keine Abhängigkeiten. Sie ist ideal, wenn Sie lediglich eine QR-Code-Matrix erhalten oder einen QR-Code in einem benutzerdefinierten Format generieren möchten.

\n\n

Installation

npm install qrcode-generator

\n\n

Beispiel: Erstellung und Zeichnung auf einem Canvas

import QRCode from 'qrcode-generator';\n\nconst qr = QRCode(0, 'M'); // Typ (0 = auto) und Korrekturstufe\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

Textdarstellung erhalten (für Debugging)

const qr = QRCode(0, 'M');\nqr.addData('Hallo TypeScript!');\nqr.make();\nconsole.log(qr.createASCII()); // Gibt den QR-Code als Zeichen in der Konsole aus

\n\n