How to generate a simple QR Code using Google Chart API

The QR Codes are a popular type of 2 Dimensional bar code 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 sites that offer FREE service for creating high-quality and creative QR codes is QR Code Panda. It offers tons of features to design custom QR codes with logos and multiple options.

This article mainly consists of 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 (including 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 the 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 a string)
• choe = <outputEncode> (optional parameter and have a default value UTF-8)
• chld = <errorCorrection> (optional parameter and may have values L, M, Q, H). The default is L which allows recovery for up to 7% data loss

How to generate QR Code

To take an example of a text “w3programmings.com”, we will generate QR Code using Google Chart API using the following script:

<?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 the above code is:

How to improve load time when we have multiple QR codes on the same page

In case, if you have a couple of QR codes to display on a page it is fine to use the standard URL https://chart.googleapis.com/chart?. However, when you have multiple QR codes to generate on a single page than Google recommends using 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

Now write 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>

Now 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>

When the print button is clicked it will open the generated QR code on a new page and will also prompt for print.