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

组件介绍

lime-painter 是一个运行在uniapp上优雅的海报生成插件，支持JSON方式和template方式生成海报

资源

完整demo: https://gitee.com/hackchen/demo-collection/tree/master/front-end/uniapp/lime-painter-demo

需要注意的问题

1. 包含图片最好的地址最好要支持跨域

2. nvue 必须为HBX 3.4.11及以上

使用步骤

1. 安装lime-painter

从完整demo中的 uni_modules/lime-painter 目录复制到你的uniapp项目的 uni_modules 目录下

2. 新建页面 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>

<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>

3. 修改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