Sample Web Site Page

The page includes the javascript required to autogenerate a QRCode for this page.

How Does This work?

When the page loads, JQuery tests to see when the page is ready but not yet visible. When that moment arrives, JavaScript reaches into the browser and gets the URL of the current page (this page you are viewing). Next, JavaScript hands that URL to a custom javascript function that calculates the length of the URL to determine which QR Code version is needed to hold that amount of data (the more data you have, the larger the QR code: There are 40 QR Code versions). Then it builds the QR Code in memory as an HTML5 Canvas vector image. Finally, it converts that Canvas vector image into PNG image data and JavaScript appends the client-side dynamicalyl generated image to the (this) page. None of this requires any server-side coding. The only limitation is that the person viewing the code needs to be in a browser that can display HTML5!

How Would This Be Used?

The Staff

Imagine that you want to share a URL with the world on a print piece. Traditionally you would put a URL into the design and hope that users will visit that page. Today, many people have taken the time to download QR Code reader tools for their iPhones and QRCode reader apps for their Android phones. So these days you are thinking about putting QR Codes that point to URLs into your print piece. This helps the "Client" quickly load up your URL as well as walk away with something they may actually follow up on. Good news for you and good news for your Client. But, how do you generate that pesky QR Code? Once this code gets placed into the page, it autogenerates the correct QRCode for your page on it's own. If you want to grab the QR Code for a page, you would then just unhide the code and right click on it and "save image as..." a PNG. Bring the saved image into your project and you are good to go!

The Client

Imagine you are a client visiting a web site. You are in a race to share the coolest stuff with your friends because you want the street cred of being the "cool kid" on the block. Now, you are visiting a site and suddenly you decide you want to text that address to a friend so they can share in the spender that is the web page, but you really don't want to type out that whole crazy URL. So, instead, look how easy it is to quickly unhide the QR Code and scan it with your phone right there from your monitor! These days, many people have taken the time to download QR Code reader tools for their iPhones or QRCode reader apps for their Android phones and you are armed with your QR Code reader so you get scanning! Wow. You can then just copy it within your phone and paste it directly into your text message, beating you friend to the punch and winning that covetted "most web savvy award"!