使用jquery插件qrcode生成二維碼
二維碼應(yīng)用已經(jīng)滲透到我們的生活工作當(dāng)中，您只需要用手機(jī)對著二維碼“掃一掃”即可獲得所對應(yīng)的信息，方便我們了解商家、購物、觀影等等。本文將介紹一款基于jquery的二維碼生成插件qrcode，在頁面中調(diào)用該插件就能生成對應(yīng)的二維碼。
qrcode其實是通過使用jQuery實現(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://m.fzitv.net"); //任意字符串
您也可以通過以下方式調(diào)用：
$("#code").qrcode({
render: "table", //table方式
width: 200, //寬度
height:200, //高度
text: "http://m.fzitv.net" //任意內(nèi)容
});
這樣就可以在頁面中直接生成一個二維碼，你可以用手機(jī)“掃一掃”功能讀取二維碼信息。
識別中文
我們試驗的時候發(fā)現(xiàn)不能識別中文內(nèi)容的二維碼，通過查找多方資料了解到，jquery-qrcode是采用charCodeAt()方式進(jìn)行編碼轉(zhuǎn)換的。而這個方法默認(rèn)會獲取它的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é)會靈活運用，選擇自己最喜歡的方法掌握二維碼的制作技巧。
- javaScript生成支持中文帶logo的二維碼(jquery.qrcode.js)
- 使用jquery.qrcode.js生成二維碼插件
- 使用jQuery.Qrcode插件在客戶端動態(tài)生成二維碼并添加自定義Logo
- jQuery qrcode生成二維碼的方法
- 使用jquery.qrcode.min.js實現(xiàn)中文轉(zhuǎn)化二維碼
- jquery插件qrcode在線生成二維碼
- 使用jquery組件qrcode生成二維碼及應(yīng)用指南
- 使用jquery.qrcode生成彩色二維碼實例
- 利用jquery.qrcode在頁面上生成二維碼且支持中文
- 基于jquery二維碼生成插件qrcode
相關(guān)文章
ajax jquery實現(xiàn)頁面某一個div的刷新效果
這篇文章主要給大家介紹了關(guān)于ajax jquery實現(xiàn)頁面某一個div的刷新效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
本文給大家介紹的是在EasyUI中編輯treegid的方法，并附上具體的實例，這里推薦給大家，有需要的小伙伴快來參考下吧。2015-03-03
ASP.NET jQuery 實例15 通過控件CustomValidator驗證CheckBoxList
這節(jié)我們要講下如何通過控件CustomValidator來校驗CheckBoxList,客戶端校驗代碼通過jQuery實現(xiàn)2012-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery+PHP+Mysql實現(xiàn)抽獎程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
jquery.uploadView 實現(xiàn)圖片預(yù)覽上傳功能
圖片上傳，網(wǎng)上有好多版本，今天小編給大家分享jquery.uploadView 實現(xiàn)圖片預(yù)覽上傳功能，感興趣的的朋友一起看看吧2017-08-08
淺談jQuery綁定事件會疊加的解決方法和心得總結(jié)
下面小編就為大家?guī)硪黄獪\談jQuery綁定事件會疊加的解決方法和心得總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
jQuery 學(xué)習(xí)第七課 擴(kuò)展jQuery的功能 插件開發(fā)
在介紹如何擴(kuò)展jQuery之前，先大致看下jQuery源碼（以1.3.2版本為例）。2010-05-05
jQuery移動端日期(datedropper)和時間(timedropper)選擇器附源碼下載
今天我給大家介紹一款非常有趣的日期和時間選擇器，它分為日期選擇器datedropper以及時間選擇器timedropper，他們倆尤其適合在移動端上應(yīng)用。感興趣的小伙伴一起學(xué)習(xí)吧2016-04-04
本文對jQuery工具函數(shù)進(jìn)行實例解析。需要的朋友可以參考下2016-12-12
這篇文章主要介紹了用jquery寫的菜單從左往右滑動出現(xiàn)的效果,需要的朋友可以參考下2014-04-04