什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
这里是生成好的效果图(可以根据你的UI去灵活使用)
开始使用咯
父组件调用
Page({
imagePath: '',
isSave: false,
data: {
template: {},
canvasJson: {
width: '636rpx',
height: '920rpx',
background: '#fff',
views: [
{
type: 'image',
url: '背景图片路径(根据自己需求给出路径)',
css: {
width: '100%',
height: '100%',
bottom: '0',
left: '0',
right: '0',
top: 0,
},
},
{
type: 'image',
url: '画布图片块路径(根据自己需求给出路径)',
css: {
width: '549rpx',
height: '360rpx',
left: '42rpx',
top: '56rpx',
borderRadius: '10rpx 10rpx 0 0',
},
},
{
id: 'my-text-id',
type: 'text',
text: "快快快,兄弟们雄起呀,带你飞进黑土堆",
css: [{
width: '450rpx',
top: `540rpx`,
left: '90rpx',
fontWeight: 'bold',
fontSize: '30rpx',
maxLines: 1,
}],
},
{
type: 'image',
url: '画布图片块路径(根据自己需求给出路径)',
css: [{
bottom: '60rpx',
right: '58rpx',
width: '200rpx',
height: '200rpx',
}]
}
]
}
},
// 海报生成成功回调
onDidShow() {
console.log('海报生成成功回调')
},
// 海报保存成功回调
onImgOK(e) {
this.imagePath = e.detail.path
this.setData({
image: this.imagePath
})
if (this.isSave) {
this.saveImage(this.imagePath)
}
},
// 保存海报回调
saveImage(imagePath = '') {
if (!this.isSave) {
this.isSave = true;
this.setData({
paintPallette: this.data.template,
})
} else if (imagePath) {
this.isSave = false;
wx.saveImageToPhotosAlbum({
filePath: imagePath,
})
}
},
onReady: function() {
this.setData({
template: this.data.canvasJson,
})
}
})
<view class="container">
<button bind:tap='saveImage'>保存</button>
<painter
widthPixels="1000"
customStyle='margin: 0 auto;'
dancePalette="{{template}}"
palette="{{paintPallette}}"
bind:imgOK="onImgOK"
bind:didShow="onDidShow"
/>
</view>
子组件的资源已经上传到个人资源里边,可供直接下载使用,你想要的海报就此实现,你还在等什么…