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