jQuery.qrcode

generate QR codes dynamically

licenseMITgithublrsjng/jquery-qrcodebowerlrsjng/jquery-qrcode
0.11.0

jQuery.qrcode enables you to dynamically add QR codes to your website. Choose between rendering the code in a canvas or with divs. The latter will be fine even for older browser. The generated QR code will be in the least possible version requiered to encode the content (least number of blocks).

See the demo to get a first impression. This plugin is used in h5ai to generate QR codes for file entries. It is a wrapper for the more generic QR Code Generator (MIT).

Usage

The syntax is very simple. Just use

$(selector).qrcode(options);

to append a new generated HTML element representing the QR code to the selected elements. If the selected element already is a canvas element, then the QR code is drawn onto it.

Options

The available options and their default values are:

{
    // render method: 'canvas', 'image' or 'div'
    render: 'canvas',

    // version range somewhere in 1 .. 40
    minVersion: 1,
    maxVersion: 40,

    // error correction level: 'L', 'M', 'Q' or 'H'
    ecLevel: 'L',

    // offset in pixel if drawn onto existing canvas
    left: 0,
    top: 0,

    // size in pixel
    size: 200,

    // code color or image element
    fill: '#000',

    // background color or image element, null for transparent background
    background: null,

    // content
    text: 'no text',

    // corner radius relative to module width: 0.0 .. 0.5
    radius: 0,

    // quiet zone in modules
    quiet: 0,

    // modes
    // 0: normal
    // 1: label strip
    // 2: label box
    // 3: image strip
    // 4: image box
    mode: 0,

    mSize: 0.1,
    mPosX: 0.5,
    mPosY: 0.5,

    label: 'no label',
    fontname: 'sans',
    fontcolor: '#000',

    image: null
}

Examples

Default values

Doesn't make much sense, since it encodes the text: 'no text'

Customized

Some values changed

Same as above but rendered as div. The size of QR code might be slightly smaller than the desired size to make it pixel perfect. In this case it will be centered inside a container element with the desired sizes.

Long content

Since version 0.2 it's possible to encode ~2900 characters (8-bit).