Tuesday, August 11, 2009

QR Code (generator) plugin for jQuery & JavaScript

I recently came across a 2 dimensional barcode called QR Code. QR code’s are popular in Japan and they are mainly used there to quickly get to some website on their mobiles by simply taking a picture of the QR code. You may read more about QR codes on Wikipedia.

Here is an example of QR code for jQuery HowTo blog:

qrcode-jquery-howto

If you have a QR code reader on your mobile take a picture of it and it will open this website. Cool ha?!

Anyway, there are plenty of free online QR code generator sites, but no JavaScript and jQuery plugins/functions. So, I quickly searched for a free online QR code generator sites with “friendly” URL’s and put together a javascript and jQuery functions that generate QR barcode image’s URL for passed URLs. I used Kaywa & University of Bath services.

See jQuery and QR code in action on this demo page.

Here are javascript and jQuery QR code functions:

// JavaScript function
function qrcode(url, size){
  if(typeof(size) == 'undefined') size = 8;
  return 'http://qrcode.kaywa.com/img.php?s='+size+'&d='+url;
}
qrcode('http://jquery-howto.blogspot.com');

// jQuery plugin
(function ($) { 
  $.fn.qrcode = function(url, size) { 
    if(typeof(size) == 'undefined') size = 8;
    return 'http://qrcode.kaywa.com/img.php?s='+size+'&d='+url;
  }
})(jQuery);
$().qrcode('http://www.google.com');

The code above utilizes Kaywa’s online QR code generator. You can specify image site as the second argument to the function. The size argument mut be between 1 and 40 and the generated image will 32 x your argument.

Here is javascript and jQuery code for University of Bath barcode generator:

// JavaScript function
function qrcode(url){
  return 'http://go.bath.ac.uk/qr/download?DATA='+url;
}
qrcode('http://jquery-howto.blogspot.com');

// jQuery plugin
(function ($) { 
  $.fn.qrcode = function(url) { 
    return 'http://go.bath.ac.uk/qr/download?DATA='+url;
  }
})(jQuery);
$().qrcode('http://www.google.com');

NOTE: You can encode plain text messages. They are not limited to URLs...

7 comments:

  1. Why not just use the Google QR generator? All you do is add the following SRC to an img element like this:

    src="http://chart.apis.google.com/chart?cht=qr&chl=http://[YOUR_URL]&chs=120x120" alt="This is a QR Code"

    Wrap the above SRC in an IMG tag and put in your own URL and test it out

    ReplyDelete
  2. @BlueClock, wow, I didn't know that Google charts support QR code. Thanks for pointing that out... I guess using Google services would be more reliable, thanks :)

    ReplyDelete
  3. There's lots of QR code info at QRMe.co.uk

    Regards
    Ian. QRMe.

    ReplyDelete
  4. I've implemented QR code for my blog:

    Is it possible to enhanced the function with bit.ly API (w/login and apiKey) over document.location first?

    ReplyDelete
  5. @柏直瓜子, yes you can. You can read and use code on this article that explains how to shorten URL's using bit.ly and jQuery:

    http://jquery-howto.blogspot.com/2009/04/shorten-long-urls-with-jquery-bitly.html

    ReplyDelete
  6. how much info can be contained in a qrc? i am using code that generates qrc's without 3rd party services, but only 63 chars can be used - that is, nothing to exceed 512 bits. [63*8 = 504]. apparently 64 chars too many. help??? i want to put a paragraph of info available in a qrc. i thought they could hold lots of info!

    ReplyDelete
  7. Heads up. Google's deprecated that API. You'll likely need to go back to some other method of generating your QR codes.

    ReplyDelete