组件介绍
lime-painter 是一个运行在uniapp上优雅的海报生成插件，支持JSON方式和template方式生成海报
资源
完整demo:
https://gitee.com/hackchen/demo-collection/tree/master/front-end/uniapp/lime-painter-demo
需要注意的问题
- 包含图片最好的地址最好要支持跨域
- nvue 必须为HBX 3.4.11及以上
使用步骤
- 安装lime-painter
从完整demo中的 uni_modules/lime-painter 目录复制到你的uniapp项目的 uni_modules 目录下
- 新建页面 pages/index/demo.vue，页面内容如下
<script setup>
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
// 海报元素的引用，用于后续操作DOM
const posterRef = ref(null);
// 控制海报是否显示
const posterIsShow = ref(false);
// 存储最终生成的海报图片URL
const pictureImage = ref('');
// 海报的JSON配置，包含CSS样式和视图层次结构
const posterJson = ref({
css: {
width: '750rpx',
paddingBottom: '40rpx',
background: 'linear-gradient(,#000 0%, #ff5000 100%)'
},
views: [ // 这里配置了多个视图元素，包括图片、文本和容器，每个都有自己的CSS样式
{
src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
type: 'image',
css: {
background: '#fff',
objectFit: 'cover',
marginLeft: '40rpx',
marginTop: '40rpx',
width: '84rpx',
border: '2rpx solid #fff',
boxSizing: 'border-box',
height: '84rpx',
borderRadius: '50%'
}
},
{
type: 'view',
css: {
marginTop: '40rpx',
paddingLeft: '20rpx',
display: 'inline-block'
},
views: [
{
text: '隔壁老王2',
type: 'text',
css: {
display: 'block',
paddingBottom: '10rpx',
color: '#fff',
fontSize: '32rpx',
fontWeight: 'bold'
}
},
{
text: '为您挑选了一个好物',
type: 'text',
css: {
color: 'rgba(255,255,255,.7)',
fontSize: '24rpx'
}
}
]
},
{
css: {
marginLeft: '40rpx',
marginTop: '30rpx',
padding: '32rpx',
boxSizing: 'border-box',
background: '#fff',
borderRadius: '16rpx',
width: '670rpx',
boxShadow: '0 20rpx 58rpx rgba(0,0,0,.15)'
},
views: [
{
src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
type: 'image',
css: {
objectFit: 'cover',
objectPosition: '50% 50%',
width: '606rpx',
height: '606rpx'
}
},
{
css: {
marginTop: '32rpx',
color: '#FF0000',
fontWeight: 'bold',
fontSize: '28rpx',
lineHeight: '1em'
},
views: [
{
text: '￥',
type: 'text',
css: {
verticalAlign: 'bottom'
}
},
{
text: '39',
type: 'text',
css: {
verticalAlign: 'bottom',
fontSize: '58rpx'
}
},
{
text: '.39',
type: 'text',
css: {
verticalAlign: 'bottom'
}
},
{
text: '￥59.99',
type: 'text',
css: {
verticalAlign: 'bottom',
paddingLeft: '10rpx',
fontWeight: 'normal',
textDecoration: 'line-through',
color: '#999999'
}
}
],
type: 'view'
},
{
css: {
marginTop: '30rpx',
fontSize: '26rpx',
color: '#8c5400'
},
views: [
{
text: '满100减11',
type: 'text',
css: {
color: '#ff6200',
border: '1rpx solid #ff6200',
padding: '10rpx 16rpx 4rpx 16rpx',
fontSize: '24rpx'
}
}
],
type: 'view'
},
{
css: {
marginTop: '10rpx'
},
views: [
{
text: '360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝',
type: 'text',
css: {
paddingRight: '32rpx',
marginTop: '16rpx',
boxSizing: 'border-box',
lineClamp: 2,
color: '#333333',
lineHeight: '48rpx',
fontSize: '30rpx',
width: '478rpx'
}
},
{
text: 'limeui.qcoon.cn',
type: 'qrcode',
css: {
width: '128rpx',
height: '128rpx'
}
}
],
type: 'view'
}
],
type: 'view'
}
]
});
/**
* 绘制海报成功的回调函数
* @param {string} e 生成的海报图片数据URL
* @summary 绘制海报成功后，将海报显示出来，并隐藏加载提示。
*/
const painterSsuccess = (e) => {
console.log('painterSsuccess');
posterIsShow.value = true;
pictureImage.value = e;
uni.hideLoading()
};
const renderPoster = () => {
posterRef.value.render(posterJson.value);
}
onLoad(() => {
uni.showLoading({
title: '正在生成海报',
icon: 'loading'
})
setTimeout(() => {
// 需要延迟，不然会报错
renderPoster();
},1000)
})
</script>
- 修改pages.json，内容如下
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/demo",
"style": {
"navigationBarTitleText": "海报demo"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}