[Off-topic] Creating a QR code client-side

By Eugenia Pérez | 31 July, 2015

When we’re developing a website it’s sometimes useful to provide a mechanism to make easier for users to come back to the site later on. Traditionally this was very easy to implement for classic web browsers.  However the amount of mobile devices that nowadays are surfing the Internet is huge and this is nothing but the begining. Coping and pasting an URL can be very inconvenient for a mobile user. This is why providing URL codes can atrack more visits to our sites. Generating a QR code can be done using server-side or client-side code. There are JavaScript-only libraries for doing this quite straightforward. An example can be found in the following link:

http://davidshimjs.github.io/qrcodejs/

With this lightweight library (about 7KB) generating a QR code and displaying it on the screen only takes a few lines of code. As simple as selecting the HTML div which is going to be the container:

var qrContainer = document.getElementById("qr-div");

And then creating a QRCode object using the DOM element and the URL to generate the QR for:

new QRCode(document.getElementById("qrcode"), "http://foo.com");

Moreover, it is good to say that is compatible with all the latest versions of major browsers.

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather