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:

Dvolvr on your smartphone

No doubt you’re desperately keen to bookmark this blog on your smartphone browser so you can check what’s going on while sitting in meetings at work – if only the url wasn’t so long and difficult to type.

Lucky for you, help is at hand – I’ve added a QR code to the bottom right of the page that you can scan with your phone. Just in case you haven’t got the strength to scroll down there right now, here it is again but even biggerer:

Dvolvr on your smartphone

There are dozens of free, web-based QR code generators but I created these images using goQR.me. I used them because they offer slightly more flexibility when it comes to choosing the size of the images generated. They will also host the images free of charge if you don’t have somewhere to put them.

If you don’t like the look of goQR.me then you might prefer: Scan.meCreate QR Code, Delivr, Zxing, BeQRious, SparqCode, Kaywa, QR Code Generator or one of the many others available online.

After lots of experimentation I settled on Scan for reading QR codes on the iPhone. It’s very fast, has a clean and simple interface and has never failed to read a code, even when I’ve had to hold my phone at an awkward angle. It’s also available for Android.