使用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元素，在華爲或者榮耀手機下二維碼會不顯示，應該是兼容問題。。