Generating QR Codes in jQuery with jQuery.qrcode

You might not often need to dynamically generate QR codes in your web app but, when you do, jQuery.qrcode will be a timesaver. Written by Lars Jung, jQuery.qrcode is a wrapper to Kazuhiko Arase’s QR Code Generator.  There is a pure Javascript implementation of the original library so Lars wrapper only really makes sense if you are already using jQuery in your application but, if you are, it greatly simplifies the process.

Using jQuery.qrcode is as simple as including the library and calling it with the required parameters.


<!-- Load the libraries -->
<script src="jquery-1.10.2.js"></script>
<script src="jquery.qrcode.js"></script>

<!-- This is where the generated QR code will appear -->
<div id="img-buffer"></div>

<!-- Now generate the QR code! -->
<script>
    $('#img-buffer').qrcode({
    render: 'image',
    width: 400,
    height: 400,
    color: '#000000',
    text: 'http://dvolvr.davidwaterston.com',
    ecLevel: 'H',
    bgColor: '#FFFFFF',
    radius: 0.5
 });
</script>

The latest release (0.6.0) supports soft, rounded corners and the ability to embed an image or text in the centre of the code. There’s also a new interactive demo page that lets you to try out all the features, to see if the library suits your needs, before you download.

Because I could, I generated the QR code at the bottom of the right-hand sidebar using jQuery.qrcode.

More:

2 thoughts on “Generating QR Codes in jQuery with jQuery.qrcode

  1. You could certainly do that. The ‘text’ property defines what is encoded into the QR Code. In my example I’ve just hard-coded it as ‘http://dvolvr.davidwaterston.com’ but you could, of course, assign it dynamically. A QR Code can store up to 4,296 alphanumeric characters though some QR readers may not be able to handle this amount of data so you could hit problems if you are trying to store very long URLs.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s