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

前段時間做項目，需要動態生成一個二維碼，於是就在網上找了一下發現一個jquery插件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利用定位很容易就可以搞定它了

 

吧嗒吧嗒終於完了，今天就這些了~

--------每天進步一點點--------