小編給大家分享一下如何使用jquery.qrcode生成二維碼,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)禹王臺免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。qrcode其實(shí)是通過使用jQuery實(shí)現(xiàn)圖形渲染,畫圖,支持canvas(HTML5)和table兩種方式,您可以到https://github.com/jeromeetienne/jquery-qrcode獲取新的代碼。
1、首先在頁面中加入jquery庫文件和qrcode插件。
2、在頁面中需要顯示二維碼的地方加入以下代碼:
3、調(diào)用qrcode插件。
qrcode支持canvas和table兩種方式進(jìn)行圖片渲染,默認(rèn)使用canvas方式,效率高,當(dāng)然要瀏覽器支持html5。直接調(diào)用如下:
$('#code').qrcode("http://www.xuebuyuan.com"); //任意字符串
您也可以通過以下方式調(diào)用:
$("#code").qrcode({
render: "table", //table方式
width: 200, //寬度
height:200, //高度
text: "www.xuebuyuan.com" //任意內(nèi)容
});
這樣就可以在頁面中直接生成一個(gè)二維碼,你可以用手機(jī)“掃一掃”功能讀取二維碼信息。
我們試驗(yàn)的時(shí)候發(fā)現(xiàn)不能識別中文內(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生成二維碼”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!