Easy QR Code Generation With Google Charts API

26th April 2012 - 4 minutes read time

When I found about the ability to create QR codes using the Google Charts API I decided to sit down and create a little tool that would generate QR codes for me. I've had this tool for a while and I recently noticed that the QR code mechanism has become deprecated. The API will still work for a couple of years so I thought it was worth posting this. Creating a static QR code using Google Charts is quite easy, all you need to do is create an image. For instance, to create a QR code for the #! code address I would do the following.

<img src="https://chart.googleapis.com/chart?chs=177x177&cht=qr&chl=http://www.hashbangcode.com/&choe=UTF-8" />

Which creates the following image.

To add a little bit of automation to this I created a HTML page with a textarea and an image. This forms the basis of the tool that will create QR codes.

  1. <textarea cols="100" id="inputtext"></textarea>
  2. <img id="qrcode" src="" />

To keep things easy I decided to use jQuery to interact with the elements on the page, so I created an include for that using another Google service for including JavaScript frameworks called Google Ajax. I then wrote a little function that would update the source of the image every time text was entered into the textarea.

  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. $('textarea#inputtext').keydown(function(e) {
  5. $('img#qrcode').attr('src', 'https://chart.googleapis.com/chart?chs=177x177&cht=qr&chl=' + $('textarea#inputtext').val() + '&choe=UTF-8');
  6. });
  7. });
  8. </script>

This code works, but if you are tying in anything into the textarea a lot of requests are made to Google and the image is updated lots of times. To stop this I introduced a small timeout so that the image update function would only be run every second, rather than immediately.

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. var timeout;
  4. $('textarea#inputtext').keydown(function(e) {
  5. if (timeout) {
  6. window.clearTimeout(timeout);
  7. }
  8. timeout = window.setTimeout(function() {
  9. $('img#qrcode').attr('src', 'https://chart.googleapis.com/chart?chs=177x177&cht=qr&chl=' + $('textarea#inputtext').val() + '&choe=UTF-8');
  10. }, 1000);
  11. });
  12. });
  13. </script>

After this, I extended the tool to allow for the size of the QR code to be changed. This involved adding a simple select element to the form so that I now had the following.

  1. <textarea cols="100" id="inputtext"></textarea>
  2. <select id="qrsize"><option value="29">29</option><option value="57">57</option><option selected="selected" value="177">177</option><option value="500">500</option>
  3. </select>
  4. <img id="qrcode" src="" />

I then incorporated this select element into the jQuery so that the size is incorporated into the QR code call. I also added a clause that runs the keydown() event on the textarea so that the QR code gets updated when a new size is selected.

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. var timeout;
  4. $('textarea#inputtext').keydown(function(e) {
  5. if (timeout) {
  6. window.clearTimeout(timeout);
  7. }
  8. timeout = window.setTimeout(function() {
  9. var qrsize = $('select#qrsize').val();
  10. $('img#qrcode').attr('src', 'https://chart.googleapis.com/chart?chs=' + qrsize + 'x' + qrsize + '&cht=qr&chl=' + $('textarea#inputtext').val() + '&choe=UTF-8');
  11. }, 1000);
  12. });
  13. $('select#qrsize').change(function(e) {
  14. $('textarea#inputtext').keydown();
  15. });
  16. });
  17. </script>

If you want to view the tool in action have a look at the QR Code Generator Tool.

Comments

Permalink
Is there an easy EAN13 generation with Google Charts API? Sounds like an article that worths writing :)

esteban briceƱo (Thu, 10/12/2017 - 15:53)

Add new comment

The content of this field is kept private and will not be shown publicly.