使用共用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是生成二维码的路径

然而，这种实现时，路径名中的中文字段会乱码，如何解决呢？针对这个问题，网上也有相关的解决方案，我也找到一个可以解决这个问题的方案，贴出以供参考：

 1 function toUtf8(str) {   //地址中可用中文字符 
 2     var out, i, len, c;    
 3     out = "";    
 4     len = str.length;    
 5     for(i = 0; i < len; i++) {    
 6         c = str.charCodeAt(i);    
 7         if ((c >= 0x0001) && (c <= 0x007F)) {    
 8             out += str.charAt(i);    
 9         } else if (c > 0x07FF) {    
10             out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));    
11             out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));    
12             out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
13         } else {    
14             out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));    
15             out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));    
16         }    
17     }    
18     return out;    
19 };

所以，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的渲染方式更稳定