使用jquery-qrcode生成二维码

二维码

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

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

而qrcode和zxing是两者都有，所以比较臃肿。

jquery-qrcode

官网：

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

引入

需要引入jquery和jquery-qrcode，这两个在static cdn上都有，直接引用就可以了，

另外还需要一段中文转码的js，一共需要引入：

        <!-- 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({});

示例

简单非中文生成二维码：

$('#test').qcode('123');

自定义配置生成二维码：

$('#test').qcode({
    text : '你好',
    type : 'cn',
    width : 100,
    height : 100
});

更多

更多文章请浏览：http://uikoo9.com/blog/list