jQuery.qrcode

generate QR codes dynamically

0.8.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 QR Code Generator by Kazuhiko Arase (MIT License).

The sources and a changelog are available on GitHub.

It's also available on Bower: bower install jquery.qrcode

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'

$(selector).qrcode();

Customized

Some values changed

$(selector).qrcode({
	width: 100,
	height: 100,
	color: '#3a3',
	text: 'http://larsjung.de/qrcode'
});

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.

$(selector).qrcode({
	render: 'div',
	width: 100,
	height: 100,
	color: '#3a3',
	text: 'http://larsjung.de/qrcode'
});

Long content

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

$(selector).qrcode({
	text: '.........+10.......+20.......+30.......+40.......+50.......+60.......+70.......+80.......+90.......+100......+10.......+20.......+30.......+40.......+50.......+60.......+70.......+80.......+90.......+200......+10.......+20.......+30.......+40.......+50.......+60.......+70.......+80.......+90.......+300......+10.......+20.......+30.......+40.......+50.......+60.......+70.......+80.......+90.......+400......+10.......+20.......+30.......+40.......+50.......+60.......+70.......+80.......+90.......+500......+10.......+20.......+30.......+40.......+50.......+60.......+70.......+80.......+90.......+600......+10.......+20.......+30.......+40.......+50.......+60.......+70.......+80.......+90.......+700 -> this text is 740 characters long!'
});

License

jQuery.qrcode is provided under the terms of the MIT License.

Uses QR Code Generator (MIT) by Kazuhiko Arase. Kudos to jquery.qrcode.js by Jerome Etienne.