Generating QR codes with JQuery

This article looks at different methods of generating QR codes via APIs or jQuery, the different types of QR codes you can create and the format needed to achive them.

What are QR Codes

If ever the saying "a picture tells a thousand words" could be put to good use, this would be it...

 QR CODE

This image, known as a QR code (abbreviation of Quick-Response) can store data using a series of black and white squares that can be read by various devices including smart phones. With greater storage capacity than traditional UPC codes they have become very popular for a range of different applications in the shopping and advertising industries. You'll probably also be very familiar with seeing these codes on tickets.

Here's some common example of how QR codes have been used:

  • Website urls - scan with your smartphone and go directly to a site without having to type it
  • Pre-populated emails
  • Contact cards
  • Pre-populated SMS messages
  • Map / location coordinates
  • Calendar appointments

How do they work?

The black and white squares that make up a QR code are referred to as modules. Some of these modules are reserved as markers for scanners (notice the large three squares in the top and bottom left corners). Likewise depending on the size of the QR code you will also find several 'position' markers that are smaller but still indicicate positioning of data to the scanner. Some of the areas around the markers give additional information such as the type of content being stored, then the rest of the area is split up into sections of 8 modules containing the rest of the actual data. 

QR codes can be created with generators which will convert strings of data following the specification outlined for scanners to read them. If the string data is formatted correctly, then scanners like smart phones can correctly identify what 'type' of data the QR code is trying to provide (e.g. an web site url or pre-populated SMS message). We'll look at these different formats later in the article.

Error Correction

Using the Reed-solomon error correction algorithm QR codes can be made more robust. The purpose of this is to tackle the issue of codes sustaining damage (e.g. if it is printed onto a ticket, the code may get scuffed or smudged). We'll look at the different libraries and services available for generating QR codes in the next section, but each of these will allow you to pass in an error correction level as one of the following:

  • L - sustains up to 7% damage and is still scannable
  • M - 15%
  • Q - 25%
  • H - 30%

The lower the error correction, the less dense or busy the QR code will appear which will also affect the minimum size the QR code can be. The higher the correction rate, the greater the accuracy. The level to use is dependant on the type of data you want to store and how the QR code is going to be presented. 

Plugins and APIs

If you were that way inclined you could write the code to generate a QR code yourself, but with several plugins and APIs already available you can save yourself some time. Let's take a look at some of the different options:

APIs

One of the best known and widely used QR code generator APIs was part of Google Charts, sadly this has now been deprecated. There are however plenty of other services available, GoQR.me being one of the more popular ones.

The beauty of using APIs is that they are extremely quick to implement and don't require you to directly include any other files in your web site. Let's take a look at an example using GoQR.me:

<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Generating%20QR%20Codes%20on%20Code%20Synthesis!" />

This code will generate the following image, try scanning it with your smart phone and you'll see the text from the encoded string that was passed in through the 'data' variable in the image url:

"Generating QR Codes on Code Synthesis"

Nice and easy. But, there are some downsides of using an API service. By including data from someone elses website they could potentially inject any code they like into your pages, you also have to consider the reliability of the API service you're using - if they have problems with their servers, then your QR codes my fail to load. So what are the alternatives?

PHP Library

Another option is to generate your QR codes server side, using a library called PHPQRCode. All you need to do this is download the library file, include the file in your application and then use the static methods to generate your codes like so:

include('qrlib.php');
QRcode::png('Hello World!');

One of the downsides of using this library is that the QR codes you need to generate will be in your PHP code, so this makes it harder to add new codes directly in a CMS. Which brings us nicely to our last option...

jQuery Plugins

Lastly we're going to look at generating QR codes client side using a jquery plugin called jquery.qrcode. To use this plugin, download the jquery library file to include in your application and then apply a qr code to an element on your page like so:


<div id='qr-code-demo-1'></div>

$(document).ready(function()
{
    $('#qr-code-demo-1').qrcode(
        {
            text:'hello world!'
        }
    );
});

In addition to passing in the text, here's a some of the other key parameters available to customise the QR code apperance:

  • render: canvas, div or image
  • size: integer in pixels
  • fill: customise the colour using hex #
  • radius: add corners in pixels
  • fontname: change the font
  • fontcolor: change the font colour

You can set the error correction level of QR codes with an ecLevel parameter that takes 'L','M','Q' or 'H'. You can view the full list of parameters in the documentation.

Formatting - QR Code Examples

So now let's take a look at the different formatting that can be provided so that QR codes are identified as different 'types' by smart phones. The first example references the jQuery plugin, though the same formatting would appy to any of the methods previoulsy discussed.

Plain Text

So starting with the easiest one, passing in plain text requires no further formatting. If using alphanumerical and special characters you can use up to a maximum of 4,296 characters. Here's the example we previously used, for the other formats I'll just provide string that should replace 'hello world!' in interest of saving space.

<div id='qr-code-demo-1'></div>

$(document).ready(function() 

    $('#qr-code-demo-1').qrcode(
        {
            text:'hello world!'
        }
    ); 
});

Web site url

For urls, in most cases you can simply include 'http://' so the data is recognised as a web site, for better compatability also append URLTO:

URLTO:http://www.yoursite.com

Pre-populated Contact Details

For email addresses, add the mailto in front of an address: mailto:you@yourdomain.com

mailto:joe.bloggs@blogger.com

For telephone numbers just provide the number with the country code prefixed with 'TEL':

TEL:+44077123456789

To provide a combination of contact information that can be imported as a contact, the 'MECARD' format is the most widely used:

MECARD:N:*Last Name*, *First Name*; ADR:*address line 1*, *address line 2*, *city*, *post code*; TEL: *number*; EMAIL: *email*;;

MECARD:N:Joe,Bloggs;ADR:123 Street, Someplace, Townvilla, BS1 123;TEL:012345 678910;EMAIL:joe.bloggs@blogger.com;;

Pre-populate an SMS message

SMS format: smsto:number:message

SMSTO:12345667:hello mate!

A similar MMS message can be generated using MMSTO:

Google Maps Location

Format: GEO:latitude, longitude, altitude in meters

GEO:53.23283117761171,-3.2718089257812153,100

Wifi Login

Format: WIFI:S:<ssid>;T:<wep |WPA>;P:<password>;

WIFI:S:myssid;T:WPA;P:pass123

Chat and messenger applications

You can also create QR codes for more specific applications, here's an example if you have skype software:

Format: skype:name

skype:joebloggs

Likewise, here's some other messenger options:

IRC Chat: irc:

Facetime: facetime:

Yahoo Messenger: ymsgr:

AOL Messenger: aim:

For a list of parameters available for each of the above, check out this post by six revisions.

QR Code Generator

Just want the QR codes? Check out this handy online QR code generator.

Sign Up

NEXT: Clearing and resetting forms with jQuery

Code snippet for resetting and clearing form elements using jQuery.

comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.