kjua

kjua enables you to dynamically add QR codes to your website. Choose between rendering the code as canvas, img or svg. The generated QR code will be in the least possible version requiered to encode the content (least number of blocks). Takes care of device pixel ratio to render crisp codes on all devices. Works in all modern browsers.

See a demo to get a first impression.

Usage

The syntax is simple. Use global method kjua to create a fresh canvas, img or svg element displaying the QR code and add it to your page. For example:

var el = kjua({text: 'hello!'});
document.querySelector('body').appendChild(el);

jQuery

A jQuery plugin is included, you can use it like

$('#my_container').kjua({text: 'Hello'});

Options

The available options and their default values are:

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

    // render pixel-perfect lines
    crisp: true,

    // minimum version: 1..40
    minVersion: 1,

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

    // size in pixel
    size: 200,

    // pixel-ratio, null for devicePixelRatio
    ratio: null,

    // code color
    fill: '#333',

    // background color
    back: '#fff',

    // content
    text: 'no text',

    // roundend corners in pc: 0..100
    rounded: 0,

    // quiet zone in modules
    quiet: 0,

    // modes: 'plain', 'label' or 'image'
    mode: 'plain',

    // label/image size and pos in pc: 0..100
    mSize: 30,
    mPosX: 50,
    mPosY: 50,

    // label
    label: 'no label',
    fontname: 'sans',
    fontcolor: '#333',

    // image element
    image: null
}