Although you should use an external service (php for example) hosted on a third party or your own server to generate QR Code images and return it as a base64 image with an ajax call, as this will remove many headaches as browser support etc, there is an awesome plugin named jQuery QR Code, this plugin is standalone and will generate in a canvas or a table a qrcode on your browser with a just a couple of lines.
This plugin is based on qrcode.js but this plugin add support for https connections.
Plugin
jQuery QR Code is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download. It doesnt rely on external services which go on and off, or add latency while loading. It is based on a library which build qrcode in various language. jquery.qrcode.js wraps it to make it easy to include in your own code. There is a plain qrcode.js but if your website uses https protocol, then the plugin will not work. The jQuery version doesn't have this issue therefore you can use it without worry about the protocol.
To start using the plugin, follow these steps:
Include the plugin on your document, which can be downloaded here:
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
Then create a div in the DOM that will contain the canvas rendered by the plugin, if the browser doesn't support canvas, use the canvasjs polyfill to add canvas support or add the render:table option in the initialization code.
<div id="demo"></div>Then initialize the plugin:
jQuery("#demo").qrcode("url or text");
// or
jQuery("#demo").qrcode({
//render:"table"
width: 128,
height: 128,
text: "http://ourcodeworld.com"
});Play with the following example, go to the Result tab:
Visit the homepage of the plugin here, start creating QR Codes in the browser !
