uni-app将两张图片合成一张

321 阅读1分钟

1、HTML部分

<view class="poster" id="canvas"> <img id="avatar" /> </view>

2、js部分

`import { qrcanvas } from "qrcanvas" const drawAndShareImage = () => { let url = 'XXX.com' nextTick(() => { let qrc = qrcanvas({ data: url, size: 400, }); //生成二维码 let imgsrc = qrc.toDataURL("image/png") state.qrcodeImg = imgsrc

				var canvas = document.createElement("canvas");
				canvas.width = 640;
				canvas.height = 990;
				var context = canvas.getContext("2d");
				context.rect(0, 0, canvas.width, canvas.height);
				context.fillStyle = "transparent";
				context.fill();
				var myImage = new Image();
				myImage.crossOrigin = 'Anonymous';
				myImage.src = '../../static/img/poster.png'  //背景图片 本地,线上的都可以,线上的注意放开跨域
			
				const scale = window.devicePixelRatio; //定义任意放大倍数 支持小数
				let u = navigator.userAgent;
				let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
				let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				let imgW = 640 * scale
				let imgH = 990 * scale

				let img2X = 240 * scale
				let img2Y = 750 * scale
				let imgWH = 500 * scale
                
                //实践让我ios和安卓要区分尺寸
				if (isiOS) {
					imgW = 640
					imgH = 990
					img2X = 220
					img2Y = 720
					imgWH = 180
				}   

				myImage.onload = function() {
					context.drawImage(myImage, 0, 0, imgW, imgH);
					/* context.font = "60px Courier New";
					context.fillText("我是文字", 350, 450); */
					var myImage2 = new Image();
					myImage2.src = state.qrcodeImg; 
					myImage2.crossOrigin = 'Anonymous';
					myImage2.onload = function() {
						context.drawImage(myImage2, img2X, img2Y, imgWH, imgWH);
						var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
						var img = document.getElementById('avatar');
						img.setAttribute('src', base64);
					}
				}

			});

		}`