lime-painter是一款canvas海报组件，可以更轻松的生成海报
海报画板 - DCloud 插件市场 一款canvas海报组件，更优雅的海报生成方案
https://ext.dcloud.net.cn/plugin?id=2389插件提供 JSON 及 Template 的方式绘制海报
1、Template方式
- 提供
l-painter-view、l-painter-text、l-painter-image、l-painter-qrcode四种类型组件 - 通过
css属性绘制样式，与 style 使用方式保持一致。
<l-painter>
//如果使用Template出现顺序错乱，可使用`template` 等所有变量完成再显示
<template v-if="show">
<l-painter-view
css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"
></l-painter-view>
<l-painter-text
text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
css="text-align:center; padding-top: 20rpx; text-decoration: line-through "
/>
<l-painter-image
src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
css="width: 200rpx; height: 200rpx"
/>
<l-painter-qrcode
text="limeui.qcoon.cn"
css="width: 200rpx; height: 200rpx"
/>
<template>
</l-painter>2、JSON方式
- 在 json 里四种类型组件的
type为view、text、image、qrcode - 通过
board设置海报所需的 JSON 数据进行绘制或ref获取组件实例调用组件内的render(json) - 所有类型的 schema 都具有
css字段，css 的 key 值使用驼峰如：lineHeight
<l-painter :board="poster"/>data() {
return {
poster: {
css: {
// 根节点若无尺寸，自动获取父级节点
width: '750rpx'
},
views: [
{
type: "view",
css: {
background: "#07c160",
height: "120rpx",
width: "120rpx",
display: "inline-block"
}
},
{
type: 'text',
text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
css: {
// 设置居中对齐
textAlign: 'center',
// 设置中划线
textDecoration: 'line-through'
}
},
{
type: 'image',
src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
css: {
width: '200rpx',
height: '200rpx'
}
},
{
type: 'qrcode',
text: 'limeui.qcoon.cn',
css: {
width: '200rpx',
height: '200rpx',
}
}
]
}
}
}View 容器
- 类似于
div可以嵌套承载更多的 view、text、image，qrcode 共同构建一颗完整的节点树 - 在 JSON 里具有
views的数组字段，用于嵌套承载节点。
Text 文本
- 通过
text属性填写文本内容。 - 支持
\n换行符 - 支持省略号，使用 css 的
line-clamp设置行数，当文字内容超过会显示省略号。 - 支持
text-decoration
Image 图片
- 通过
src属性填写图片路径。 - 图片路径支持：网络图片，本地 static 里的图片路径，缓存路径，字节的static目录是写相对路径
- 通过
css的object-fit属性可以设置图片的填充方式，可选值见下方 CSS 表格。 - 通过
css的object-position配合object-fit可以设置图片的对齐方式，类似于background-position，详情见下方 CSS 表格。 - 使用网络图片时：小程序需要去公众平台配置downloadFile域名
- 使用网络图片时：H5 和 Nvue 需要决跨域问题
Qrcode 二维码
- 通过
text属性填写需要生成二维码的文本。 - 通过
css里的color可设置生成码点的颜色。 - 通过
css里的background可设置背景色。 - 通过
css里的width、height设置尺寸。
生成图片
1、方式1：
通过设置isCanvasToTempFilePath自动生成图片并在 @success 事件里接收海报临时路径
<l-painter isCanvasToTempFilePath pathType="url" @success="posterSuccess" hidden :board="poster" />
<image class="poster2" :src="canvasUrl" :show-menu-by-longpress="true" mode="widthFix" v-if="canvasUrl != null">
</image><script>
export default {
data() {
return {
canvasUrl: '',
poster: {
}
}
},
methods: {
posterSuccess($event) {
this.canvasUrl = $event
console.log(this.canvasUrl);
},
}
}
</script>海报绘制完毕后将生成的图片加载到image组件，通过设置show-menu-by-longpress属性，可以在image组件的长按时弹出菜单进行图片分享和识别二维码等操作。
2、方式2：
通过调用内部方法生成图片
<l-painter ref="painter" :board="poster" /><script>
export default {
data() {
return {
poster: {
}
}
},
methods: {
saveClick() {
console.log('saveClick')
// 生成图片
this.$refs.painter.canvasToTempFilePathSync({
fileType: "jpg",
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
pathType: 'url',
quality: 0.9,
success: (res) => {
console.log(res.tempFilePath);
// 非H5 保存到相册
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: '图片已保存'
})
},
fail:function(){
uni.showToast({
icon: 'error',
title: '图片保存失败'
})
}
});
},
});
},
}
}
</script>