canvas画海报-解决ios不能画图问题

			function getWindowInfo() {
				var windowInfo = {};
				windowInfo.dpr = window.devicePixelRatio;
				if(window.innerWidth) {
					windowInfo.width = window.innerWidth;
				} else {
					windowInfo.width = document.body.clientWidth;
				}
				return windowInfo;
			}
			
			//拿到数据后开始画背景大图 想法很简单就是把图片画到canvas中然后在画布上再画头像文字让后转成img
			function drawCanvasBgImg(bg) {
				var vm = this;
				var canvas = document.createElement("canvas");
				var ctx = canvas.getContext("2d");
				var clientWidth = getWindowInfo().width; //获取屏幕宽度用于canvas宽度自适应移动端屏幕
				var dpr = getWindowInfo().dpr;
				ctx.globalCompositeOperation = "source-atop"; //** 坑锯齿感觉没什么用不知道是不是用错地方了 **
				canvas.width = dpr * clientWidth; //由于手机屏幕时retina屏,都会多倍渲染,用dpr来动态设置画布宽高,避免图片模糊
				canvas.height = dpr * clientWidth * 609 / 375;
				var img = new Image();
				img.crossOrigin = "Anonymous"; //死坑的图片跨域 (img.crossOrigin = "Anonymous"这种写法还是不能显示base64格式图片)
				img.src = "./images/post.png";
				img.onload = function() {
					ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
					drawCanvasUserImg(canvas, ctx, dpr, canvas.width, canvas.height,bg);
				}
			}
			
			function drawCanvasUserImg(canvas, ctx, dpr, canwidth, canheight,bg) {
							var vm = this;
							var img = new Image();
							img.crossOrigin = 'Anonymous';
							img.src = bg;
							var w = canwidth / 10;
							var h = canheight / 10;
							img.onload = function() {
								ctx.save(); // 保存当前ctx的状态
								//画二维码
								ctx.drawImage(img, canwidth - 7.95 * w, canheight - 1.95 * h, 2 * w, 1.3 * h); // 在刚刚裁剪的园上画图
								ctx.restore(); // 还原状态
								drawCanvasUserImg2(canvas, ctx, dpr, canwidth, canheight);
							}
			}
			
			// 在背景图片的画布上截取一个圆然后填充入用户头像
			function drawCanvasUserImg2(canvas, ctx, dpr, canwidth, canheight) {
				var imgSrc = canvas.toDataURL("image/jpeg");
				var img = document.getElementById('avatar');
				img.setAttribute('src', imgSrc);
			}

猜你喜欢

转载自blog.csdn.net/qq_27064559/article/details/84762712