js生成带logo的二维码

作为一名java程序员，一直以来都是使用服务端生成二维码，最近接触前端的设计，感觉二维码这块如果放到前端去生成，一方面可以减轻服务端的压力，访问带宽，另一方面，前端页面控制比较顺畅

闲话少叙，说下我的思路，先使用jquery.qrcode.js生成一个二维码（关于中文问题接下来讨论），由于此插件本身不支持带自定义logo的，所以差强人意吧，但是已经为我们省去不少工作，接下来的工作我们自己搞

简述下思路

先页面上准备一个logo图的img标签

用插件生成一个二维码，（canvas标签）

通过画笔将logo图片画到二维码上即可，

是不是很简单？

上代码

 //计算宽，高，中心坐标，logo大小
     var width = 200;
     var height = 200;
     var x = width * 0.4;
     var y = height * 0.4;
     var lw = width * 0.2;
     var lh = height * 0.2;
 //生成二维码
     $("#qrcodeDiv").qrcode({
         width: width,
         height:height,
         text: "http://www.baidu.com"
     });
 //画logo
     $("#qrcodeDiv canvas")[0].getContext('2d').drawImage($("#logoImg")[0], x, y, lx, ly); 

上效果图

接着刚才的中文的问题在说两句，

中文一直是程序员永久的痛，不要问怎么知道的，时间久了就会知道，关于这个可以自己进行字符转码，将utf8编码转为

 　　　　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;
         } 
转换之后就可以用了