PHP - Google chart API - QR code margins not working (Bug or feature? )
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 :)
Comments
-
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 .