使用jquery插件qrcode生成二維碼
二維碼應(yīng)用已經(jīng)滲透到我們的生活工作當(dāng)中,您只需要用手機(jī)對(duì)著二維碼“掃一掃”即可獲得所對(duì)應(yīng)的信息,方便我們了解商家、購(gòu)物、觀影等等。本文將介紹一款基于jquery的二維碼生成插件qrcode,在頁(yè)面中調(diào)用該插件就能生成對(duì)應(yīng)的二維碼。
qrcode其實(shí)是通過(guò)使用jQuery實(shí)現(xiàn)圖形渲染,畫(huà)圖,支持canvas(HTML5)和table兩種方式,您可以到獲取最新的代碼。
如何使用
1、首先在頁(yè)面中加入jquery庫(kù)文件和qrcode插件。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script>
2、在頁(yè)面中需要顯示二維碼的地方加入以下代碼:
<div id="code"></div>
3、調(diào)用qrcode插件。
qrcode支持canvas和table兩種方式進(jìn)行圖片渲染,默認(rèn)使用canvas方式,效率最高,當(dāng)然要瀏覽器支持html5。直接調(diào)用如下:
$('#code').qrcode("http://www.dbjr.com.cn"); //任意字符串
您也可以通過(guò)以下方式調(diào)用:
$("#code").qrcode({
render: "table", //table方式
width: 200, //寬度
height:200, //高度
text: "http://www.dbjr.com.cn" //任意內(nèi)容
});
這樣就可以在頁(yè)面中直接生成一個(gè)二維碼,你可以用手機(jī)“掃一掃”功能讀取二維碼信息。
識(shí)別中文
我們?cè)囼?yàn)的時(shí)候發(fā)現(xiàn)不能識(shí)別中文內(nèi)容的二維碼,通過(guò)查找多方資料了解到,jquery-qrcode是采用charCodeAt()方式進(jìn)行編碼轉(zhuǎn)換的。而這個(gè)方法默認(rèn)會(huì)獲取它的Unicode編碼,如果有中文內(nèi)容,在生成二維碼前就要把字符串轉(zhuǎn)換成UTF-8,然后再生成二維碼。您可以通過(guò)以下函數(shù)來(lái)轉(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);
現(xiàn)在網(wǎng)上制作二維碼的教程特別多,大家要學(xué)會(huì)靈活運(yùn)用,選擇自己最喜歡的方法掌握二維碼的制作技巧。
- javaScript生成支持中文帶logo的二維碼(jquery.qrcode.js)
- 使用jquery.qrcode.js生成二維碼插件
- 使用jQuery.Qrcode插件在客戶(hù)端動(dòng)態(tài)生成二維碼并添加自定義Logo
- jQuery qrcode生成二維碼的方法
- 使用jquery.qrcode.min.js實(shí)現(xiàn)中文轉(zhuǎn)化二維碼
- jquery插件qrcode在線生成二維碼
- 使用jquery組件qrcode生成二維碼及應(yīng)用指南
- 使用jquery.qrcode生成彩色二維碼實(shí)例
- 利用jquery.qrcode在頁(yè)面上生成二維碼且支持中文
- 基于jquery二維碼生成插件qrcode
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法,涉及jquery鏈?zhǔn)讲僮骷绊?yè)面元素樣式控制的相關(guān)技巧,需要的朋友可以參考下2015-07-07
jQuery實(shí)現(xiàn)的事件綁定功能基本示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的事件綁定功能,結(jié)合簡(jiǎn)單表單驗(yàn)證實(shí)例分析了jQuery事件綁定的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2017-10-10
jQuery實(shí)現(xiàn)頁(yè)面倒計(jì)時(shí)并刷新效果
頁(yè)面倒計(jì)時(shí)小編在很多網(wǎng)站都有這樣的需求,今天小編給大家分享一段jq代碼實(shí)現(xiàn)頁(yè)面倒計(jì)時(shí)并刷新效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),需要的的朋友參考下2017-03-03
jquery幻燈片插件bxslider樣式改進(jìn)實(shí)例
這篇文章主要介紹了jquery幻燈片插件bxslider樣式改進(jìn),對(duì)比官方樣式以實(shí)例形式講述了改進(jìn)的技巧,非常實(shí)用,需要的朋友可以參考下2014-10-10
jQuery中DOM節(jié)點(diǎn)刪除之empty與remove
DOM節(jié)點(diǎn)刪除相信對(duì)每個(gè)初學(xué)jQuery的新手們來(lái)說(shuō)都不陌生,下面這篇文章主要介紹了jQuery中DOM節(jié)點(diǎn)刪除之empty與remove的相關(guān)資料,有需要的朋友可以參考借鑒,感興趣的下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01
從零開(kāi)始學(xué)習(xí)jQuery (四) jQuery中操作元素的屬性與樣式
本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區(qū)分值得大家學(xué)習(xí).2011-02-02
基于jquery擴(kuò)展漂亮的CheckBox(自己編寫(xiě))
默認(rèn)的html復(fù)選框控件樣式可定義相當(dāng)有限,下面就與大家分享下自己編寫(xiě)的CheckBox控件。喜歡的朋友可以拿去使用2013-11-11
jquery-mobile表單的創(chuàng)建方法詳解
這篇文章主要介紹了jquery-mobile表單的創(chuàng)建方法,結(jié)合實(shí)例形式分析了jquery-mobile插件創(chuàng)建表單的具體操作步驟與各種常見(jiàn)表單元素的創(chuàng)建技巧,需要的朋友可以參考下2016-11-11

