使用共用js實現二維碼的生成，讓二維碼直接在頁面中顯示

一、前期的准備工作

首先jquery.min.js，jquery.qrcode.min.js這兩個js是必須要加的，而且在頁面中加載的順序也要是這樣：jquery.min.js必須在前，因為jquery.qrcode.min.js中用到前一個js中的方法。jquery.qrcode.min.js將生成二位的方法封裝起來，用它來實現圖形渲染，其實就是畫圖（支持canvas和table兩種方式）

兩個js下載的官網地址：https://github.com/jeromeetienne/jquery-qrcode

二、js實現二維碼

在jsp頁面中：

<div class="two-dimensionCode-state text-center">
            <div id="qrcode"></div>
            <div class="form-group">
             可截圖分享或用手機掃描二維碼查看
             </div>
 </div>

在js中：
$('#qrcode').qrcode(realPath); //生成二維碼，realPath是生成二維碼的路徑

然而，這種實現時，路徑名中的中文字段會亂碼，如何解決呢？針對這個問題，網上也有相關的解決方案，我也找到一個可以解決這個問題的方案，貼出以供參考：

function toUtf8(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;    
};

所以，js中的應用：

var path="http://192.168.1.1:8080/pc/download";
var realPath=toUtf8(path);
$('#qrcode').qrcode(realPath);    //生成二維碼

js生成二維碼內容擴展：

var path="http://127.1.1.1:8080/pc/dowmload";
var realPath=toUtf8(path);
$("qrcode").qrcode(
    text : realpath  //設置二維碼內容  
    render : "canvas",//設置渲染方式  
    width : 256,     //設置寬度,默認生成的二維碼大小是 256×256
    height : 256,     //設置高度  
    typeNumber : -1,      //計算模式  
    correctLevel : QRErrorCorrectLevel.H,//糾錯等級  
    background : "#ffffff",//背景顏色  
    foreground : "#000000" //前景顏色  
);

 

對於該種生成二維碼，如何存儲這些數據呢？可以根據需要進行存儲。

重點：對於生成二維碼的地址進行解析：

var path="http://192.168.1.1:8080/pc/download";

解析：192.168.1.1是域名（在cmd中使用ipconfig進行查詢，有線或者無線的域名）,

注意：

①如果是內網的無線，掃描二維碼的手機（連接的無線網）要與二維碼的域名相同；

②如果二維碼域名是內網有線，掃描二維碼的手機連接的無線可以是內部任意無線；

③如果二維碼域名是外網，掃描二維碼的手機可以是連接的任意網絡

前兩者介紹主要為了是針對公司內部人員測試所用。

 三、jquery.qrcode.min.js效果展示

1.Canvas 方式渲染

2. Table 方式渲染，並加了 1px 描邊。

相對比之下，canvas的渲染方式更穩定