Tutorial #54
QRCode.js Intermediate   2014-04-04


QR Codes have become ubiquitous on printed materials over the past couple of years. These are 2-dimensional black and white barcodes with squares in each of three of the four corners. You find them in magazines, on stickers on shop windows, tickets, etc. You capture the image on your smart phone and, typically, get redirected to a web site - much easier than typing in the URL for a the site.

Putting a QR code on a web site doesn't make much sense as, by definition you are already online, in a web browser, and so a regular hyperlink is much simpler. However there are cases where you want to generate a unique QR code for your user. You might generate a ticket or voucher where the QR code contains an embedded identifier for that ticket. The user can print out the web page with the code and use that for admission into an event, or show the page on their phone, where it can be scanned and validated.

There are a lot of Javascript libraries that allow you to generate these code. There are also sites where you enter text and generate a static code that you can download and use elsewhere.

This tutorial shows you how to use one of the Javascript libraries, QRCode.js written by davidshimjs. It offers a very simple clean interface and seems to work very well.

Demo 1 screenshot for this tutorial

Step by Step

You can download the library from Github in a couple of formats. Unpack the distribution and copy qrcode.js or the minimized version qrcode.min.js into the directory that holds your JS libraries.

Understanding the Code

In this demo I am using jQuery to simplify the code, so you need to include that libary as well.

The first part of this code block is the HTML. The first div encloses an text input element, which is where you will enter some text or a URL.

Below this are two divs with the IDs of qrcode_1 and qr_code_2 (you can call them whatever you want) which is where we will draw two variants of the QR code that represents the text entered by the user.

Below the HTML is a script tag that loads the qrcode.min.js library. Below this is our custom JS code that uses the library.

Variables that will be used for the two QRCode objects are defined as global variables and a standard jQuery $(document).ready() block is used as a wrapper for the rest of the code.

Within this, we define an event handler for the text input element which is bound to the change event, which is triggered when the user hits Return in the text box.

First we clear any existing QR code images and then fetch the current value of the text input.

QRCode.js can be called in two ways. The first is a simple one line call to new QRCode(), passing the element that the code will be drawn into, followed by the text that is to be encoded. This form uses default values for the size of the code (256 pixels square) and colors (Black on White). For many purposes this is all you need.

The second version allows you to specify some options. Here you pass in the ID of the target div, instead of the element itself, followed by a Hash of key/value pairs. You specify the text to be encoded, the width and height and the colors (colorDark and colorLight). In this example I am setting the code to be 128x128 and dark red on a white background.

While it is possible to generate Non-Square codes in any combination of colors, I would advise that to stick to square codes, not smaller than 128 pixels square, with colors that show a strong contrast.

There is an option that changes the level of Error Correction in the code, which can help when the code is scanned if the printed version has been degraded in some way. I would not worry about this.

Load the demo page, enter some text such as a URL and hit Return. You will see the two versions of the code generated immediately. Scan one of them off your screen using a smart phone and verify that the text is decoded correctly. The generated code is an image so you can copy and save it to file for use elsewhere.

Image 1 for this tutorial

More Information

QRCode.js home page

QRCode.js github repository

Wikipedia entry on QR codes

jQuery.qrcode by Lars Jung

Code for this Tutorial

Share this tutorial

Comment on this Tutorial

comments powered by Disqus