解壓文件夾，將jquery.qrcode.min.js拷貝到項目目錄中，新建index.html文件。
在頁面中加入jquery庫文件和qrcode插件
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
在頁面中需要顯示二維碼的地方加入以下代碼：
<div id="code"></div>
調用qrcode插件，qrcode支持canvas和table兩種方式進行圖片渲染，默認使用canvas方式，效率最高，當然要瀏覽器支持html5。直接調用如下：
$('#code').qrcode("demo"); //任意字符串
您也可以通過以下方式調用：
$("#code").qrcode({
render: "table", //table方式
width: 200, //寬度
height:200, //高度
text: "demo" //任意內容
});
默認生成的二維碼大小是 256×256，當然可以自定義大小：
這樣就可以在頁面中直接生成一個二維碼，你可以用手機“掃一掃”功能讀取二維碼信息。
識別中文，試驗的時候發現不能識別中文內容的二維碼，通過查找多方資料了解到，jquery-qrcode是采用charCodeAt()方式進行編碼轉換的。而這個方法默認會獲取它的Unicode編碼，如果有中文內容，在生成二維碼前就要把字符串轉換成UTF-8，然后再生成二維碼。您可以通過以下函數來轉換中文字符串：
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
以下示例：
var str = toUtf8("這個我的二維碼");
$('#code').qrcode(str);
案例1 ：二維碼基本功能
<!DOCTYPE html>
<html>
<head>
<title>Demo page</title>
</head>
<body>
<p>
TODO make a nice looking pure client qrcode generator
even allow download of the image
</p>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.qrcode.min.js"></script>
<script>
jQuery(function(){
jQuery('#output').qrcode("demo");
})
</script>
</body>
</html>
二維碼基本效果圖，如下圖所示。
例2 二維碼兩種實現方式
<!DOCTYPE html>
<html>
<head>
<title>兩種方式</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<!--<script type="text/javascript" src="../jquery.qrcode.min.js"></script>
--><script type="text/javascript" src="../src/jquery.qrcode.js"></script>
<script type="text/javascript" src="../src/qrcode.js"></script>
<p>Render in table</p>
<div id="qrcodeTable"></div>
<p>Render in canvas</p>
<div id="qrcodeCanvas"></div>
<script>
//jQuery('#qrcode').qrcode("this plugin is great");
jQuery('#qrcodeTable').qrcode({
render : "table",
text : "qrcodeTable"
});
jQuery('#qrcodeCanvas').qrcode({
text : "qrcodeCanvas"
});
</script>
</body>
</html>
綜上所述，jquery-qrcode可以用兩種方式實現二維碼，使用canvas方式渲染性能還是非常不錯的，但是如果用table方式，性能不太理想，特別是IE9以下的瀏覽器，所以需要自行優化一下渲染table的方式，這里就不細述了。
基本參數設置如下所示：
text : "demo" //設置二維碼內容
render : "canvas",//設置渲染方式
width : 256, //設置寬度
height : 256, //設置高度
typeNumber : -1, //計算模式
correctLevel : QRErrorCorrectLevel.H,//糾錯等級
background : "#ffffff",//背景顏色
foreground : "#000000" //前景顏色
