QR Code Generator

Installation

> npm install @liquid-js/qrcode-generator

Usage

@liquid-js/qrcode-generator provides two classes: QRCodeMinimal, and QRCode which adds the functionality to output the code as ASCII characters, a data url, img tag, svg, html table, or draw it to a canvas.

import { QRCode } from '@liquid-js/qrcode-generator/lib/qrcode/QRCode.js'

const qr = new QRCode()

/**
 * Add data
 *
 * A QR code can contain multiple pieces of data, each with its own mode / encoding,
 * though some Scaners only display the first piece of data.
 */
qr.addData(
    'http://example.com/',
    'byte'  // mode: numeric, alphanumeric, byte (default), kanji*, unicode*
)

// Build the QR code after adding all the data
qr.make()

// Code as ASCII characters
console.log(qr.createASCII(
    2,  // 2 termainal cells per block
    4   // 4 cells of margin
))

// Get a data URL and open it in a new window
window.open(qr.toDataURL(
    10, // Each block will be 10 by 10 pixels
    20  // 20 pixels of margin around the code
))

// Show QR code in HTML as image
document.getElementById('container')!.innerHTML = qr.createImgTag(
    10, // Each block will be 10 by 10 pixels
    20, // 20 pixels of margin around the code
    'Scan the QR code' // alt tag value
)

// Show QR code as SVG
document.getElementById('container')!.innerHTML = qr.createSvgTag({
    cellSize: 10,   // Each block will be 10 by 10 pixels
    margin: 20,     // 20 pixels of margin around the code
    title: {
        text: 'Visit my website'    // Show a title above the QR code
    },
    alt: {
        text: 'Scan the QR code'   // Show description above the QR code
    }
})

// Show QR code as HTML table (e.g. for emails or other places with only basic HTML support)
document.getElementById('container')!.innerHTML = qr.createTableTag(
    10, // Each block will be 10 by 10 pixels
    20  // 20 pixels of margin around the code
)

// Render QR code on a canvas
qr.renderTo2dContext(
    document.querySelector<HTMLCanvasElement>('canvas#container')!.getContext('2d')!,
    10  // Each block will be 10 by 10 pixels
)

* Unicode and kanji support

Most data, including numbers, IDs, URLs / links, binary / encoded data, and (english) text, can be directly encoded in the QR. For data containing kanji, special symbols, letters, or non-ASCII characters, QR Code Generator provides the encoding functions which have to be loaded before generating the QR codes.

import { QRCode } from '@liquid-js/qrcode-generator/lib/qrcode/QRCode.js'
import { stringToBytes_SJIS } from '@liquid-js/qrcode-generator/lib/text/stringToBytes_SJIS.js'
import { stringToBytes_UTF8 } from '@liquid-js/qrcode-generator/lib/text/stringToBytes_UTF8.js'

QRCode.stringToBytesFuncs = {
    ...QRCode.stringToBytesFuncs,   // default encodings
    ...stringToBytes_SJIS,  // For kanji support
    ...stringToBytes_UTF8   // For unicode support
}

const qr = new QRCode()

// Kanji data
qr.addData('漢字', 'kanji')

// Unicode data
qr.addData('𝒰𝓃𝒾𝒸ℴ𝒹ℯ 𝒯ℯ𝓍𝓉', 'unicode')

qr.make()

Render the code yourself

Above example presents different ways to display a standard square black-and-white QR code, either in HTML or in a Node.js terminal. While this is useful if you want to simply show a QR code, it offers only the basic control of the appearance and customization. To customize the appearance and rendering of the generated QR code, you can implement a custom render function.

import { QRCodeMinimal } from '@liquid-js/qrcode-generator/lib/qrcode/QRCodeMinimal.js'

/**
 * Render QR code as round dots on a canvas
 */
function renderDots(
    code: QRCodeMinimal,
    canvas: HTMLCanvasElement,
    {
        size = 10,
        color = 'red'
    }
) {
    // Get number of rows and columns
    const moduleCount = code.getModuleCount()

    // Set canvas size
    canvas.width = canvas.height = moduleCount * size

    // Configure rendering context
    const ctx = canvas.getContext('2d')!
    ctx.fillStyle = color // Set color

    // Iterate over rows and columns
    for (let row = 0; row < moduleCount; row++) {
        for (let column = 0; column < moduleCount; column++) {
            // If the current position is dark, draw a dot
            if (code.isDark(row, column)) {
                const cx = row * size + size / 2
                const cy = column * size + size / 2
                ctx.arc(cx, cy, size / 2, 0, 2 * Math.PI)
                ctx.fill()
            }
        }
    }
}

// Use QRCodeMinimal to reduce bundle size, since rendering methods won't be needed
const qr = new QRCodeMinimal()

qr.addData('http://example.com/')

renderDots(
    qr,
    document.querySelector<HTMLCanvasElement>('canvas#container')!,
    {
        size: 20,
        color: 'blue'
    }
)