JavaScript-Tool：jquery.qrcode.js

ylbtech-JavaScript-Tool：jquery.qrcode.js

 

1.返回頂部

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、

2.返回頂部

1、

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

2、

3.返回頂部

 

4.返回頂部

 

5.返回頂部

0、

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

1、

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

2、

 

6.返回頂部

 

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