LimeUI+1.2.0

主题

LimePoster 海报生成组件 ​

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

文档链接 ​

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

安装 ​

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

代码演示 ​

基本用法 ​

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

完整示例 ​

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

获取海报图片 ​

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

Props ​

属性名类型默认值说明
boardUTSJSONObject-海报画板数据配置对象，用于定义海报的内容、样式和布局
pixelRationumber设备像素比像素比率，用于在高DPI设备上保证渲染清晰度
hiddenbooleanfalse是否隐藏海报组件（设置为true时组件不会渲染）
generateTempFilebooleanfalse是否生成临时文件路径（适用于需要获取文件路径的场景）
useCORSbooleanfalse是否启用跨域资源共享（仅WEB平台有效）

海报JSON结构解析 ​

本插件是在原来海报画板上针对uniappx做的补充。具体支持的style可参考它。
海报的JSON结构是定义海报内容和样式的核心。下面详细解释海报JSON的各个部分及其作用：

根结构 ​

javascript
{
  style: { /* 海报整体样式 */ },
  children: [ /* 海报元素列表 */ ]
}
  • style: 定义整个海报的样式，如背景色、宽度、内边距等
  • children: 包含所有海报元素的数组，元素按照数组顺序从上到下渲染

元素类型 ​

海报支持多种元素类型，每种类型有不同的属性和用途：

  1. image (图片)

    javascript
    {
  type: "image",
  src: "图片URL地址",
  style: { /* 图片样式 */ }
}
    • src: 图片的URL地址
    • 常用样式: width, height, objectFit, borderRadius等

  2. text (文本)

    javascript
    {
  type: "text",
  text: "要显示的文本内容",
  style: { /* 文本样式 */ }
}
    • text: 要显示的文本内容
    • 常用样式: fontSize, color, fontWeight, lineHeight等

  3. view (视图容器)

    javascript
    {
  type: "view",
  style: { /* 容器样式 */ },
  children: [ /* 子元素列表 */ ]
}
    • children: 容器内的子元素列表
    • 常用样式: padding, margin, background, borderRadius等

  4. qrcode (二维码)

    javascript
    {
  type: "qrcode",
  text: "二维码内容(URL或文本)",
  style: { /* 二维码样式 */ }
}
    • text: 二维码包含的内容，通常是URL
    • 常用样式: width, height等

样式属性 ​

样式属性遵循CSS样式命名规则，但使用驼峰命名法。常用样式属性包括：

  • 尺寸: width, height
  • 边距: margin, marginTop, padding, paddingLeft等
  • 字体: fontSize, fontWeight, lineHeight, color
  • 背景: background, backgroundColor
  • 边框: border, borderRadius, borderWidth
  • 布局: display, flexDirection, justifyContent, alignItems
  • 定位: position, top, left, zIndex
  • 其他: objectFit, boxShadow, opacity, textDecoration等

嵌套结构示例 ​

元素可以通过嵌套创建复杂的布局：

javascript
{
  type: "view",  // 父容器
  style: { padding: "20rpx", background: "#ffffff" },
  children: [
    {
      type: "text",  // 子元素1
      text: "标题文本",
      style: { fontSize: "32rpx", fontWeight: "bold" }
    },
    {
      type: "view",  // 子元素2(嵌套容器)
      style: { marginTop: "10rpx" },
      children: [
        {
          type: "image",  // 嵌套容器的子元素
          src: "https://example.com/image.jpg",
          style: { width: "100rpx", height: "100rpx" }
        }
      ]
    }
  ]
}

单位说明 ​

  • 尺寸单位支持px``rpx
  • 颜色支持多种格式：命名颜色(如red)、HEX(#ff0000)、RGB/RGBA(rgba(255,0,0,0.5))
  • 支持线性渐变背景：linear-gradient(方向,颜色1,颜色2)

实用技巧 ​

  1. 元素定位：

    • 使用margin系列属性控制元素间距
    • 使用position: absolute配合top、left等实现精确定位

  2. 文本处理：

    • 使用lineClamp限制文本行数和文本溢出

  3. 图片处理：

    • 使用objectFit控制图片填充方式
    • 使用objectPosition控制图片位置

  4. 样式复用：

    • 将常用样式提取为变量，在多个元素间复用

方法 ​

通过组件引用调用：

javascript
const posterRef = ref(null)

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


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

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

事件 ​

事件名参数说明
success生成临时文件成功时触发
failerror生成海报失败时触发
progressprogressValue生成进度更新时触发

源代码 ​

组件源码