How to generate a simple QR Code using Google Chart API

Generate a simple QR Code using Google Chart API

QR Codes are popular type of 2 Dimensional bar codes and are also known as physical world links. In this article we will see how to generate a simple QR Code using Google Chart API.

QR Codes store up to 4,296 alphanumeric characters of arbitrary text.

Google QR Codes

The QR can be of anything for example Link, Text, Email, Location, Phone, SMS, WhatsApp, Skype, Zoom, WiFi, V-Card, Event, PayPal, BitCoin etc.

One of the best site that offers FREE service for creating high quality and creative QR codes is QR Code Labs. It offers tons of features to design custom QR codes with logo and multiple options.

This article mainly consist on 3 parts, so this is a bonus article:

  1. Google Chart API
  2. How to download a generated QR code
  3. How to print a generated QR code

1. Google Chart API

The generation of QR Code using Google Chart API supports both GET and POST methods, however the POST request is required when the string size is more than 2000 bytes (included the API URL), otherwise we usually use the GET request.

The URL for Google Chart API is: https://chart.googleapis.com/chart?

The Google Chart API URL supports following query parameters:

  • cht = qr (required param, defines to have a type as QR code)
  • chs = width x Height (it is also a required param and defines the image size to generate)
  • chl = data (required param, have a data in the form of string)
  • choe = <outputEncode> (optional parameter and have a default values UTF-8)
  • chld = <errorCorrection> (optional parameter and may have values L, M, Q, H). The default is L that allows recovery for upto 7% data loss

How to generate QR Code

Let’s take an example of a text w3programmings.com and we will generate QR Code using Google Chart API.

<?php
  // take a string in a variable
  $string = "w3programmings.com";

  // add the string in the Google Chart API URL
  $google_chart_api_url = "https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=".$string."&choe=UTF-8";

  // let's display the generated QR code
  echo "<img src='".$google_chart_api_url."' alt='".$string."'>";
?>

The output of above code is:

w3programmings.com

QR Code using Google Chart API

How to improve load time when we have multiple QR codes in a same page

If you have a couple of QR codes to display in a page it is fine to use the standard URL https://chart.googleapis.com/chart?. However, when you have multiple QR codes to generate in a single page than Google recommends to use a number from 0-9 as a prefix of API URL for example:

  • https://0.chart.googleapis.com/chart?
  • https://1.chart.googleapis.com/chart?
  • https://2.chart.googleapis.com/chart?
  • https://9.chart.googleapis.com/chart?

2. How to download a generated QR code

Let’s create some PHP scripts

Create a file download-qr-code.php and add the following code:

<?php
  // take URL from GET method
  $url = $_GET['url'];
 
  // define file transfer
  header('Content-Description: File Transfer');

  // define content type as PNG image
  header("Content-type: image/png");

  // define unique file name and tell that it is an attachment
  header("Content-disposition: attachment; filename= qrcode_".time().".png");

  // read and file
  readfile($url);
?>

Now create a functions.php file and add the following piece of code:

<?php
  // create a function to encode the URL
  function encodeURIComponent($str){
    $revert = array('%21'=>'!', '%2A'=>'*', '%27'=>"'", '%28'=>'(', '%29'=>')');
    return strtr(rawurlencode($str), $revert);
  }
?>

Create index.php and call the function that we have created and force the QR code to download:

<?php
  // include the functions file
  include "functions.php";

  // define QR code
  $qr_code = "https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=w3programmings.com&choe=UTF-8";

  // create download button
  echo '<a href="download-qr-code.php?url='.encodeURIComponent($qr_code).'" class="btn btn-md btn-success" download>Download</a>';
?>

3. How to open a generated QR code for print

Let’s create an index.html file and add the following code:

<!-- create anchor link with reference for Google Chart API -->
<a onclick="PrintImage('https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=w3programmings.com&choe=UTF-8')" class="btn btn-xs btn-info" print><i class="fa fa-print"> Print</a>

Let’s write some JavaScript code in the index.html file:

<script type="text/javascript">
  // print an image
  function ImagetoPrint(source){
    return "<html><head><script>function step1(){\n" +
           "setTimeout('step2()', 10);}\n" +
           "function step2(){window.print();window.close()}\n" +
           "</scri"+"pt></head><body onload='step1()'>\n" +
           "<img src='" + source + "'/></body></html>";  
  }

  function PrintImage(source){
     Pagelink = "about:blank";
     var pwa = window.open(Pagelink, "_new");
     pwa.document.open();
     pwa.document.write(ImagetoPrint(source));
     pwa.document.close();
  }
</script>

Now, when the print button is clicked it will open the generated QR code in new page and will also prompt for print.

Related Posts