使用javascript动态生成带有二维码的分享海报

这几天接到一个需求，需要将一个邀请链接转换为一个带有二维码能够分享出去的海报图，网上找了很多的方法，也踩了不少的坑，希望大家遇到类似的需求能够少走弯路。。

先来一张效果图吧：

首先我采用了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元素，在华为或者荣耀手机下二维码会不显示，应该是兼容问题。。

转载于:https://juejin.im/post/5d3e6b7951882565f2663ca9