Tag Archives: QR Codes

Pure JavaScript QR Code Generator with jQuery

Need a fast and lightweight way to generate QR codes in-browser, without relying on a third-party service? There’s a new jQuery plugin that’s exactly what you’re looking for. Weighing in at only 4kb, it generates QR codes using only JavaScript—no image resources, no calls to remote servers.

After including it in your page, and jQuery of course, you create an empty DOM element to hold the QR code (a DIV, for example) and then you just do something like this:

jquery('#somediv').qrcode("http://www.webmaster-source.com");

The plugin is available on GitHub, and is released by the author under an MIT license.

An alternative, for those of you who don’t mind using a third-party service—and prefer simply including an image rather than extra JavaScript—can use the wonderful Google Chart API.

Generate QR Codes On-the-Fly With the Google Chart API

You’ve probably seen a QR code before, even if you didn’t know what it was at the time. It’s a little square matrix barcode that can be read by either a specialized scanner or a cellphone with the right software. UPS puts QR codes on their packages for tracking purposes, and many Android phones come with QR readers preinstalled for easily sharing links to apps.

A QR code can contain any sort of textual information, which will be decoded by a QR reader. A web address, a simple message, a phone number, etc.. A good QR reader should figure out what the decrypted data is and act upon it accordingly. If it’s a web address, it will display the web page. If it’s a phone number, it should display the number and offer to call it.

Users of the iPhone or fourth-generation iPod Touch can use a free app like QR Reader to scan QR codes.

What can you use a QR code for? There are plenty of possible applications. Magazines could print QR codes that let you quickly jump to a web page. (Anyone remember the CueCat?) Advertisements could have QR codes that offer more information. You could put a QR on your business card. Want to move a web page you’re reading from your computer to your phone? Create a quick QR matrix and scan it right off the screen!

Now for the fun part… How do you make your own QR codes?

Continue reading →