生成二维码,并添加中央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);

posted @ 2017-04-24 19:43  breathxin  阅读(628)  评论(0编辑  收藏  举报