js生成带logo的二维码

时间：2022-09-12 23:48:59

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

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

简述下思路

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

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

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

是不是很简单？

js生成带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);

上效果图

js生成带logo的二维码

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

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

js生成带logo的二维码

 　　　　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;

         } 
转换之后就可以用了

相关文章