更新记录

0.0.2（2025-07-14）

• chore: 更新文档

0.0.1（2025-07-14）

• feat: 首次上传

平台兼容性

云端兼容性

uni-app x(4.61)

lime-poster 海报生成组件

海报生成组件，提供强大的海报生成能力，支持多种元素组合和图片导出功能。可以轻松生成包含图片、文字、二维码等元素的精美海报。

文档链接

📚 组件详细文档请访问以下站点：

• 海报文档 - 站点1
• 海报文档 - 站点2
• 海报文档 - 站点3

安装

1. 插件市场安装，搜索并导入lime-poster
2. 首次导入可能需要重新编译
3. 该组件为收费组件，免费的请看海报画板

代码演示

基本用法

<l-poster :board="posterData" />

完整示例

<template>
  <l-poster :board="posterData" />
</template>

<script setup>
const posterData = {
  style: {
    background: `linear-gradient(180deg,#ff971b 0%, #ff5000 100%)`,
    width: '750rpx',
    paddingBottom: "40rpx",
  },
  children: [
    {
      src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
      type: "image",
      style: {
        background: "#fff",
        objectFit: "cover",
        marginLeft: "40rpx",
        marginTop: "40rpx",
        width: "84rpx",
        border: "2rpx solid #fff",
        boxSizing: "border-box",
        height: "84rpx",
        borderRadius: "50%"
      }
    },
    {
      type: "view",
      style: {
        marginTop: "40rpx",
        paddingLeft: "20rpx",
        display: "inline-block"
      },
      children: [
        {
          text: "隔壁老王",
          type: "text",
          style: {
            display: "block",
            paddingBottom: "10rpx",
            color: "#fff",
            fontSize: "32rpx",
            fontWeight: "bold"
          }
        },
        {
          text: "为您挑选了一个好物",
          type: "text",
          style: {
            color: "rgba(255,255,255,.7)",
            fontSize: "24rpx"
          },
        },
      ],
    },
    {
      type: 'view',
      style: {
        marginLeft: "40rpx",
        marginTop: "30rpx",
        padding: "32rpx",
        boxSizing: "border-box",
        background: "#fff",
        borderRadius: "16rpx",
        width: "670rpx",
        boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
      },
      children: [
        {
          src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
          type: "image",
          style: {
            objectFit: "cover",
            objectPosition: "50% 50%",
            width: "606rpx",
            height: "606rpx"
          },
        },
        {
          type: 'view',
          style: {
            marginTop: "32rpx",
            color: "#FF0000",
            fontWeight: "bold",
            fontSize: "28rpx",
          },
          children: [
            {
              type: 'text',
              text: "￥",
              style: {
                verticalAlign: "bottom"
              }
            },
            {
              text: "39",
              type: "text",
              style: {
                verticalAlign: "bottom",
                fontSize: "58rpx",
                lineHeight: "58rpx",
                // #ifdef APP
                marginBottom: '-4px'
                // #endif
              }
            },
            {
              text: ".39",
              type: "text",
              style: {
                verticalAlign: "bottom"
              }
            },
            {
              text: "￥59.99",
              type: "text",
              style: {
                verticalAlign: "bottom",
                paddingLeft: "10rpx",
                fontWeight: "normal",
                textDecoration: "line-through",
                color: "#999999"
              }
            }
          ],
        },
        {
          type: 'view',
          style: {
            marginTop: "32rpx",
            fontSize: "26rpx",
            color: "#8c5400"
          },
          children: [
            {
              text: "自营",
              type: "text",
              style: {
                color: "#212121",
                background: "#ffb400"
              }
            },
            {
              text: "30天最低价",
              type: "text",
              style: {
                marginLeft: "16rpx",
                background: "#fff4d9",
                textDecoration: "line-through"
              }
            },
            {
              text: "满减优惠",
              type: "text",
              style: {
                marginLeft: "16rpx",
                background: "#fff4d9"
              }
            },
          ]
        },
        {
          type: 'view',
          style: {
            marginTop: "30rpx"
          },
          children: [
            {
              text: "360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝",
              type: "text",
              style: {
                paddingRight: "32rpx",
                boxSizing: "border-box",
                lineClamp: 2,
                color: "#333333",
                lineHeight: "1.8em",
                fontSize: "36rpx",
                width: "468rpx",
              }
            },
            {
              text: "limex.qcoon.cn",
              type: "qrcode",
              style: {
                width: "128rpx",
                height: "128rpx"
              }
            }
          ]
        }
      ]
    }
  ]
}

const onSuccess = (res) => {
  console.log('海报生成成功:', res.tempFilePath)
}
</script>

获取海报图片

// 获取海报图片URL
async function getPosterImage() {
  try {
    const url = await posterRef.value.toDataURL()
    console.log('海报图片URL:', url)
  } catch (error) {
    console.error('获取海报失败:', error)
  }
}

Props

Styles

本插件是在原来海报画板上针对uniappx做的补充。具体支持的style可参考它。

方法

通过组件引用调用：

const posterRef = ref(null)

// 获取海报数据URL
posterRef.value.toDataURL().then(url => {
  console.log(url)
})

// 渲染海报
posterRef.value.render(posterData)

// 转为临时文件路径
posterRef.value.canvasToTempFilePath({
  success(res) {
    console.log(res.tempFilePath)
  }
})

事件