使用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)圖形渲染,畫圖,支持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.dhdzp.com"); //任意字符串
您也可以通過(guò)以下方式調(diào)用:
$("#code").qrcode({
render: "table", //table方式
width: 200, //寬度
height:200, //高度
text: "http://www.dhdzp.com" //任意內(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插件在客戶端動(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)文章
ajax jquery實(shí)現(xiàn)頁(yè)面某一個(gè)div的刷新效果
這篇文章主要給大家介紹了關(guān)于ajax jquery實(shí)現(xiàn)頁(yè)面某一個(gè)div的刷新效果的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
ASP.NET jQuery 實(shí)例15 通過(guò)控件CustomValidator驗(yàn)證CheckBoxList
這節(jié)我們要講下如何通過(guò)控件CustomValidator來(lái)校驗(yàn)CheckBoxList,客戶端校驗(yàn)代碼通過(guò)jQuery實(shí)現(xiàn)2012-02-02
jQuery+PHP+Mysql實(shí)現(xiàn)抽獎(jiǎng)程序
這篇文章主要為大家詳細(xì)介紹了jQuery+PHP+Mysql實(shí)現(xiàn)抽獎(jiǎng)程序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
jquery.uploadView 實(shí)現(xiàn)圖片預(yù)覽上傳功能
圖片上傳,網(wǎng)上有好多版本,今天小編給大家分享jquery.uploadView 實(shí)現(xiàn)圖片預(yù)覽上傳功能,感興趣的的朋友一起看看吧2017-08-08
淺談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)
下面小編就為大家?guī)?lái)一篇淺談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開(kāi)發(fā)
在介紹如何擴(kuò)展jQuery之前,先大致看下jQuery源碼(以1.3.2版本為例)。2010-05-05
jQuery移動(dòng)端日期(datedropper)和時(shí)間(timedropper)選擇器附源碼下載
今天我給大家介紹一款非常有趣的日期和時(shí)間選擇器,它分為日期選擇器datedropper以及時(shí)間選擇器timedropper,他們倆尤其適合在移動(dòng)端上應(yīng)用。感興趣的小伙伴一起學(xué)習(xí)吧2016-04-04
用jquery寫的菜單從左往右滑動(dòng)出現(xiàn)
這篇文章主要介紹了用jquery寫的菜單從左往右滑動(dòng)出現(xiàn)的效果,需要的朋友可以參考下2014-04-04

