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

　　在这过程中：

　　　　① 在uniapp中我之前想的是直接将我的view那一块直接转为海报图片，不可行

　　　　② 海报的图片是我点击分享给每个好友使才出现的，之前使用的是UI制作的图，进行自定义的分享、收藏、保存，当然也不可行

　　一、绘画海报

　　　　绘画海报，我使用的是uniapp的canvas进行要求绘制，https://uniapp.dcloud.net.cn/component/canvas.html#canvas

　　　　① 这是我需要将canvas放置的位置  必须包含canvas-id、id这个两个属性【最好两个属性名取一致】，绘制的时候是根据它来查找

　　<!-- 点击分享的弹出层 -->
	<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>

　　　　② 当然就是绘制的逻辑了，当中canvas使用的方法在uniapp官网中，API下面的绘画中，https://uniapp.dcloud.net.cn/api/canvas/CanvasContext.html#canvascontext-drawimage

　　　　在开发中，我的单位为rpx，为了能够适应各种机型选择的

　　// 绘制图片
	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，实现图片分享，代码如下，如果实现文字等其他分享可查看链接：https://developers.weixin.qq.com/miniprogram/dev/api/share/wx.showShareImageMenu.html

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

　　

 注：该文档为个人理解所写，有误可建议修改