uniapp vue3 使用画布分享或者收藏功能

使用HBuilder X 开发小程序，大多数的画布插件很多都是vue2的写法，vue3的很少

我自己也试了很多个插件，但是有一些还是有问题，不好用

海报画板 - DCloud 插件市场  先将插件导入项目中

自己项目亲自用过，功能基本是完善的，大家可以在链接去看示例

大概样式写一下，大家也可以按照我的格式粘贴

动态数据就循环放在一个view 中给他塞进去就可以了 

如果大家想不显示图片，生成画布之后会返回一个地址图片，显示这个图片加一个hidden 就可以了

<l-painter ref="painter" @done="getthumb" hidden />

let painter = ref(null);
// 画布初始数据

let poster = ref({
	css: {
		// 根节点若无尺寸，自动获取父级节点
		width: '750rpx',
		height: '1200rpx',
		backgroundImage: `url(https://mpapi.sstlab.cn/images/bg_orbital.png)`
	},
	views: [
		{
			css: {
				height: '100rpx',
				width: '100%',
				display: 'flex',
				justifyContent: 'center',
				alignItems: 'center',
				paddingTop: '80rpx',
				boxSizing: 'border-box',
				marginBottom: '80rpx'
			},
			views: [
				{
					src: 'https://mpapi.sstlab.cn/images/time_conversio.png',
					type: 'image',
					css: {
						objectFit: 'cover',
						objectPosition: '50% 50%',
						width: '40rpx',
						height: '40rpx'
					}
				},
				{
					text: '时间转换',
					type: 'text',
					css: {
						verticalAlign: 'middle',
						paddingLeft: '10rpx',
						color: '#64c4ff'
					}
				}
			],
			type: 'view'
		},
		{
			css: {
				height: '820rpx'
			},
			views: [],
			type: 'view'
		}
	],
	type: 'view'
});

//画布成功后转化为图片
const getthumb = () => {
	wx.hideLoading();
	painter.value.canvasToTempFilePathSync({
		fileType: 'jpg',
		// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
		pathType: 'url',
		quality: 1,
		success: (res) => {
			wx.previewImage({
				urls: [res.tempFilePath]
			});
		}
	});
};