二維碼生成插件（jquery.qrcode.js）說明文檔

jquery.qrcode.js 是一個純瀏覽器用於生成二維碼圖片的插件，生成的 QRcode 無需下載圖片，而且不依賴第三方服務,下面插件使用的是壓縮版本，大小不超過4K

qrcode.js 是實現二維碼數據計算的核心類，

jquery.qrcode.js 是把它用jquery方式封裝起來的，用它來實現圖形渲染，其實就是畫圖（支持canvas和table兩種方式）默認是canvas，canvas方式還支持右鍵圖片下載

使用方法（jquery.qrcode.min.js）-----輕量級實現方式，減小圖片IO,節省流量

載入 JavaScript 文件

1 <script src="jquery.qrcode.min.js "></script>     //二維碼生成插件庫
2 <script src="jquery.js "></script>                //jquery庫

View Code

DOM結構

<div id="qrcode"></div>                        //生成二維碼容器

調用

 1 <script>
 2       //jquery-qrcode這個庫是採用 charCodeAt() 這個方式進行編碼轉換的，這個方法默認會獲取它的 Unicode 編碼，通常的解碼器都是採用UTF-8, ISO-8859-1等方式。
 3       //英文是沒有問題，若是是中文，通常狀況下Unicode是UTF-16實現，長度2位，而UTF-8編碼是3位，這樣二維碼的編解碼就不匹配了。
 4       //解決方式固然是，在二維碼編碼前把字符串轉換成UTF-8，具體代碼以下：
 5       function utf16to8(str) {
 6           var out, i, len, c;
 7           out = "";
 8           len = str.length;
 9           for (i = 0; i < len; i++) {
10               c = str.charCodeAt(i);
11               if ((c >= 0x0001) && (c <= 0x007F)) {
12                   out += str.charAt(i);
13               } else if (c > 0x07FF) {
14                   out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
15                   out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
16                   out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
17               } else {
18                   out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
19                   out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
20               }
21           }
22           return out;
23       }
24    
25           jQuery('#qrcode').qrcode({
26               render: "canvas",//設置渲染方式(有兩種方式 table和canvas，默認是canvas）  
27               text: utf16to8("gyc://gyyx.cn/108319270eb7fecb321654c0?s=測試文字"),
28               width: 161,
29               height: 161,
30               background: "#ffffff",//背景顏色  
31               foreground: "#000000", //前景顏色
32               correctLevel :0,//糾錯等級 
33           });
34 </script>

View Code

使用方法（qrcode.js）------重量級實現方式，對於簡單應用來說開發成本較高

載入 JavaScript 文件

1 <script src="jquery.qrcode.min.js "></script>     //二維碼生成插件庫

View Code

DOM結構

1 <div id="qrcode"></div>                        //生成二維碼容器

View Code

調用

 1  <script>
 2      // 簡單方式
 3 new QRCode ( document.getElementById ( 'qrcode' ) , 'your content' );
 4 // 設置參數方式
 5 var qrcode = new QRCode ( 'qrcode', {
 6                     text: 'your content',
 7                     width: 256,
 8                     height: 256,
 9                      colorDark : '#000000' , //前景色
10                      colorLight : ' #ffffff ' , //背景色
11                     correctLevel : QRCode.CorrectLevel.H  //糾錯等級
12 });
13 // 使用 API
14 qrcode.clear();  //清除二維碼。（僅在不支持 Canvas 的瀏覽器下有效）
15 qrcode.makeCode('new content');   //設置二維碼內容，生成二維碼
16 </script>

View Code

前方高能，避免入坑  (⊙o⊙)

 

• 使用的qrcode插件庫不一樣，調用使用方法不一樣，在項目開發中必定要注意本身使用的是哪一個，避免出現引用插件和調用方式不一樣形成的開發錯誤，好比無二維碼生成、腳本報錯（文檔開始進行了詳細的講解和對比）
• 二維碼包含的信息太長，致使二維碼識別度過低掃不出來，建議文本二維碼的文字數量不超過150字（低端手機也能掃描）
• 二維碼編碼前把字符串轉換成UTF-8，避免參數存在中文時形成的不識別
• 容錯率參數設置

 二維碼容錯率便是指二維碼圖標被遮擋多少後，仍能夠被掃描出來的能力。容錯率越高，則二維碼圖片能被遮擋的部分越多。

容錯的原理是二維碼在編碼過程當中進行了冗餘，就像是123被編碼成123123，這樣只要掃描到一部分二維碼圖片，二維碼內容仍是能夠被所有讀到。

大多數狀況下，咱們強烈建議採用30%的容錯率（對目前主流手機，在絕大多數掃描場景下，容錯率越高，越容易被快速掃描!!!）

1.   qrcode.js

correctLevel : QRErrorCorrectLevel.L,  （7%）

correctLevel : QRErrorCorrectLevel.M, （15%）

correctLevel : QRErrorCorrectLevel.Q, （25%）

correctLevel : QRErrorCorrectLevel.H, （30%）

2.    jquery.qrcode.min.js

correctLevel :1,

correctLevel :0,

correctLevel :3,

correctLevel :2,

• 二維碼美化之顏色搭配（避免背景色和底圖融合，致使掃描不出來二維碼）

二維碼掃描器是根據條碼的顏色反差 (Color Contrast) 而識別，所以以黑白顏色配搭效果最好

二維碼美化的顏色搭配，前景色和背景色過於相近也會致使二維碼沒法掃描，二維碼的前景色必須比背景色更深