uniapp之canvas 绘画海报 进行分享、收藏、保存

　　<!-- 点击分享的弹出层 -->
	<view class="share-popup" v-if="isShowShare">
		<canvas class="share-content bgff br20 df fdc" v-if="isShowShare" canvas-id="firstCanvas"
				id="firstCanvas" style="visibility: hidden;"></canvas>
	</view>

　　// 绘制图片
	captureViewAsImage() {
		const resScreen = uni.getSystemInfoSync();  
		// 获取当前设备的宽度 高度 单位为px
		const screenWidth = resScreen.screenWidth;
		const screenHeight = resScreen.screenHeight;
				
		// 绘画盒子的宽度  高度  单位rpx
		const boxWidth = 614;
		const boxHeight = 900;
				
		// 获取canvas上下文对象
		const pxRatio = screenWidth / 750;
　　　　　// canvas宽度
		const width = boxWidth * pxRatio;
　　　　　// canvas高度
		const height = boxHeight * pxRatio;
		const canvasBox = uni.createCanvasContext('firstCanvas', this,width,height);
		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 = 308; // 目标宽度

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

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

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

					// 绘制Logo图片
					canvasBox.drawImage('logo图片地址', 14, (height - 114 + 160) * pxRatio, 70, 70);

					// 绘制二维码
					canvasBox.drawImage('二维码图片地址', 220, (height - 114 + 355) * pxRatio);

					// 绘制文字
　　　　　　　　　　　　// 字体大小
					canvasBox.setFontSize(17);
　　　　　　　　　　　　// 字体颜色
					canvasBox.setFillStyle('#333');
　　　　　　　　　　　　// 文字
					canvasBox.fillText('你小程序的名字', 14, (height - 114 + 400) * pxRatio);
					canvasBox.setFontSize(14);
					canvasBox.fillText('你设置的文字', 14, (height - 114 + 470) * pxRatio);

					// 调用draw方法进行绘图
					canvasBox.draw(false, () => {
						// 将绘制结果保存为图片
						uni.canvasToTempFilePath({
							canvasId: 'firstCanvas',
							success: res => {
								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.moveTo(borderRadius, 0)
	canvasBox.arcTo(width, 0, width, height, borderRadius)
	canvasBox.arcTo(width, height, 0, height, borderRadius)
	canvasBox.arcTo(0, height, 0, 0, borderRadius)
	canvasBox.arcTo(0, 0, borderRadius, 0, borderRadius)
	canvasBox.closePath()

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

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

　　// 裁剪完剩下的地方填充的颜色
	canvasBox.fillStyle = '#fff';
	canvasBox.fill();
},

wx.showShareImageMenu({
	path: 你需要分享的图片,
	success: res => {
		console.log("success:", res);
	},
	// 取消
	fail: err => {
	console.log("fail:", err);
	}
})