Many organisations have taken to using QR codes as part of an integrated marketing campaign to store web page URLs, allowing users to capture the 'barcode' on their mobile phone cameras in order to visit the site in a quick and easy fashion.
QR Codes from Google Chart API
The Google Chart API has, among other things, the facility to generate QR codes of all types, encoding within them text, binary data or Kanji strings that you define - up to the maximum data limit of a QR code.
The Google Chart API is very simple to understand and returns a PNG file in response to the parameters you set.
Below I have a JavaScript/HTML implementation of the Google Chart API, that returns a QR code based on the text you input.
Generate a QR Code - JavaScript Implementation of Google Chart API
QR Code Generator Source
The source code for my JavaScript implementation above:
Happy QR Code Generating.
Posts
Your javascript is too complicated for me. But I was able to work out the easy way:
ReplyDeletehttp://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=hello+there
Yes, laughably simple. That's all my JavaScript does actually. It simply takes the contents of the text input field and appends it to the end of the API query in the appropriate place, like so:
ReplyDeletehttp://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=TEXT_INPUT_FIELD_CONTENT_HERE
It then replaces the image src with it without reloading the page.
It's really just a simple GUI for what you did.
I found that the chart api works fine with a relatively simple url but when you try to feed it something like:
ReplyDelete...com/showcaseproductdetail.htm?ID=157729&Used=1&
it will not encode the whole address resulting in the wrong qr code. Rather than attempt to convert the longer url’s to UTF-8, which would seem to present a risk of not being read properly, I was wondering if you had a relatively simple solution to run the dynamic url through the google url shortener within the script (preferrably not the .qr option in the shortener as it defaults to a size too small for print). This is the script I was using:
<5cript type="text/javascript">
document.write( '<1mg src=\"http://chart.apis.google.com/chart?chs=220x220&cht=qr&chl=' + location.href + '\">' );
[some characters changed to allow me to post]
That's interesting Sid. I suppose the API doesn't like all the '&' in the dynamic URL. To get round this my 'app' would probably need to convert them all to the html codes for them... but then would they be correctly interpreted by your server after that? Will need to think about that one.
ReplyDeleteMeanwhile, the print size will be down to the length of the URL string most likely. You can generate larger QQR codes by changing the 'chs=220x220' part of the query string to a larger dimension, but then it will take up more of your page.
If you are using it for printed promo items, then because the QR code data is already pixely, it shouldn't matter how much you scale it, so long as it doesn't try to blur and smooth for you, but keeps the black black and the white white.