Drawing QR-Code on Browser in Javascript

Posted by in Software

In my quest to make the pages of one site a bit more mobile-friendly, I’ve got the idea to provide a QR-Code for an unique identifier generated for users. This is part of a wizard and the end-product is:

QR Code in a wizard

QR Code in a wizard

QR Code in JavaScript

To reach this outcome, I’ve started by looking for a QR javascript snippet. There are lots, but two drew my attention:

I’ve finally settled on Lars Jung’s one, just because the info page looked a bit better, and because it can render <div /> based code. Cool.

Making it work

Downloading the code from github directly is a no go, because the plugin doesn’t actually include the rendering code. It contains just the JQuery wrapper. I’ve finally got everything from the download (zip). Once it’s placed in the right location (assets, lib or whatever suits you), all you need to do is:

  1. PLace a HTML DIV tag where you want the code to show:

  2. Load the plugin (after loading JQuery). I use django so I need something like:

  3. Draw the code at the end:

Now, when the page is loaded, a QR code is drawn representing the string present in the <input /> element.

HTH,


A little experiment: If you find this post and ad below useful, please check the ad out :-)