如何使用 jQuery.qrcode.js 生成二维码

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

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

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

因为涉及到了，中文转码和浏览器版本的区分模式，所以封装起来方便大家应用：

第一步：引入核心类库

<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="../jquery.qrcode.min.js"></script>

第二部：二维码工厂

var qrcodeFactory = (function(){

var chineseRegular = /^[\u4e00-\u9fa5]+$/;

function qrcode(obj,config){
if(!!config && !!config.text && chineseRegular.test(config.text)){
config.text = utf16to8(config.text);
}

obj.qrcode({
text : config.text,
render : getRenderMethod(),
width : config.width || 256, //设置宽度
height : config.height || 256, //设置高度
typeNumber : config.typeNumber || -1, //计算模式
correctLevel : config.correctLevel || 1,//纠错等级
background : config.background || "#ffffff",//背景颜色
foreground : config.foreground || "#000000" //前景颜色
});
}

function getRenderMethod(){
var browser = getBrowserVersion();
if(!!browser.msie && browser.version <= 9){
return "table"
}
return "canvas";
}

function getBrowserVersion(){ //判断浏览器类型
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
return {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
}

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

return {
qrcode:qrcode
}
})();

第三步：使用
qrcodeFactory.qrcode(jQuery('#output'),{
text : "http://www.baidu.com", //设置二维码内容
width : 256, //设置宽度
height : 256, //设置高度
typeNumber : -1, //计算模式
correctLevel : 1,//纠错等级
background : "#ffffff",//背景颜色
foreground : "#000000" //前景颜色
});