使用js动态生成海报

这几天接到一个需求，须要将一个邀请连接转换为一个带有二维码可以分享出去的海报图，网上找了不少的方法，也踩了很多的坑，但愿你们遇到相似的需求可以少走弯路。。

先来一张效果图吧：

首先我采用了qrcode的插件，使用这个插件可以生成一个二维码，而后还使用了canvas图片合成的技术。

如下为代码部分：

HTML部分

<!--头像-->
<img id="userAvatar" data-lazy="{$member['avatar']}" class="head" />
<!--名字职位-->
<p class="nickname" data-name="{$member['nickname']}">{$member['nickname']}</p>

<p class="person-position" data-companyName="{$member['companyName']} {$member['positionInfo']}">{$member['companyName']} {$member['positionInfo']} </p>
				
				

<div class="mask"></div>
<!--二维码分享海报-->
<div class="qr-code">
	<span class="pop-close icow icow-error"></span>
	<!--背景图-->
	<img id="qrcodeBgImg" style="display: none;" src="../addons/ewei_shopv2/plugin/sns/template/mobile/default/images/fenxiang.jpg" style="width: 0.1px;height: 0.1px;">
	<!--二维码-->
	<div id="code" style="display: none;"></div>
	<!--合成后的海报图-->
	<img id="img3" src="">
</div>
复制代码

JS部分：

var codeUrl = $('#copyUrl').val();
		var nickname = $('.nickname').attr('data-name');
		var personPosition = $('.person-position') .attr('data-companyName');
		
		//二维码生成
		var qr = new QRCode(code, {
			text: codeUrl,//二维码内容，能够为一个连接
			width: 60,//宽度
			height: 50,//高度
			correctLevel: 3//容错级别
		})
		
		//绘制海报分享图
		function draw() {
		    var code	= $('#code')[0],
		    	codeImg = $('#code canvas')[0],
				Avatar = userAvatar,
		   		canvas = document.createElement("canvas"),
		        context = canvas.getContext("2d");
		    
		    //获取设备像素比
			var  devicePixelRatio = window.devicePixelRatio || 1,   
				 backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1, 
				 ratio = devicePixelRatio / backingStoreRatio;	
			//获取背景图高宽
		    var CanvasBgWidth = qrcodeBgImg.width;
		    var CanvasBgHeight = qrcodeBgImg.height;
		    //canvas画布扩大， 保证可以高清显示
		    canvas.width = CanvasBgWidth  * ratio;
		    canvas.height = CanvasBgHeight  * ratio;
		    
			$(canvas).css({'width':CanvasBgWidth ,'height':CanvasBgHeight});
			$('#img3').css({'width':'16rem'});
			context.scale(ratio, ratio);
			
			//背景
		    context.drawImage(qrcodeBgImg,0,0,CanvasBgWidth,CanvasBgHeight);
		    //二维码
		    context.drawImage(codeImg,46 * ratio,325 * ratio,60 * ratio,50 * ratio);
		    //头像
			context.drawImage(Avatar,260 * ratio ,270 *ratio ,30 * ratio ,30 * ratio);
		 	//文字
		    context.fillStyle = '666';   // 文字填充颜色
		    context.font = '1rem Baoli SC';
			
		    var name_text = nickname;
			context.textAlign = 'right';
		    context.fillText(name_text,246 * ratio,280 * ratio);
			
		    var desc_1 = personPosition;
			context.textAlign = 'right';
		    context.fillText(desc_1,246 * ratio,300 * ratio);
		 
		    context.stroke();

		    // 将画布内容导出
		    var src = canvas.toDataURL();
		    img3.src = src;
		}
		
				//点击显示或隐藏分享图
		$('.share-qrcode').click(function(e) {

			$('.mask').show();
			$('.qr-code').fadeIn();
			draw();
		})
	
		$('.pop-close').click(function(e) {
			$('.mask').hide();
			$('.qr-code').fadeOut();
		})
复制代码

在获取二维码的时候请务必选择code容器内的canvas元素， 若是获取的是里面的img元素，在华为或者荣耀手机下二维码会不显示，应该是兼容问题。。