使用jquery-qrcode生成二维码

来源：互联网发布：php开源项目管理系统编辑：程序博客网时间：2024/04/30 04:48

二维码

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

1 0