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