動態生成二維碼插件 jquery.qrcode.js

 

轉載文章  動態生成二維碼插件 jquery.qrcode.js

 

jquery.qrcode.js是依賴jquery的,因此要先引入jquery再引入jquery.qrcode.js

<script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

 

在頁面上添加一個div標籤，用於建立渲染區域

<div id="qrcode"></div>

 

經過下面代碼就能夠生成一個默認256×256大小的二維碼

<script type="text/javascript">
    jQuery('#qrcode').qrcode("http://www.cnblogs.com/HtmlCss3/");
</script>

怎麼樣？簡單吧，今後讓二維碼信手拈來~

 

若是想要改變它的大小、二維碼顏色、背景色怎麼辦？不用着急，咱們能夠經過配置來獲得咱們想要的，接下來咱們就看一看它的配置：

jQuery("#qrcode").qrcode({
    render: "canvas", // 渲染方式有table方式和canvas方式
    width: 256,   //默認寬度
    height: 256, //默認高度
    text: "http://www.cnblogs.com/HtmlCss3/", //二維碼內容
    typeNumber: -1,   //計算模式通常默認爲-1
    correctLevel: 2, //二維碼糾錯級別
    background: "#ffffff",  //背景顏色
    foreground: "#000000"  //二維碼顏色
});

 

jquery.qrcode.js二維碼內容是不支持中文的，若是出現中文，結果就是一串亂碼，這個主要是二者的編碼方式不同所致使的，中文通常狀況下是UTF-16格式，若是想要支持中文，那就把二維碼內容統一改爲UTF-8格式的，順便貼一下轉換的代碼：

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;  
}

當你在配置的時候把二維碼的內容轉換一下就能夠了~

text: utf16to8("文字內容")  //二維碼內容

 

有時候呢領導可能會讓你把本身公司的logo放上去，可是jquery.qrcode.js又不支持這種自定義logo，這時候腫麼辦呢？其實也很簡單，在div裏建立一個img利用定位很容易就能夠搞定它了