JavaScript-Tool：jquery.qrcode.js

ylbtech-JavaScript-Tool：jquery.qrcode.js

 

1.返回頂部

一、

插件描述：jquery.qrcode.js 是一個可以在客戶端生成矩陣二維碼QRCode 的jquery插件 ，使用它能夠很方便的在頁面上生成二維條碼。

如何使用它

將jquery.qrcode.min.js和jquery添加到您的網頁中

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

而後建立一個DOM元素去包含生成qr碼。

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

而後你在此容器中的添加qrcode

<script> jQuery(function(){ jQuery('#qrcode').qrcode("http://www.jq22.com"); }) </script>

就這麼簡單，您想要的二維碼就生成了。

---

進階用法

指定二維碼的生成方式：

能夠在調用函數的同時輸入想要的二維碼生成方式（table/canvas）。

//使用table生成
jQuery('#qrcode').qrcode({ render: "table", text: "http://www.jq22.com" }); //使用canvas生成
jQuery('#qrcode').qrcode({ render: "canvas", text: "http://www.jq22.com" });

指定生成二維碼的大小：

能夠在調用函數的同時輸入想要生成二維碼的寬度和高度便可指定生成的二維碼的大小。

//生成100*100(寬度100，高度100)的二維碼
jQuery('#qrcode').qrcode({ render: "canvas", //也能夠替換爲table
    width: 100, height: 100, text: "http://www.jq22.com" });

指定生成二維碼的色彩樣式：

能夠在調用函數的同時輸入想要生成二維碼的前景色和背景色便可指定生成的二維碼的色彩樣式。

//生成前景色爲紅色背景色爲白色的二維碼
jQuery('#qrcode').qrcode({ render: "canvas", //也能夠替換爲table
    foreground: "#C00", background: "#FFF", text: "http://www.jq22.com" });

中文ULR生成方法:

jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI進行轉碼

二、

2.返回頂部

一、

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利用定位很容易就能夠搞定它了

二、

3.返回頂部

 

4.返回頂部

 

5.返回頂部

0、

http://jeromeetienne.github.io/jquery-qrcode/

一、

http://www.jq22.com/jquery-info294

二、

 

6.返回頂部

 

做者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。