现在,二维码在我们生活中出现的频率越来越高,购物、看电影等等很多地方都会用的。今天发现一款用jQuery生成二维码的小插件–jquery.qrcode.js,分享给大家。
jquery.qrcode.js是一款专门为浏览器生成二维码的jQuery小插件。它能让你方便的为网页添加二维码。它是独立的,gzip压缩后只有4k大小,并且不需要下载图片。它其实是通过使用jQuery实现图形渲染、画图,支持canvas(HTML5)和table两种方式,您可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码。
使用方法
1. 引入jQuery库文件及jquery-qrcode插件
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script>
2. 在页面中创建一个DOM元素,用来显示生成的二维码,比如我们创建下面的div
:
<div id="qrcode"></div>
3. 调用 jquery-code 生成二维码
$('#qrcode').qrcode("https://9iphp.com");
生成的二维码如下:
同时,jquery-code 还提供了一些其他参数,供我们定制不同的样式。默认参数如下,我们可以修改其值来生成不同样式的二维码。
$('#qrcode').qrcode({ render: 'canvas', // 可选 "table" 和 "canvas" width: 256, height: 256, text: 'https://9iphp.com', //二维码内容 typeNumber : -1, //计算模式 correctLevel : 2, //纠错等级 background : "#ffffff", //背景颜色 foreground : "#000000" //前景颜色 });
4. 添加中文支持
其实上面的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; }
之后,我们在生成二维码前,把要生成的字符串先转换下编码就可以了。如下:
$('#qrcode').qrcode(utf16to8("就爱PHP"));
最后附带一个 UTF-8 转 UTF-16 编码的js方法:
function utf8to16(str) { var out, i, len, c; var char2, char3; out = ""; len = str.length; i = 0; while (i < len) { c = str.charCodeAt(i++); switch (c >> 4) { case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7: // 0xxxxxxx out += str.charAt(i - 1); break; case 12: case 13: // 110x xxxx 10xx xxxx char2 = str.charCodeAt(i++); out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F)); break; case 14: // 1110 xxxx 10xx xxxx 10xx xxxx char2 = str.charCodeAt(i++); char3 = str.charCodeAt(i++); out += String.fromCharCode(((c & 0x0F) << 12) | ((char2 & 0x3F) << 6) | ((char3 & 0x3F) << 0)); break; } } return out; }