May 25, 2012

Generating QR code of current Page URL

Thank Japan for QR code, or Quick Response Code.
And thanks Google to making the creation of QR codes so simple, Google have an API for it.

You can see a lot of QR codes in print media, The objective to use is to take people from the physical world to the online world.

Web pages use them to let users scan and open the app store url of apps, or to open any page in mobile browser.


Today I want to share a code that can help a web page to display its own URL as QR code, the code uses Google chart API and small JavaScript Code.
Here is the code: 

HTML code:

<img id="qr" />

JavaScript Code:

document.body.onload = function(){
  document.getElementById("qr").
   setAttribute(
   'src',
   'http://chart.apis.google.com/chart?cht=qr&chs=100x100&chld=H|0&chl='+window.location
   );
};

You can change size of image by editing the chs parameter.
Demo
Here is the QR code for current page, generated by the code above.




By : Motyar+ @motyar