阅读量: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": {} }
插件市场地址:https://ext.dcloud.net.cn/plugin?id=2389