js生成帶logo的二維碼

做爲一名java程序員，一直以來都是使用服務端生成二維碼，最近接觸前端的設計，感受二維碼這塊若是放到前端去生成，一方面能夠減輕服務端的壓力，訪問帶寬，另外一方面，前端頁面控制比較順暢

閒話少敘，說下個人思路，先使用jquery.qrcode.js生成一個二維碼（關於中文問題接下來討論），因爲此插件自己不支持帶自定義logo的，因此差強人意吧，可是已經爲咱們省去很多工做，接下來的工做咱們本身搞

簡述下思路

先頁面上準備一個logo圖的img標籤

用插件生成一個二維碼，（canvas標籤）

經過畫筆將logo圖片畫到二維碼上便可，

是否是很簡單？

上代碼

 1 //計算寬，高，中心座標，logo大小                                                                       
 2     var width = 200;                                                                      
 3     var height = 200;                                                                     
 4     var x = width * 0.4;                                                                  
 5     var y = height * 0.4;                                                                 
 6     var lw = width * 0.2;                                                                 
 7     var lh = height * 0.2;                                                                
 8 //生成二維碼                                                                                   
 9     $("#qrcodeDiv").qrcode({                                                              
10         width: width,                                                                     
11         height:height,                                                                    
12         text: "http://www.baidu.com"                                                      
13     });                                                                                   
14 //畫logo                                                                                      
15     $("#qrcodeDiv canvas")[0].getContext('2d').drawImage($("#logoImg")[0], x, y, lx, ly); 

 上效果圖

接着剛纔的中文的問題在說兩句，

中文一直是程序員永久的痛，不要問怎麼知道的，時間久了就會知道，關於這個能夠本身進行字符轉碼，將utf8編碼轉爲

 1 　　　　function utf16to8(str) {  
 2             var out, i, len, c;  
 3             out = "";  
 4             len = str.length;  
 5             for (i = 0; i < len; i++) {  
 6                 c = str.charCodeAt(i);  
 7                 if ((c >= 0x0001) && (c <= 0x007F)) {  
 8                     out += str.charAt(i);  
 9                 } else if (c > 0x07FF) {  
10                     out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
11                     out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));  
12                     out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  
13                 } else {  
14                     out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));  
15                     out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  
16                 }  
17             }  
18             return out;  
19         } 轉換以後就能夠用了