If the phase “A picture tells a thousand words” could be put to great use then this would be it…

This is a QR code, an abbreviation of Quick-Response Code used to store data using a series of black and white squares that can be read by various devices including smart phones. It is a technology being in use from 90’s to link text, websites, documents, phone numbers, etc. Initially, QR codes were used by the automotive industry in Japan to track vehicles during manufacture. And today, from tracking applications to entertainment sectors, marketing, mobile phone apps, it is has evolved far better across the globe. It is much safer to say that the technology has become a crucial part of our day to day lives.

Some of the common example of how QR codes have been used:     

  • Website URLs – go directly to a site by simply scanning with your smartphone.
  • Pre-populated emails
  • Contact cards
  • Pre-populated SMS messages
  • Map / location coordinates
  • Calendar appointments

Unlike those traditional UPC codes, they have become very popular for a wide range of applications in the shopping and advertising industries. It’s more like if a user finds a QR code on any of their products they just require to scan out the code using their phone or a scanner and check out the content.

Generating QR Code using jQuery

Well if you hire a skilled coder or someone who have a good hands on JavaScript or jQuery, CSS or HTML then this is going to be very easy for you. However, jQuery does not have any inbuilt way to generate the code but using a plugin can definitely make some difference. Let’s find out how?

Step 1

Download core file from the jQuery’s official website.

Step 2

Go to the GIT Hub page, download and include the jquery.qrcode.min.js file

Your code may look something like these:

Step 3

Create a DOM element like a DIV or a span etc. This will be used as a container for the generated QR code. Our example includes DIV

<div id=”qrcodeholder”> </div>

Step 4

Last but certainly not the least, it’s time to invoke the QR code plugin function with parameters as well as the data you want to encode in the QR code. The parameters for the jQuery QR code plugin includes the text or data that needs to be encoded, the width and height of the QR code generated and the rendering mode.

<script type=”text/javascript”>

//Wrap it within $(document).ready() to invoke the function after DOM loads.

$(document).ready(function(){

$(‘#qrcodeholder’).qrcode({

text : “http://www.moreonfew.com/generate-qr-code-using-jquery”,

render : “canvas”,  // ‘canvas’ or ‘table’. Default value is ‘canvas’

background : “#ffffff”,

foreground : “#000000”,

width : 150,

height: 150

});

});

</script>

The above code generates the following QR Code:

A few jQuery QR plugins that are worth a look

#1 jquery.qrcode

This plugin enables you to dynamically add QR codes to your website. Whether you choose to render the code in a Canvas or Divs, the generated code will be in the least possible version required to encode the content. The syntax is pretty much simple, just use:

$(selector).qrcode(options);

#2 printQr jQuery Plugin

This plugin adds QR codes for any specified link to the bottom of the page. It is believed that the plugin is mainly used to hide these QR codes from the screen and show them for printing.

#3 jQuery-QR-Image-Plugin

As the name implies, the jQuery plugin includes QR images in your site.

#4 QR-Code Generator

It is used to create a QR code on any site. Content can be in the form of text or the current URL of the site where it is embedded.

#5 jQuery uQR plugin

Written by Marius Stanciu – Sergiu, the plugin allows jQuery developers to embed QR codes into web pages accordingly.

#6 Google Chart Tools: Infographics

Did you know that you can create a QR code on the fly with a URL? Yes, the plugin allows you to generate QR codes on Infographics.

#7 jquery.MyQRCode.js

With the help of Google Chart API featuring jQuery, the plugin successfully generates QR code for mobile devices. The by default nature of plugin generates QR code for the URL of the page. One of the obvious benefits of using the plugin is that you can specify the text, encoding, and size of the QR code.

#8 jQuery plugin : barcode

In order to use this plugin, simply define a container to host the visual barcode.

In addition to passing in the text, jquery developers need to consider these key parameters to customize the QR code appearance:

  • Render: canvas, div or image
  • Size: integer in pixels
  • Fill: customize the color using hex #
  • Radius: add corners in pixels
  • Font name: change the font
  • Font color: change the font color