uni-app 画布（导出海报）

除非是本地图片，就不需要经过 上传处理getImageInfo

//图片处理
getImageInfo(url) {
				if (!url) {
					return false;
				}
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: function(image) {
							resolve(image);
						},
						fail: reject,
					})
				})
			},
//导出
generate() {
	let self=this
	let picPromise = this.getImageInfo(url)
	Promise.all([picPromise]).then(([picObj]) => {
			//初始化画布
			var ctx = uni.createCanvasContext('share', this);
			//画白色背景
			self.roundRect(ctx, 0, 0, 375, height, 0, '#fff');
			//画背景图片
			self.preventPictureDistortion(ctx, url, picObj, 14, 14, 347, 33);
			ctx.save();
			//设置字体颜色和 大小
			ctx.setFillStyle('#FFFFFF');
			ctx.font = "bold 17px Source Han Sans SC";
			//写字
			ctx.fillText(data.name, 36, 37);
			//画图
			ctx.restore();
			ctx.drawImage(topUrl,14,60,347,14)
			ctx.save();

			
			
	})
},
//画矩形
			/**
			 * 
			 * @param {CanvasContext} ctx canvas上下文
			 * @param {number} x 圆角矩形选区的左上角 x坐标
			 * @param {number} y 圆角矩形选区的左上角 y坐标
			 * @param {number} w 圆角矩形选区的宽度
			 * @param {number} h 圆角矩形选区的高度
			 * @param {number} ra 圆角的半径
			 * @param {number} color 颜色
			 */
			roundRect: function(ctx, x, y, w, h, ra, color) {
				var r = 0;
				console.log(typeof ra)
				if (typeof ra == 'string') {
					var percent = ra.substring(0, ra.length - 1);
					r = parseInt(percent * 0.01 * w);
				} else {
					r = ra;
				}
				// console.log(r, "ppp")
				// 开始绘制
				ctx.beginPath()
				// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
				// 这里是使用 fill 还是 stroke都可以，二选一即可
				ctx.setFillStyle(color)
				// ctx.setStrokeStyle('transparent')
				// 左上角
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

				// border-top
				ctx.moveTo(x + r, y)
				ctx.lineTo(x + w - r, y)
				ctx.lineTo(x + w, y + r)
				// 右上角
				ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)

				// border-right
				ctx.lineTo(x + w, y + h - r)
				ctx.lineTo(x + w - r, y + h)
				// 右下角
				ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

				// border-bottom
				ctx.lineTo(x + r, y + h)
				ctx.lineTo(x, y + h - r)
				// 左下角
				ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

				// border-left
				ctx.lineTo(x, y + r)
				ctx.lineTo(x + r, y)

				// 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
				ctx.fill()
				// ctx.stroke()
				ctx.closePath()
				// 剪切
				ctx.clip()
			},
						// 图片变形解决方案  img:绘画的图片 imageAttributes:得到图片属性 看情况可能是个数组,可以是对象  x y:图片的坐标 boxWidth:裁剪区域的宽 boxHeight:裁剪区域的高 
			preventPictureDistortion(ctx, img, imageAttributes, x, y, boxWidth, boxHeight) {
				let {
					width,
					height
				} = imageAttributes
				console.log(width, height, '图片的实际宽高')
				let imgScale = width / height // 图片的宽高比
				console.log(imgScale, '计算的图片宽高比')
				let imgW, imgH // 计算后得到图片的宽高
				let offsetW, offsetH // 绘图时需要偏移的坐标 是用来 让图片居中的 就是截取中间部分 不是从 0 0 开始截取

				imgH = boxHeight;
				imgW = imgScale * imgH;
				offsetW = (imgW - boxWidth) / 2;
				offsetH = 0 // 开始计算图片宽高 以及偏移坐标
				if (imgW < boxWidth) {
					imgW = boxWidth;
					imgH = imgW / imgScale;
					offsetH = (imgH - boxHeight) / 2;
					offsetW = 0
				}

				// 开始绘制 容纳图片的裁剪区域 
				ctx.save()
				ctx.beginPath()
				this.roundRect(ctx, x, y, boxWidth, boxHeight, 0, '#fff')
				ctx.clip()
				console.log(x - offsetW, y - offsetH, imgW, imgH)
				ctx.drawImage(img, x - offsetW, y - offsetH, imgW, imgH)
				ctx.restore()
			}