使用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]
});
}
});
};