图片上绘制内容，适配大小屏

h5页面中，在图片上绘制内容，并下载新图片，绘制内容的适配方法

做下记录

	posterCanvas: function(arr2, name) {
				let that = this;
				const ctx = uni.createCanvasContext("myCanvas", this);

				ctx.clearRect(0, 0, 0, 0);
				/**
				 * 只能获取合法域名下的图片信息,本地调试无法获取
				 *
				 */

				// 实际尺寸（像素）
				let dpr = uni.getWindowInfo().pixelRatio || 1;
				console.log(dpr, 'dpr', uni.getWindowInfo());
				// 

				var winWidth = uni.getSystemInfoSync().windowWidth;

				uni.getImageInfo({
					src: arr2[0],
					success(res) {
						that.canvasWidth = winWidth
						const imgWidth = res.width;
						const imgHeight = res.height;


						// 缩放后的宽高 
						var scaleWidth = that.canvasWidth;
						var scaleHeight = imgHeight * (that.canvasWidth / imgWidth);

						// 背景位置
						that.canvasHeight = Number(scaleHeight)
						console.log(that.canvasWidth, that.canvasHeight)

						let rpx = uni.getSystemInfoSync().windowWidth / 375;
						console.log(rpx, 'rpx')
						setTimeout(() => {

							// 海报位置
							ctx.drawImage(arr2[0], 0, 0, that.canvasWidth, that
								.canvasHeight
							); // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height;
							ctx.save();


							// // 业主姓名的位置
							ctx.beginPath()
							that.canvasFont(ctx, 6 * rpx, '#333', name.owner_name, 52 * rpx, 107 * rpx)

							// 洽谈时间的位置
							that.canvasFont(ctx, 6 * rpx, '#333', name.talk_time, 131 * rpx, 107 * rpx)
							// 洽谈几次的位置
							that.canvasFont(ctx, 6 * rpx, '#333', name.talk_num, that.canvasWidth - 64 *rpx, 107 * rpx)
							// 地点
							that.canvasFont(ctx, 6 * rpx, '#333', name.talk_address, that.canvasWidth - 162 *rpx, 107 * rpx)
							// 洽谈人员
							that.canvasFont(ctx, 6 * rpx, '#333', name.manager_name, 66 * rpx, 125 * rpx)
							// 楼盘地址
							that.canvasFont(ctx, 6 * rpx, '#333', name.house_address, 66 * rpx, 144 * rpx)
							// 平方
							that.canvasFont(ctx, 6 * rpx, '#333', name.scheme_num, 90 * rpx, 180 * rpx)
							// 结构
							that.canvasFont(ctx, 6 * rpx, '#333', name.structure_num, 190 * rpx, 180 * rpx)
							// ppt
							that.canvasFont(ctx, 6 * rpx, '#333', name.PPT_num, 299 * rpx, 180 * rpx)
							// 案例
							that.canvasFont(ctx, 6 * rpx, '#333', name.case_num, 90 * rpx, 198 * rpx)
							// 效果
							that.canvasFont(ctx, 6 * rpx, '#333', name.effect_num, 190 * rpx, 198 * rpx)
							// 三维
							that.canvasFont(ctx, 6 * rpx, '#333', name.space_num, 299 * rpx, 198 * rpx)
							
							// that.canvasFont(ctx, 6 * rpx, 'red', name.scheme_num, 80 * rpx, 220 * rpx)
							// that.canvasFont(ctx, 6 * rpx, 'red', name.scheme_num, 325 * rpx, 220 * rpx)

							// 其他资料
							// that.drawText(ctx, 6 * rpx, (that.canvasWidth - 110) * rpx, name.profile,
							// 	73 * rpx, 240 * rpx, 2 * rpx, true);

							

							that.fillTextWrapSelf(ctx, {
								text: name.profile, //绘制文本
								x: 80 * rpx,
								y: 220 * rpx, // 文本开始位置
								size: 6 * rpx,
								color: '#333',
								bold: false, //是否粗体
								indent: 2, //首行缩进字数
								maxWidth: (325 * rpx - 80 *rpx ), // (that.canvasWidth - 73 * rpx) - (that.canvasWidth - 325 * rpx),
								maxHeight: '', // 文本绘制范围
								lineHeight: 10 * rpx, // 行高
								vertical: 'top' //全部文本在垂直方向居中方式，默认:'top'
							})

							// // 内容
							// that.canvasTextAutoLine(ctx, 6 * rpx, 400 * rpx, name.content, 73 * rpx,
							// 	298 * rpx,
							// 	10 * rpx, true);
							that.fillTextWrapSelf(ctx, {
								text: name.content, //绘制文本
								x: 80 * rpx,
								y: 288 * rpx, // 文本开始位置
								size: 6 * rpx,
								color: '#333',
								bold: false, //是否粗体
								indent: 2, //首行缩进字数
								maxWidth:  (325 * rpx - 80 *rpx), //(that.canvasWidth - 73 * rpx) - (that.canvasWidth - 325 * rpx), // 文本绘制范围
								maxHeight: '', // 文本绘制范围
								lineHeight: 10 * rpx, // 行高
								vertical: 'top' //全部文本在垂直方向居中方式，默认:'top'
							})
							// // 优化
							// that.canvasTextAutoLine(ctx, 6 * rpx, 400 * rpx, name.optimize_content,
							// 	73 * rpx,
							// 	395 * rpx, 10 * rpx, true);
							that.fillTextWrapSelf(ctx, {
								text: name.optimize_content, //绘制文本
								x: 80 * rpx,
								y: 404 * rpx, // 文本开始位置
								size: 6 * rpx,
								color: '#333',
								bold: false, //是否粗体
								indent: 2, //首行缩进字数
								maxWidth:  (325 * rpx - 80 *rpx ), //(that.canvasWidth - 73 * rpx) - (that.canvasWidth - 325 * rpx), // 文本绘制范围
								maxHeight: '', // 文本绘制范围
								lineHeight: 10 * rpx, // 行高
								vertical: 'top' //全部文本在垂直方向居中方式，默认:'top'
							})


							// // 设计师
							// that.canvasFont(ctx, 6 * rpx, '#333', name.design_name, 175 * rpx, 495 *
							// 	rpx)



							ctx.draw(true, function() {
								uni.canvasToTempFilePath({
									canvasId: 'myCanvas',
									x: 0,
									y: 0,
									fileType: 'png',
									width: that.canvasWidth,
									height: that.canvasHeight,
									destWidth: that.canvasWidth * dpr,
									destHeight: that.canvasHeight * dpr,
									success: function(res) {
										uni.hideLoading();
										console.log(res.tempFilePath, '图片');
										that.posterImage = res.tempFilePath
										that.downloadFun(that.posterImage)

									},
									fail: function(err) {
										uni.hideLoading();
									}
								})
							});
						}, 500)
					},

					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							title: '无法获取图片信息',
							icon: 'none',
							duration: 800
						});
						// errFun && errFun(err);
						console.log(err);
					},
				});
			},
			/**
			*
			@description 绘制文本自动换行,
			兼容中英文数字 *
			@author hyf 2021.1 .26 *
			@param obj = {
				* text: '' //绘制文本
				*x,y, // 文本开始位置
				* size,
				*color,
				* bold: Boolen, //是否粗体
				* indent: Number, //首行缩进字数
				* maxWidth: Number, // 文本绘制范围
				* maxHeight: Number, // 文本绘制范围
				* lineHeight: Number, // 行高
				* vertical: 'center' //全部文本在垂直方向居中方式，默认:'top'
					*
			}
			*/
			fillTextWrapSelf(ctx, obj) {
				let {
					text,
					x,
					y,
					size,
					color,
					bold,
					indent,
					maxWidth,
					maxHeight,
					lineHeight,
					vertical
				} = obj
				// 默认值
				bold = bold || false
				indent = indent || 0
				lineHeight = lineHeight || 24
				vertical = vertical || 'top'
				ctx.save()
				ctx.setTextAlign('left')
				ctx.setTextBaseline('normal')
				ctx.setFillStyle(color)
				if (bold) {
					ctx.font = 'normal bold ' + Math.round(size) + 'px Microsoft YaHei'
				} else {
					ctx.setFontSize(size)
				}
				let textArr = text.split('')
				let rowArr = [] // 每行文本数组
				let rowText = '' // 当前行文本
				let rowWid = 0 // 当前行宽度
				let lastText = text // 最后一行文本
				for (let i = 0; i < textArr.length; i++) {
					let oMaxWidth = maxWidth
					if (rowArr.length === 0 && indent) {
						oMaxWidth = maxWidth - indent * size
					}
					rowText = rowText + textArr[i]
					rowWid = parseInt(ctx.measureText(rowText + '').width)
					if (rowWid >= oMaxWidth) {
						rowArr.push(rowText)
						lastText = lastText.substr(rowText.length)
						// 重置参数
						rowText = ''
						rowWid = 0
					}
				}
				if (lastText) rowArr.push(lastText)
				let rows = rowArr.length // 行数
				let bY = y
				if (vertical === 'center' && maxHeight > rows * lineHeight) {
					bY = y + Math.ceil((maxHeight - rows * lineHeight) / 2)
				}
				for (let i = 0; i < rowArr.length; i++) {
					let cY = bY + i * lineHeight
					if (i === 0 && indent) { // 首行缩进
						console.log(x + indent * size, cY);
						ctx.fillText(rowArr[i], x + indent * size, cY)
					} else {
						ctx.fillText(rowArr[i], x, cY)
					}
				}
				ctx.restore()
			},
			canvasFont(ctx, fs, color, txt, x, y) { //绘制文字
			// '14px Microsoft YaHei'
				ctx.font = 'normal bold ' + Math.round(fs) + 'px Microsoft YaHei'
				ctx.setFontSize(fs)
				ctx.setFillStyle(color)
				ctx.fillText(txt, x, y)
			},