TypeScript QR-Code-Generator: Bibliothek qrcode

TypeScript QR-Code-Generator: Bibliothek qrcode und ihre Verwendung

QR-Codes sind zu einem festen Bestandteil des modernen Webs und mobiler Anwendungen geworden. Sie werden verwendet, um schnell Links, Kontaktdaten, Text, WLAN-Passwörter und vieles mehr zu übertragen. Im TypeScript- und JavaScript-Ökosystem gibt es eine leistungsstarke und einfach zu verwendende Bibliothek namens qrcode, mit der QR-Codes direkt im Browser oder auf dem Server (Node.js) generiert werden können. In diesem Artikel werden wir im Detail besprechen, wie man diese Bibliothek installiert, konfiguriert und verwendet, um QR-Codes in TypeScript zu erstellen.

Was ist die Bibliothek qrcode?

Die Bibliothek qrcode ist ein beliebtes npm-Paket, das in JavaScript geschrieben und vollständig mit TypeScript kompatibel ist. Sie ermöglicht die Generierung von QR-Codes in verschiedenen Formaten: als Datenstring, als SVG, als Canvas (für den Browser) oder als PNG-Bild (für Node.js). Die Hauptvorteile sind:

Unterstützung aller QR-Code-Versionen (1 bis 40).
Anpassbare Fehlerkorrektur (L, M, Q, H).
Funktioniert sowohl im Browser als auch in der Node.js-Umgebung.
Vollständige TypeScript-Unterstützung – Typen sind im Paket enthalten.
Einfache und intuitive API.

Installation

Um zu beginnen, installieren Sie das Paket über npm oder yarn:

npm install qrcode

oder

yarn add qrcode

Wenn Sie TypeScript verwenden, sind keine zusätzlichen Typen erforderlich – sie sind bereits im Paket enthalten.

Basisbeispiel: QR-Code als String generieren

Der einfachste Weg, einen QR-Code zu erhalten, ist die Generierung als String mit Daten (z. B. einer URL). Dazu wird die Methode toString verwendet:

import QRCode from 'qrcode';

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

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

In diesem Beispiel wird der QR-Code als ASCII-Art in der Konsole ausgegeben. Dies ist praktisch zum Debuggen oder für Demonstrationen.

QR-Code als SVG generieren (für das Web)

Zum Einfügen eines QR-Codes in eine Webseite eignet sich das SVG-Format am besten – es ist verlustfrei skalierbar und leicht über CSS gestaltbar.

import QRCode from 'qrcode';

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

QRCode.toString(data, { type: 'svg' }, (err, svgString) => {  if (err) throw err;  // Fügen Sie svgString in das DOM ein, z. B. über innerHTML  document.getElementById('qrcode-container').innerHTML = svgString;});

Sie können auch Promises anstelle von Callbacks verwenden:

import QRCode from 'qrcode';

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

generateQR();

QR-Code als Canvas generieren (für den Browser)

Wenn Sie den QR-Code in ein Canvas-Element einbetten müssen (z. B. zur weiteren Verarbeitung oder zum Herunterladen), verwenden Sie die Methode 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('QR-Code erfolgreich auf Canvas gezeichnet');});

Der Parameter width gibt die Breite des Canvas an (die Höhe wird automatisch berechnet).

QR-Code als PNG generieren (für Node.js)

Für die serverseitige Generierung (z. B. um das Bild auf der Festplatte zu speichern) verwenden Sie toFile:

import QRCode from 'qrcode';

QRCode.toFile('./qrcode.png', 'https://pythonlib.ru', {  color: {    dark: '#000000',    light: '#ffffff'  }}, (err) => {  if (err) throw err;  console.log('QR-Code als qrcode.png gespeichert');});

Sie können auch die Farbe der Module und des Hintergrunds, die Größe und den