0 Jquery.Qrcode簡(jiǎn)介

Jquery.Qrcode.js是一個(gè)在瀏覽器端基于Jquery動(dòng)態(tài)生成二維碼的插件，支持Canvas和Table兩種渲染方式，它的優(yōu)點(diǎn)是在客戶端動(dòng)態(tài)生成，減輕了服務(wù)端壓力，尤其是在大量使用二維碼的系統(tǒng)中。Jquery.Qrcode主要包括以下參數(shù)設(shè)置：

•render 定義二維碼的渲染方式，有table和canvas兩種渲染方式

•width 定義二維碼的寬度

•height 定義二維碼的高度

•text 定義二維碼內(nèi)容

•typeNumber 二維碼的計(jì)算模式 一般默認(rèn)為-1

•correctLevel 二維碼的糾錯(cuò)級(jí)別

•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ū)域，在頁(yè)面上添加一個(gè)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,//計(jì)算模式
correctLevel: 2,//二維碼糾錯(cuò)級(jí)別
background: "#ffffff",//背景顏色
foreground: "#000000" //二維碼顏色
});

二維碼生成如下

2 Jquery.Qrcode對(duì)中文字符的支持

默認(rèn)的Jquery.Qrcode是不支持中文編碼的，上面我們?nèi)绻麑ext的內(nèi)容設(shè)置為中文字符串，生成二維碼并掃描后會(huì)發(fā)現(xiàn)結(jié)果是亂碼。這是因?yàn)閖query.qrcode采用 charCodeAt() 方式進(jìn)行編碼轉(zhuǎn)換，默認(rèn)采用UTF-8方式編碼，而針對(duì)中文一般情況下是采用UTF-16編碼實(shí)現(xiàn)，這樣就會(huì)導(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;
};

生成二維碼時(shí)，將轉(zhuǎn)碼后的結(jié)果作為text的值即可

$("#qrCodeDiv").qrcode({
render: "canvas", // 渲染方式有table方式（IE兼容）和canvas方式
width: 260, //寬度
height: 260, //高度
text: utf16to8("漢字內(nèi)容的二維碼"), //內(nèi)容
typeNumber: -1,//計(jì)算模式
correctLevel: 2,//二維碼糾錯(cuò)級(jí)別
background: "#ffffff",//背景顏色
foreground: "#000000" //二維碼顏色
});

3 Jquery.Qrcode添加自定義Logo圖片

給二維碼添加一個(gè)自定義的logo，會(huì)讓你的二維碼看上去更專業(yè)，默認(rèn)的Jquery.Qrcode是不支持添加自定義Logo的，這里比較簡(jiǎn)單的實(shí)現(xiàn)方案就是，針對(duì)每個(gè)二維碼添加一個(gè)img標(biāo)簽，讓img在二維碼區(qū)域相對(duì)居中顯示即可。

<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下載

以上所述是小編給大家介紹的使用jQuery.Qrcode插件在客戶端動(dòng)態(tài)生成二維碼并添加自定義Logo，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論