uniapp canvas分享海报

话不多说，先上代码

<template>
	<view>
		<canvas canvas-id="myCanvas" style="width:600rpx;height:800rpx;background-color: azure;">
		</canvas>
		<button @click="save">保存</button>
	</view>
</template>  

<script>
export default {
	data() {
		return {
			imageUrl: "https://test.shop.baihuitimes.com/web_img/3.png",
			qrcodeData: 'https://test.shop.baihuitimes.com/web_img/4.png',
			avatarUrl: 'https://test.shop.baihuitimes.com/web_img/1.png'
		};
	},
	onReady() {
		this.testCtx();
	},
	methods: {
		async testCtx() {
			const ctx = uni.createCanvasContext('myCanvas', this);
			const width = uni.upx2px(600); // 将600rpx转换为像素单位
			const height = uni.upx2px(800); // 将800rpx转换为像素单位
			const avatarSize = 20; // 头像的大小
			const avatarX = 60; // 头像的x坐标
			const avatarY = 140; // 头像的y坐标
			// 下载图片到本地  
			const [image, qrcode, avatar] = await Promise.all([
				uni.downloadFile({ url: this.imageUrl }),
				uni.downloadFile({ url: this.qrcodeData }),
				uni.downloadFile({ url: this.avatarUrl })
			]);
			// 绘制背景图片  参数分别是：图片路径、左上角x坐标、左上角y坐标、绘制的宽度、绘制的高度
			ctx.drawImage(image.tempFilePath, 0, 0, width, height);

			// 绘制二维码
			ctx.drawImage(qrcode.tempFilePath, 80, 190, 140, 140);

			// 保存当前的画布状态
			ctx.save();

			// 创建圆形路径
			ctx.beginPath();
            // 移动到圆心  参数分别是：圆心的x坐标、圆心的y坐标、圆的半径、起始弧度、终止弧度、是否逆时针
			ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, Math.PI * 2, false);

			// 将绘制区域限制在圆形路径内
			ctx.clip();

			// 绘制头像
			ctx.drawImage(avatar.tempFilePath, avatarX, avatarY, avatarSize, avatarSize);

			// 恢复到最近一次保存的画布状态
			ctx.restore();

			// 绘制文本
			ctx.setFontSize(16)
			ctx.fillText('佰汇时代', 90, 155)

			// 绘制到画布上
			ctx.draw()
		},
		save() {
			uni.canvasToTempFilePath({
				canvasId: 'myCanvas',
				success: function (res) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function () {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
						},
						fail: function () {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
						}
					})
				},
				fail: function (res) {
					console.log(res);
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				}
			});
		}
	}
};  
</script>  

<style></style>  

也可以这样直接写本地图片路径

async testCtx() {
			const ctx = uni.createCanvasContext('myCanvas', this);
			const width = uni.upx2px(600); // 将600rpx转换为像素单位
			const height = uni.upx2px(800); // 将800rpx转换为像素单位
			const avatarSize = 20; // 头像的大小
			const avatarX = 60; // 头像的x坐标
			const avatarY = 140; // 头像的y坐标
			// 下载图片到本地  
			// const [image, qrcode, avatar] = await Promise.all([
			// 	uni.downloadFile({ url: this.imageUrl }),
			// 	uni.downloadFile({ url: this.qrcodeData }),
			// 	uni.downloadFile({ url: this.avatarUrl })
			// ]);
			// 绘制背景图片
			ctx.drawImage('/static/4.png', 0, 0, width, height);

			// 绘制二维码
			ctx.drawImage('/static/5.png', 80, 190, 140, 140);

			// 保存当前的画布状态
			ctx.save();

			// 创建圆形路径
			ctx.beginPath();
			ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, Math.PI * 2, false);

			// 将绘制区域限制在圆形路径内
			ctx.clip();

			// 绘制头像
			ctx.drawImage('/static/3.png', avatarX, avatarY, avatarSize, avatarSize);

			// 恢复到最近一次保存的画布状态
			ctx.restore();

			// 绘制文本
			ctx.setFontSize(16)
			ctx.fillText('佰汇时代', 90, 155)

			// 绘制到画布上
			ctx.draw()
		},

反正和ui确定好尺寸距离就好啦

注意事项：canvas是在onReady生命周期运行的。还有就是<canvas canvas-id="myCanvas">
 </canvas>  这个是 canvas-id不是id!!!

还有就是这一步 

看返回值，不要直接就写 image.tempFilePath