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