生成二维码,并添加中央logo图功能
接着上次的小功能,在这个基础上添加logo
1.网上查资料,看了几个解决办法,一种是添加一个img,然后拿这个img相对二维码做居中,有点像两张图片叠在一起的样子。在电脑上或许能解决问题,但在微信中保存的图片会有问题,所以我看了下就没选这种方法
2.也是从第一个方法来的,我在想有没有能把两个img整合生成一个img的方法,结果还真找到了,通过canvas,可以将两个img拼成一个,绘到一起,然后再通过上次那个将canvas转回img的方法达到需求
html部分
<div id="code" style="display:none"></div>
<div style="margin: 0 auto; width: 256px; padding-top: 35px;">
<img id="qrCodeIco" src="../img/logo.png" style="display:none"/>
<img id="qrCodeS" >
</div>
中间隐藏的是logo图
js部分
var imgData = [image.src, $("#qrCodeIco")[0].src];
base64 = [];
var c = document.createElement('canvas'),
ctx = c.getContext('2d'),
len = imgData.length;
c.width = 250;
c.height = 250;
//canvas绘制
ctx.rect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff';
ctx.fill();
function drawing(n) {
if(n < len) {
var img = new Image;
img.src = imgData[n];
img.onload = function() {
if(n == 1) {
//递归后n=1,绘制上面一层的图片
ctx.drawImage(img, 85, 85, 80, 80);
} else {
// n=0时,绘制最底层的图片
ctx.drawImage(img, 0, 0, c.width, c.height);
}
drawing(n + 1); //递归
}
} else {
//保存生成作品图片
base64.push(c.toDataURL("image/jpeg", 0.8));
document.getElementById('qrCodeS').src=base64[0];
}
}
drawing(0);
我说来不及,你就不学了么?