Generating QR Codes from the Google Chart API

Quick Reference (QR) Codes are a type of Matrix Barcode capable of storing much more information than your normal stripy barcode.

Many organisations have taken to using QR codes as part of an integrated marketing campaign to store web page URLs, allowing users to capture the 'barcode' on their mobile phone cameras in order to visit the site in a quick and easy fashion.

QR Codes from Google Chart API

The Google Chart API has, among other things, the facility to generate QR codes of all types, encoding within them text, binary data or Kanji strings that you define - up to the maximum data limit of a QR code.

The Google Chart API is very simple to understand and returns a PNG file in response to the parameters you set.

Below I have a JavaScript/HTML implementation of the Google Chart API, that returns a QR code based on the text you input.

Generate a QR Code - JavaScript Implementation of Google Chart API











QR Code Generator Source

The source code for my JavaScript implementation above:

<script type="text/javascript"> function changeSrc() { var qrCodeText = document.getElementById('qrText').value; document.getElementById("qrImage").src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl="+qrCodeText; document.getElementById("qrLink").value="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl="+qrCodeText; } </script><br /> <style> .DAtextbox { width:250px; font-size:12pt; padding:5px; } .DAsubmitbut { width:250px; font-size:12pt; padding:5px; text-align:center; } .DAimg { border:1px solid #CCCCCC; padding:0px 50px 0px 50px; } </style><br /> <p> <input name="qrText" type="text" class="DAtextbox" id="qrText" value="Enter Your Text"><br /> <p></p><p><input name="Submit" type="submit" class="DAsubmitbut" value="Generate QR Code" onclick="changeSrc()"><br /> <p></p><p><img class="DAimg" id="qrImage" src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=http://dansinteractive.blogspot.com/2011/06/generating-qr-codes-from-google-chart.html" width="150" height="150" /><br /> <p></p><p> <textarea name="textfield" cols="18" rows="6" readonly class="DAtextbox" id="qrLink">

Happy QR Code Generating.