QR-Code-Generator

Wer QR-Codes mit JavaScript erzeugen möchte, dem stehen eine ganze Reihe von Bibliotheken zur Verfügung.

Eine sehr interessante Wahl ist die QR Code Generator Library aus dem Project Nayuki, die es nicht nur für JavaScript (bzw. TypeScript), sondern auch für Java, Python, C++, C und Rust gibt.

Eine Anleitung erklärt Ihnen die Bedienung der Seiten in diesem Web-Auftritt, in den Einstellungen können Sie deren Verhalten anpassen.

Verwendung

Die "QR Code Generator Library" unterscheidet zwischen dem Erzeugen eines QR-Code-Musters und dessen Ausgabe - aus diesem Grunde hat man insbesondere bei der Ausgabe großen Spielraum und kann sich nach Herzenslust "austoben".

Erzeugen eines QR-Code-Musters

Ein QR-Code-Muster kann entweder direkt für den Inhalt eines String bzw. eines Byte Array oder für eine zuvor erstellte Liste von "Segmenten" erzeugt werden (letzteres wird hier jedoch nicht beschrieben).

"Nayuki" empfiehlt in seinen Beispielen folgende Deklaration als Abkürzung

  const QRC = qrcodegen.QrCode

Auf diese Weise lassen sich die wichtigsten Funktionen und Konstanten der Bibliothek einfacher erreichen.

Konstanten für die Fehlerkorrektur

Für die Fehlerkorrektur stehen folgende Levels zur Verfügung:

• QRC.Ecc.LOW - toleriert bis zu 7% Fehler im Datenbereich
• QRC.Ecc.MEDIUM - toleriert bis zu 15% Fehler im Datenbereich
• QRC.Ecc.QUARTILE - toleriert bis zu 25% Fehler im Datenbereich
• QRC.Ecc.HIGH - toleriert bis zu 30% Fehler im Datenbereich

QR-Code-Muster für den Inhalt eines String

Zusammen mit der eingangs genannten Abkürzung sieht das Erzeugen eines QR-Code-Musters für den Inhalt eines gegebenen String wie folgt aus:

  let QRC = qrcodegen.QrCode
  let QRCode = QRC.encodeText(Text,ECCLevel)

Darin ist

• Text - der Text, für dessen Inhalt (z.B. eine URL) der Code erzeugt werden soll
• ECCLevel - der niedrigste gewünschte Level für die Fehlerkorrektur (siehe oben)

Falls für die Fehlerkorrektur ein höheres Level erreicht werden kann, ohne den QR-Code dadurch größer werden zu lassen, wird dem höheren Level der Vorzug gegeben.

QR-Code-Muster für den Inhalt eines Byte Array

Zusammen mit der eingangs genannten Abkürzung sieht das Erzeugen eines QR-Code-Musters für den Inhalt eines gegebenen ArrayBuffer wie folgt aus:

  let QRC = qrcodegen.QrCode
  let QRCode = QRC.encodeBinary(${Buffer},${ECCLevel})

Darin ist

• Buffer - der ArrayBuffer, für dessen Inhalt der Code erzeugt werden soll
• ECCLevel - der niedrigste gewünschte Level für die Fehlerkorrektur (siehe oben)

Falls für die Fehlerkorrektur ein höheres Level erreicht werden kann, ohne den QR-Code dadurch größer werden zu lassen, wird dem höheren Level der Vorzug gegeben.

Ausgabe eines QR-Code-Musters

Das wie zuvor beschrieben erzeugte QR-Code-Muster kann nun auf verschiedene Weise ausgegeben werden: es kann

• direkt in ein HTML Canvas gezeichnet,
• als SVG-(Vektor-)Grafik ausgegeben oder
• Modul für Modul ("Pixel für Pixel") ausgelesen

werden - insbesondere die letztgenannte Variante eignet sich hervorragend für viele Formen der Weiterverarbeitung.

Zeichnen eines QR-Code-Musters in einem Canvas

Ein QR-Code-Muster namens QRCode kann wie folgt in ein (bereits existierendes) HTML Canvas gezeichnet werden:

  QRCode.drawCanvas(Scale,BorderWidth,CanvasElement)

Darin sind

• Scale - Breite und Höhe eines Modules in Pixel,
• BorderWidth - die Breite der "Ruhezone" um den eigentlichen QR-Code (gemessen in Vielfachen eines Modules),
• CanvasElement - das Canvas-Element, in welches gezeichnet werden soll,

Die Größe des Canvas wird so eingestellt, dass der QR-Code genau hineinpasst, die einzelnen Module sind entweder schwarz oder weiß und nicht durchscheinend.

Ausgabe eines QR-Code-Musters als SVG-Grafik

Ein QR-Code-Muster namens QRCode kann wie folgt als Vektorgrafik im SVG-Format ausgegeben werden:

  let SVGasString = QRCode.toSvgString(BorderWidth)

Darin ist

• BorderWidth - die Breite der "Ruhezone" um den eigentlichen QR-Code (gemessen in Vielfachen eines Modules)

Modulweises Auslesen eines QR-Code-Musters

Ein QR-Code-Muster kann jedoch auch Modul für Modul ausgelesen werden. Für ein Muster names QRCode geschieht dies wie folgt (hier in TypeScript-Notation dargestellt):

  for (let y:int = 0; y < QRCode.size; y++) {
    for (let x:int = 0; x < QRCode.size; x++) {
      let Module:boolean = QRCode.getModule(x,y)
      now do something with Module
    }
  }

Module mit dem Wert true werden normalerweise schwarz, solche mit dem Wert false weiß dargestellt.