前段时间做项目，需要动态生成一个二维码，于是就在网上找了一下发现一个jquery插件jquery.qrcode.js，所以今天就简单说一下这个插件的使用：

 

jquery.qrcode.js是依赖jquery的,所以要先引入jquery再引入jquery.qrcode.js

 

在页面上添加一个div标签，用于创建渲染区域

 

通过下面代码就可以生成一个默认256×256大小的二维码

怎么样？简单吧，从此让二维码信手拈来~

 

如果想要改变它的大小、二维码颜色、背景色怎么办？不用着急，我们可以通过配置来得到我们想要的，接下来我们就看一看它的配置：

jQuery("#qrcode").qrcode({    render: "canvas", // 渲染方式有table方式和canvas方式    width: 256,   //默认宽度    height: 256, //默认高度    text: "http://www.cnblogs.com/HtmlCss3/", //二维码内容    typeNumber: -1,   //计算模式一般默认为-1    correctLevel: 2, //二维码纠错级别    background: "#ffffff",  //背景颜色    foreground: "#000000"  //二维码颜色});

 

jquery.qrcode.js二维码内容是不支持中文的，如果出现中文，结果就是一串乱码，这个主要是两者的编码方式不一样所导致的，中文一般情况下是UTF-16格式，如果想要支持中文，那就把二维码内容统一改成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;  }

当你在配置的时候把二维码的内容转换一下就可以了~

text: utf16to8("文字内容")  //二维码内容

 

有时候呢领导可能会让你把自己公司的logo放上去，但是jquery.qrcode.js又不支持这种自定义logo，这时候肿么办呢？其实也很简单，在div里创建一个img利用定位很容易就可以搞定它了

 

吧嗒吧嗒终于完了，今天就这些了~

--------每天进步一点点--------