使用jQuery.Qrcode插件在客戶端動態(tài)生成二維碼并添加自定義Logo
0 Jquery.Qrcode簡介
Jquery.Qrcode.js是一個在瀏覽器端基于Jquery動態(tài)生成二維碼的插件，支持Canvas和Table兩種渲染方式，它的優(yōu)點是在客戶端動態(tài)生成，減輕了服務(wù)端壓力，尤其是在大量使用二維碼的系統(tǒng)中。Jquery.Qrcode主要包括以下參數(shù)設(shè)置：
•render 定義二維碼的渲染方式，有table和canvas兩種渲染方式
•width 定義二維碼的寬度
•height 定義二維碼的高度
•text 定義二維碼內(nèi)容
•typeNumber 二維碼的計算模式 一般默認(rèn)為-1
•correctLevel 二維碼的糾錯級別
•background 定義二維碼的背景顏色
•foreground 定義二維碼的前景色
1 Jquery.Qrcode基本使用
1.0 添加相關(guān)引用
Jquery.Qrcode僅僅依賴于Jquery，所以我們只需要添加Jquery及Jquery.Qrcode的引用即可。
<script src="~/Content/js/jquery-2.1.4.min.js"></script> <script src="~/Content/js/jquery.qrcode.min.js"></script>
1.1 添加渲染區(qū)域元素
Jquery.Qrcode使用div元素作為渲染的目標(biāo)區(qū)域，在頁面上添加一個div標(biāo)簽。
<div id="qrCodeDiv"> </div>
1.2 二維碼生成
$("#qrCodeDiv").qrcode({
render: "canvas", // 渲染方式有table方式（IE兼容）和canvas方式
width: 260, //寬度
height: 260, //高度
text: "www.baidu.com", //內(nèi)容
typeNumber: -1,//計算模式
correctLevel: 2,//二維碼糾錯級別
background: "#ffffff",//背景顏色
foreground: "#000000" //二維碼顏色
});
二維碼生成如下
2 Jquery.Qrcode對中文字符的支持
默認(rèn)的Jquery.Qrcode是不支持中文編碼的，上面我們?nèi)绻麑ext的內(nèi)容設(shè)置為中文字符串，生成二維碼并掃描后會發(fā)現(xiàn)結(jié)果是亂碼。這是因為jquery.qrcode采用 charCodeAt() 方式進行編碼轉(zhuǎn)換，默認(rèn)采用UTF-8方式編碼，而針對中文一般情況下是采用UTF-16編碼實現(xiàn)，這樣就會導(dǎo)致亂碼的出現(xiàn)，解決方案就是在二維碼編碼前，將二維碼的內(nèi)容字符串轉(zhuǎn)換成UTF-8格式，js轉(zhuǎn)換方法如下。
function utf16to8(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;
};
生成二維碼時，將轉(zhuǎn)碼后的結(jié)果作為text的值即可
$("#qrCodeDiv").qrcode({
render: "canvas", // 渲染方式有table方式（IE兼容）和canvas方式
width: 260, //寬度
height: 260, //高度
text: utf16to8("漢字內(nèi)容的二維碼"), //內(nèi)容
typeNumber: -1,//計算模式
correctLevel: 2,//二維碼糾錯級別
background: "#ffffff",//背景顏色
foreground: "#000000" //二維碼顏色
});
3 Jquery.Qrcode添加自定義Logo圖片
給二維碼添加一個自定義的logo，會讓你的二維碼看上去更專業(yè)，默認(rèn)的Jquery.Qrcode是不支持添加自定義Logo的，這里比較簡單的實現(xiàn)方案就是，針對每個二維碼添加一個img標(biāo)簽，讓img在二維碼區(qū)域相對居中顯示即可。
<img id="qrCodeIco" src="~/images/logo.png" style="position: absolute;width: 30px; height: 30px;" />
控制img標(biāo)簽的位置
var margin = ($("#qrCodeDiv").height() - $("#qrCodeIco").height()) / 2; //控制Logo圖標(biāo)的位置
$("#qrCodeIco").css("margin", margin);
最終結(jié)果如下
以上所述是小編給大家介紹的使用jQuery.Qrcode插件在客戶端動態(tài)生成二維碼并添加自定義Logo，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
用jQuery技術(shù)實現(xiàn)Tab頁界面之二
這個tab頁是把數(shù)據(jù)全部取回來再顯示，所以沒有數(shù)據(jù)緩存的特點。但是因為數(shù)據(jù)全部是顯示的html代碼，所以對搜索引擎是友好的，也許對seo有好處。2009-09-09
jQuery簡單實現(xiàn)QQ空間點贊已經(jīng)取消點贊
這篇文章主要介紹了jQuery簡單實現(xiàn)QQ空間點贊已經(jīng)取消點贊的代碼，非常的好用，這里推薦給大家，有需要的小伙伴參考下。2015-04-04
jQuery的事件模塊是較復(fù)雜的，前面僅僅提到了對事件對象的包裝。即統(tǒng)一了一些兼容性的問題。這篇會綜述下jQuery的整個事件模塊。2011-06-06
下面小編就為大家?guī)硪黄猨query之別踩白塊游戲的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-07-07
在VS2008中jQuery無智能感應(yīng)的修改方法，需要的朋友可以參考下。2010-12-12
本文給大家介紹jquery選擇器的相關(guān)知識，并通過案例給大家介紹jquery知識，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
下面小編就為大家?guī)硪黄猨query獲取form表單input元素值的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jqeury-easyui-layout問題：當(dāng)把class=“easyui-layout”寫在一個獨立的div中時，layout的樣式無法顯示，具體示例如下2014-03-03
jquery中show()、hide()和toggle()用法實例
這篇文章主要介紹了jquery中show()、hide()和toggle()用法,以實例形式分析了show()、hide()和toggle()在顯示、隱藏及切換等應(yīng)用技巧,需要的朋友可以參考下2015-01-01
本篇文章小編將為大家介紹，在jQuery中實現(xiàn)動畫效果的基本操作介紹，需要的朋友可以參考一下2013-04-04