QR-Code Generator

If you want to generate QR codes with JavaScript, there are a whole range of libraries available.

A very interesting choice is the QR Code Generator Library from the Project Nayuki, which is not only available for JavaScript (or TypeScript), but also for Java, Python, C++, C and Rust.

A guide explains how to use the pages in this website, their behaviour may be adjusted in the settings.

Use

The "QR Code Generator Library" distinguishes between the generation of a QR code pattern and its output - for this reason, you have a lot of leeway, especially with the output, and can "let off steam" to your heart's content.

Creating a QR Code Pattern

A QR code pattern can be created either directly for the content of a string or a byte array or for a previously created list of "segments" (the latter, however, is not described here).

"Nayuki" recommends in his examples the following declaration as a shortcut

  const QRC = qrcodegen.QrCode

This way, the most important functions and constants of the library can be reached more easily.

Constants for Error Correction

The following levels are available for error correction:

• QRC.Ecc.LOW - tolerates up to 7% errors in the data area.
• QRC.Ecc.MEDIUM - tolerates up to 15% errors in the data area
• QRC.Ecc.QUARTILE - tolerates up to 25% error in data range
• QRC.Ecc.HIGH - tolerates up to 30% errors in the data range

QR Code Pattern for the Content of a String

Together with the abbreviation mentioned at the beginning, generating a QR code pattern for the content of a given string looks like this:

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

In this

• Text - refers to the text for whose content (e.g. a URL) the code is to be generated
• ECCLevel - refers to the lowest desired level for error correction (see above).

If a higher error correction level can be achieved without increasing the size of the QR code, the higher level is preferred.

QR Code Pattern for the Content of a Byte Array

Together with the abbreviation mentioned at the beginning, generating a QR code pattern for the content of a given ArrayBuffer looks like this:

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

In this

• Buffer - refers to the ArrayBuffer for whose contents the code is to be generated
• ECCLevel - refers to the lowest desired level for error correction (see above).

If a higher error correction level can be achieved without increasing the size of the QR code, the higher level is preferred.

Output of a QR Code Pattern

The QR code pattern created as described above can now be output in various ways: it can be

• drawn directly into an HTML canvas
• output as an SVG (vector) graphic or
• read out module by module ("pixel by pixel").

The latter variant in particular is ideal for many forms of further processing.

Drawing a QR Code Pattern in a Canvas

A QR code pattern called QRCode can be drawn in an (existing) HTML canvas as follows:

  QRCode.drawCanvas(Scale,BorderWidth,CanvasElement)

In this

• Scale - refers to width and height of a module in pixels,
• BorderWidth - refers to the width of the "quiet zone" around the actual QR code (measured in multiples of a module),
• CanvasElement - refers to the canvas element into which to draw,

The size of the canvas is set so that the QR code fits exactly inside it, the individual modules are either black or white and not translucent.

Output of a QR Code Pattern as an SVG Graphic

A QR code pattern called QRCode can be output as a vector graphic in SVG format as follows:

  let SVGasString = QRCode.toSvgString(BorderWidth)

In this

• BorderWidth - refers to the width of the "quiet zone" around the actual QR code (measured in multiples of a module)

Reading a QR Code Pattern Module by Module

However, a QR code pattern can also be read module by module. For a pattern called QRCode this is done as follows (shown here in TypeScript notation):

  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
    }
  }

Modules with the value true are normally shown in black, those with the value false in white.