1、首先在頁面中加入jquery庫文件和qrcode插件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
2、在頁面中需要顯示二維碼的地方加入以下代碼：
<div id="code"></div>
3、生成二維碼
qrcode支持canvas和table兩種方式進(jìn)行圖片渲染，默認(rèn)使用canvas方式，效率最高，當(dāng)然要瀏覽器支持html5。直接調(diào)用如下
$('#code').qrcode("http://www.helloweba.com"); //任意字符串
也可以通過以下方式調(diào)用：
$("#code").qrcode({
render: "table", //table方式
width: 200, //寬度
height:200, //高度
text: "www.helloweba.com" //任意內(nèi)容
});
這樣就可以在頁面中直接生成一個(gè)二維碼，你可以用手機(jī)“掃一掃”功能讀取二維碼信息。
執(zhí)行這個(gè)方法之后會(huì)在頁面上渲染一個(gè)canvas標(biāo)簽。
識(shí)別中文
我們?cè)囼?yàn)的時(shí)候發(fā)現(xiàn)不能識(shí)別中文內(nèi)容的二維碼，通過查找多方資料了解到，jquery-qrcode是采用charCodeAt()方式進(jìn)行編碼轉(zhuǎn)換的。而這個(gè)方法默認(rèn)會(huì)獲取它的Unicode編碼，如果有中文內(nèi)容，在生成二維碼前就要把字符串轉(zhuǎn)換成UTF-8，然后再生成二維碼。您可以通過以下函數(shù)來轉(zhuǎn)換中文字符串：
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);
注意：
這中jquery.qrcode和直接使用qrCode生成二維碼是有區(qū)別的：
qrCode生成二維碼的過程見我的的另一篇文章：
文章地址文章來源：http://www.zghlxwxcb.cn/news/detail-736355.html
1.jquery.qrcode執(zhí)行這個(gè)方法之后會(huì)在頁面上渲染一個(gè)canvas標(biāo)簽，容器可以是任意標(biāo)簽；
2.使用qrCode容器必須是canvas標(biāo)簽。文章來源地址http://www.zghlxwxcb.cn/news/detail-736355.html
到了這里，關(guān)于使用jquery.qrcode生成二維碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
