二维码相关知识

1、关于前景色和背景色：

　　二维码的背景色的设置一定要比前景色和定位点的颜色要浅

2. 包含的文字内容建议不超过150个汉字（为了低端手机也能扫描）

3. 制作带二维码图片时应该生成高纠错等级的图片，嵌入的图片不能超过二维码图案的30%

毕业设计要求完成：

能够方便地根据输入信息自动生成二维码图片。

可以根据需要自由设置二维码的前景色、背景色；

可以随意调节二维码分布的密集程度；

可以设置二维码外围四周静区的大小。

二维码中间的标签可以是文字，其颜色、字体均可设置；也可以是图片，图片大小可以设置。

二维码

Java方面二维码相关工具大概有qrcode和zxing，

但是一般来说应用二维码比较多的是生成，扫描用的比较少，

而qrcode和zxing是两者都有，方法比较多。

（ZXing是一个开放源码的，用Java实现的多种格式的1D/2D条码图像处理库，它包含了联系到其他语言的端口。Zxing可以实现使用手机的内置的摄像头完成条形码的扫描及解码。）

一、使用jquery-qrcode生成二维码

说明：jquery的一个插件，jquery-qrcode可以利用js生成二维码，效果不错。这里做一下封装，让使用起来更简单。

先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），

qrcode.js 是实现二维码数据计算的核心类，

jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和table两种方式）

1.支持的功能主要有：

text     : "https://github.com/jeromeetienne/jquery-qrcode"  //设置二维码内容  
 

render   : "canvas",//设置渲染方式  
width       : 256,     //设置宽度  
height      : 256,     //设置高度  
typeNumber  : -1,      //计算模式  
correctLevel    : QRErrorCorrectLevel.H,//纠错等级  
background      : "#ffffff",//背景颜色  
foreground      : "#000000" //前景颜色

jQuery('#output').qrcode({200,height:200,correctLevel:0,text:content});

使用canvas方式渲染性能还是非常不错的，但是如果用table方式，性能不太理想，特别是IE9以下的浏览器，所以需要自行优化一下渲染table的方式，这里就不细述了。

<!-- jquery-1.11.1 -->  
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>  
<!-- jquery-qrcode -->  
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>  
<!-- 中文转码 -->  
<script type="text/javascript">  
    function qcodetochar(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;  
    };  
</script>

封装:封装是为了更好的使用，可以直接传str或者一个配置对象，具体如下

/**  
 * 生成二维码 
 * text：待生成文字 
 * type：中文还是英文，cn为中文 
 * render：展示方式，table为表格方式 
 * width：宽度 
 * height：高度 
 * 注：需要引入<@jsfile 'qrcode'/> 
 */  
$.fn.qcode = function(options){  
    if(options){  
        var opt = {};  
        if(typeof options == 'string'){  
            opt.text = options;  
        }else{  
            if(options.text) opt.text = options.text;  
            if(options.type && options.type == 'ch') opt.text = qcodetochar(opt.text);  
            if(options.render && options.render == 'table') opt.render = options.render;  
            if(options.width) opt.width = options.width;  
            if(options.height) opt.height = options.height;  
        }  
  
        $(this).qrcode(opt);  
    }  
};

使用

1.页面需要一个div，并给一个id

2.$('#test').qcode({});

3.　jquery.qrcode.js 是一个纯浏览器生成 QRcode 的 jQuery 插件，它使用非常简单，生成的 QRcode 无需下载图片，并且不依赖第三方服务，比如最近 Google 服务在国内访问不稳就造成我好几个网站的 QRcode 不能使用，并且压缩之后大小小于 4K。

<1. 加载 jQuery 和 jquery.qrcode.js：

<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<2. 创建一个用于包含 QRcode 图片的 DOM 元素，比如 div：

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

<3. 然后通过下面代码生成 QRcode：

jQuery('#qrcode').qrcode("http://blog.wpjam.com");

<4. 默认生成的二维码大小是 256×256，当然可以自定义大小：

jQuery('#qrcode').qrcode({width: 64,height: 64,text: "http://blog.wpjam.com"})


jquery.qrcode.js演示
1. Canvas 方式渲染

2. Table 方式渲染，并加了 1px 描边。

二、JS生成中文二维码

其实上面的js有一个小小的缺点，就是默认不支持中文。

这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，

而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，

英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。

解决方式当然是，在二维码编码前把字符串转换成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;  
}