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