PHP - Google chart API - QR code margins not working (Bug or feature? )

10,593

Solution 1

Google charts has a curious feature where it will grow the size of the image but not grow the size of the code.

This will depend on the size of the data within the code.

Take a look at these three examples

150 - no margin http://chart.apis.google.com/chart?cht=qr&chs=150x150&chld=L|0&chl=http://localhost/wp-sandbox/?p=6164

165 - margin http://chart.apis.google.com/chart?cht=qr&chs=165x165&chld=L|0&chl=http://localhost/wp-sandbox/?p=6164

180 - no margin http://chart.apis.google.com/chart?cht=qr&chs=180x180&chld=L|0&chl=http://localhost/wp-sandbox/?p=6164

Remember - you code needs a margin in order for the majority of devices to scan it properly.

Solution 2

Same problems here with the Google API. So I ended up using this alternative service: http://api.qrserver.com/v1/create-qr-code/?data=http://www.google.com&size=104x104

The API (http://qrserver.com/api/documentation/create-qr-code/) offers better control of the desired QR Code image output.

Solution 3

I got the same problem when generating lots of QR-Code with various encoded data size.

What I found so far is that the generation code probably impose the same number of screen-pixels size for each barcode-pixels.

So, assuming:

  • sw the QR-code height/width you ask for, in screen-pixel, let's say 150x150 pixels
  • bw the number of barcode-pixel of the encoded data, let's say 20x20 pixels
  • cw the number of screen-pixel per barcode-pixel: cw = ceil(sw /bw), so here 150/20 = 7,5 => cw=7
  • sw2 the barcode real width in pixel: sw2 = cw * bw, so here sw2=7*20=140 pixels
  • mw the margin width in pixels: mw = (sw - sw2) / 2, so here a margin of 5 pixels...

With the same example, if you ask for a 160x160 size QR code you will problably have no margins: 160/20=8.

To come back to your initial problem, decreasing variability in margin size means either decreasing the number of barcode pixel (but you can't control that as it depends on QR-code quality and size of encoded data), or increasing resulting screen-pixel dimensions.

If you ask for an infinite dimension there is no more variation in margin, but I wonder if Google would be happy with that :)

Share:
10,593
Obmerk Kronen
Author by

Obmerk Kronen

Typical GeekGirl lost in a maze of code.

Updated on June 09, 2022

Comments

  • Obmerk Kronen
    Obmerk Kronen almost 2 years

    I have a very simple function to generate QR code from the google chart API.

     function o99_qr_code($size,$type,$url ) {
    
            $qr = '';
            $dsize = $size .'x'.$size; // doubleSize
    
             $qr = '<img src="http://chart.apis.google.com/chart?cht=qr&chs=' . $dsize . '&chld=L|0&chl=' . $url . '" width="' .$size .'" height="'.$size .'" alt="QR code" title="QR Code for your mobile device"/>';
    
             switch ($type){
             case 'echo' :
             echo $qr;
             case 'return' :
             return $qr;
             }
        }
    

    Now, this is working just fine except for the margin.

    (Apologize for not linking a live URL - my DEV is on localmachine)

    Whatver I try , I can not get the margin to go to 0. First I thought that for some reason, maybe the correction level L does not accept 0 margins - I tired &chld=M|1 and &chld=L|0 and &chld=M|3 , and even tried to change the order of the parameters and put &chld=L|0 to the end of the string or omitting it completely .

    But for some reason, I always get the default margin of 4.

    Am I doing something wrong ??

    EDIT I - after request of URL : The generated URL is :

    <img src="http://chart.apis.google.com/chart?cht=qr&chs=50x50&chld=L|0&chl=http://localhost/wp-sandbox/?p=6164" width="50" height="50" alt="QR code" title="QR code for your phone"/>
    

    EDIT II

    Check out this fiddle http://jsfiddle.net/obmerk99/rsjcM/

    it demonstrate the problem .