Generate QR Codes using the Google Chart API

Oct 5, 2012

When I'm testing or deploying websites built for mobiles and desktops, it's often a bit of a challenge to get a URL over to a mobile. This isn't really a problem the first couple of times; you can copy and paste, use Chrome to Phone or Google Chrome, email it over, etc., however I always like to find ways to speed up repetitive tasks.

To address this, at the bottom of our apps, I generate a link to the page and append it to the following URL. This link will generate a 400 w x 400 h pixel QR code to the chl argument.

https://chart.googleapis.com/chart?cht=qr&chs=400x400&chl=[url here]

Example Generated QR Code

https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=http://www.youtube.com/watch?v=Q7UX8KASASU

Example script

<img src="" alt="Example QR Code" id="qrCode" />

<script type="text/javascript">
  var ele = document.getElementById("qrCode");
  ele.src = "https://chart.googleapis.com/chart?cht=qr&chs=400x400&chl=" + document.location.href;
</script>

Useful links