canvas实现背景图和二维码合并-生成海报

话不多说，只是想分享踩坑的经验，若有不好，请谅解
//想看实际效果的话，可以关注公众号“捧场客”，商品详情里面分享，是海报合成，可以研究下

//若不嫌弃，可以直接拿过去复制，只需要改成自己的图片地址就行
//记住二维码需要动态计算宽高
//html代码

	<div id="qrcode">
			</div>
			<div id="canbox">
				<canvas id="myCanvas" width="" height=""> <img src=""></canvas>
			</div>
			<img class="canimg" src="" />

//引入js

这个js很重要哦，百度都有
<script src="js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>

//然后生成二维码

//这里的data是你要生成二维码的连接
		function getQrOrderFunc(data) {
					console.log('二链接:', data)
					new QRCode('qrcode', {
						text: data,
						width: 120,
						height: 120,
						correctLevel: QRCode.CorrectLevel.M

					}); // 设置要生成二维码的链接
				}

//接下来就开始画画

//画海报
				var width = document.getElementById("canbox").offsetWidth; //宽度 
				var height = document.getElementById("canbox").offsetHeight; // 高度
				var c = document.getElementById("myCanvas");
				c.width = width
				c.height = height
				var ctx = c.getContext("2d");
				//首先画上背景图
				var img = new Image();
				img.setAttribute("crossOrigin", 'Anonymous')
				img.src = imgUrl; //获取图片地址

				var devicePixelRatio = window.devicePixelRatio || 1,
					backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio ||
					ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1,
					ratio = devicePixelRatio / backingStoreRatio;


				c.width = width * ratio;
				c.height = canvasheight * ratio;
				c.style.width = width + 'px';
				c.style.height = canvasheight + 'px';
				ctx.scale(ratio, ratio);

				//进行正常的操作
				// context.drawImage()
				//画上二维码
				function convertCanvasToImage(canvas) {
					var image = new Image();
					image.src = canvas.toDataURL("image/png");
					return image;
				}
				var mycans = $('canvas')[0]; //二维码所在的canvas
				// console.log('mycans:',mycans)
				var codeimg = convertCanvasToImage(mycans)

				// console.log('codeimg:',codeimg)
				// var xw =  250.0 / 375.0 * width
				// var xh = 456.0 / 570.0 * canvasheight
				var xw = 250.0 / 375.0 * width
				var xh = 456.0 / 570.0 * canvasheight + 15
				let w = 90.0 / 375.0 * width
				if (xw + w > width) {
					xw = width - w - 20
				}
				if (xh + w > canvasheight) {
					xh = canvasheight - w
				}




				img.onload = function() { //必须等待图片加载完成
					ctx.drawImage(img, 0, 0, width, canvasheight); //绘制图像进行拉伸
					ctx.drawImage(codeimg, xw, xh, w, w);
					// alert(2)
					setTimeout(function() { //在ios上无法在画完之后取到整个画布内容，加了个settimeout
						let images = new Image();
						images.setAttribute("crossOrigin", 'Anonymous')
						var bigcan = document.getElementById("myCanvas");
						var base64 = bigcan.toDataURL("image/png");

						// alert(5)
						$('.canimg').attr('src', base64)
						// completeLoading()
						// alert(6)
						  loadingFunc.removeLoading()
					}, 0)
				}