小程序海报生成神器之一lime-painter配合uniapp简单使用示例_业界新闻

发布时间:2024-08-03 12:19

阅读量:0

组件介绍

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: '/zb_users/upload/2024/csdn/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: '/zb_users/upload/2024/csdn/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>  <template> <!-- 显示图像的元素 -->   <image :src="pictureImage" v-if="pictureImage" mode="widthFix" style="width: 700rpx"></image>   <l-painter       ref="posterRef"       @success="painterSsuccess"       isCanvasToTempFilePath       performance       path-type="url"       custom-style="position: fixed; left: 200%"   >   </l-painter> </template>  <style scoped>  </style>

修改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": {} }