jQuery.qrcode

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 QR code will always be in the least possible type/resolution.

This is the script I use in h5ai to generate QR codes for file entries. I first used jquery.qrcode.js by Jerome Etienne which itself is a wrapper for the QR Code Generator by Kazuhiko Arase (both MIT License). Since Kazuhiko Arase updated his code and thereby altered the API, I decided to write a new wrapper. It is strongly inspired by the original code of Jerome Etienne.

The sources and a changelog are available on GitHub.

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 element.

Options

The available options and their default values are:

Options {
 
	// render method: 'canvas' or 'div'
	render: 'canvas',
 
	// width and height in pixel
	width: 256,
	height: 256,
 
	// QR code color
	color: '#000',
 
	// background color, null for transparent background
	bgColor: null,
 
	// the encoded text
	text: 'no text'
}

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.