uniapp 之绘制海报 并适应机型

　　之前绘制的海报出现的问题：

　　　　① 海报有一角圆角没体现出来

　　　　② 海报内容随机型，变动到其他位置（并不是想要的地方）

　　针对于这个问题进行修改

　　注意：海报设置的宽度与你canvas给的标签的宽高是保持一致，下面图片为完成的海报图

 

 

 

 

　　一、设置海报的初始化宽高，这个需要在小程序的onReady生命周期去执行

　　　　setCanvasSize() {
				const resScreen = uni.getSystemInfoSync();
				const screenWidth = resScreen.screenWidth; // 屏幕宽度
				const screenHeight = resScreen.screenHeight; // 屏幕高度

				// 375*752
				let pxWidthRatio = screenWidth / 375;
				let pxHeightRatio = screenHeight / 752

				this.boxWidth = this.boxWidth * pxWidthRatio
				this.boxHeight = this.boxHeight * pxHeightRatio

				this.canvasContext = uni.createCanvasContext('firstCanvas', this, this.boxWidth, this.boxHeight);
			},

 

　　二、绘制海报

　　　　　　　// 绘制图片
			captureViewAsImage() {
　　　　　　　　　// 获取设备的宽高 
				const screenWidth = uni.getSystemInfoSync().screenWidth;
				const screenHeight = uni.getSystemInfoAsync().screenHeight;

				// 获取canvas上下文对象
				const pxRatio = screenWidth / 750;
				const width = this.boxWidth * pxRatio; // canvas宽度
				const height = this.boxHeight * pxRatio; // canvas高度
				const canvasBox = this.canvasContext
				const borderRadius = 20; // 圆角半径

				// 绘画圆角矩形
				this.clipRectangle(canvasBox, width, height, borderRadius * pxRatio)

				// 绘制当前图片
				uni.getImageInfo({
					src: 分享的图片地址,
					success: res => {
						const imgWidth = res.width; // 原始图片宽度
						const imgHeight = res.height; // 原始图片高度
						const targetWidth = 340; // 目标宽度

						// 根据目标高度计算等比例的宽度
						const targetHeight = Math.floor((imgHeight / imgWidth) * targetWidth);

						canvasBox.drawImage(res.path, 0, 0, targetWidth, targetHeight);

						// 绘制底部白色区域
						const whiteHeight = 190; // 底部白色区域的高度
						canvasBox.fillStyle = '#fff'; // 设置填充颜色为白色
						canvasBox.fillRect(0, height - whiteHeight * pxRatio, width, whiteHeight * pxRatio);

						// 绘制Logo图片
						canvasBox.drawImage('logo图片', 14, (this.boxHeight -
							364) * pxRatio, 63, 63);

						// 绘制二维码
						canvasBox.drawImage('二维码图片', (width + 130) * pxRatio, (
							this.boxHeight - 166) * pxRatio, 63, 63);

						// 绘制文字
						canvasBox.setFontSize(17);
						canvasBox.setFillStyle('#333');
						canvasBox.font = '600 17px PingFangSC, PingFangSC-Regular'
						canvasBox.fillText('您自己小程序名称', 14, (this.boxHeight - 106) * pxRatio);
						canvasBox.setFontSize(12);
						canvasBox.font = '500 12px PingFangSC, PingFangSC-Regular'
						canvasBox.fillText('辅助描述文字', 14, (this.boxHeight - 56) * pxRatio);

						// 调用draw方法进行绘图
						canvasBox.draw(true, () => {
							// 将绘制结果保存为图片
							uni.canvasToTempFilePath({
								canvasId: 'firstCanvas',
								success: res => {
									this.isLoading = false
									console.log('生成图片成功', res.tempFilePath);
　　　　　　　　　　　　　　　　　　　　　　// 微信自带的分享功能
									wx.showShareImageMenu({
										path: res.tempFilePath,
										success: res => {
											console.log("success:", res);
											this.isShowShare = false
										},
										// 取消
										fail: err => {
											console.log("fail:", err);
											this.isShowShare = false
										}
									})
								},
								fail: err => {
									console.log('生成图片失败', err);
								}
							}, this)
						});
					}
				})
			},

　　

 　　三、海报图进行剪切

　　　　　　clipRectangle(canvasBox, width, height, borderRadius) {
				// 绘制圆角矩形路径
				canvasBox.beginPath();

				// 左上角
				canvasBox.arc(borderRadius, borderRadius, borderRadius, Math.PI, Math.PI * 1.5);
				
				// 右上角
				canvasBox.arc(width - borderRadius, borderRadius, borderRadius, Math.PI * 1.5, Math.PI * 2);
				
				// 右下角
				canvasBox.arc(width - borderRadius, height - borderRadius, borderRadius, 0, Math.PI * 0.5);
				
				// 左下角
				canvasBox.arc(borderRadius, height - borderRadius, borderRadius, Math.PI * 0.5, Math.PI);

				// 闭合路径
				canvasBox.closePath();

				// 设置线条连接处为圆角
				canvasBox.lineJoin = 'round';

				// 画布裁切
				canvasBox.clip();

				canvasBox.fillStyle = '#fff';
				canvasBox.fill();
			},

　　

  注：该文档为个人理解所写，有误可建议修改（也可留下您宝贵的建议哦~）