JS生成二维码，支持中文字符

 

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

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

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

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

支持的功能主要有：

 

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({width:200,height:200,correctLevel:0,text:content});

 

 经过简单实践，

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

 

二、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;
}

 

 

参考：

https://github.com/jeromeetienne/jquery-qrcode

http://www.onicos.com/staff/iz/amuse/javascript/expert/utf.txt

评论

6 楼 sp42 2014-09-24  

LZ不仅技术好，而且文笔不错啊

5 楼 Louis_in_VW 2013-04-09  

太感谢了.我在自己的文章里引用了你的方法.谢谢~

4 楼 suflow 2013-01-10  

上面第一点有点错误，其实4x4是16个td，但是只要画一个就可以了，优化过后，ie6可以达到200ms～300ms，你可以尝试一下，用户根本不会感知到慢

3 楼 mailcatch 2013-01-09  

呵呵，谢谢博主的说明，这几天在ie上缩小二维码尺寸测试了一下，ie6的渲染还是太慢，极大的阻碍了页面的显示。真是无语。
后来又试用了一下http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/，用js生成Data URI的二维码，ie7和ie8速度可以接受了，但ie6还是只能table，真是没办法。
最后只能决定用mobil.qq.com的第三方来生成二维码，无法定制参数，但速度较快，而且不挑浏览器，默认utf8编码。

2 楼 suflow 2013-01-09  

mailcatch 写道

非常感谢博主的介绍。可惜的是ie6-8只支持table渲染方式。
1.请博主能否详细说说优化table渲染的方法，希望不要只是把尺寸设置小一些，呵呵。
2.我在js方面比较白痴，博主能否说明一下转码的代码如何使用？
谢谢！

可以从两方面入手：
一、单元格的合并，比如一个标准单元格是4x4（px），原本需要4个td，但是实际上你可以只画一个td，只需设置一下 width和height就可以了
二、table生成方式，默认是一个一个td tr节点append上去的，你可以先渲染组装完table，最后一次性append

1 楼 mailcatch 2013-01-06  

非常感谢博主的介绍。可惜的是ie6-8只支持table渲染方式。
1.请博主能否详细说说优化table渲染的方法，希望不要只是把尺寸设置小一些，呵呵。
2.我在js方面比较白痴，博主能否说明一下转码的代码如何使用？
谢谢！