{
  type: "text",
  text: "显示的文字内容",
  style: {
    width: "180px",           // 宽度
    height: "31px",           // 高度
    top: "360px",             // 距离顶部距离
    left: "52px",             // 距离左侧距离
    color: "#f00",            // 文字颜色
    fontSize: "28px",         // 字体大小
    fontFamily: "Arial",      // 字体
    fontWeight: "bold",       // 字体粗细
    textAlign: "center",      // 文字对齐方式
    lineHeight: 1.5,          // 行高
    maxLines: 2,              // 最大行数
    textDecoration: "underline", // 文字装饰
    textStyle: "fill",        // 文字样式
    background: "transparent", // 背景色
    borderRadius: "5px",      // 圆角
    borderWidth: "1px",       // 边框宽度
    borderColor: "#ccc",      // 边框颜色
    shadow: "2px 2px 4px rgba(0,0,0,0.3)", // 阴影
    zindex: 10                // 层级
  }
}

2. 图片 (image)

{
  type: "image",
  url: "图片地址",
  style: {
    width: "321px",           // 宽度
    height: "321px",          // 高度
    top: "30px",              // 距离顶部距离
    left: "25px",             // 距离左侧距离
    borderRadius: "10px",     // 圆角
    borderWidth: "1px",       // 边框宽度
    borderColor: "#ccc",      // 边框颜色
    mode: "scaleToFill",      // 图片填充模式
    shadow: "2px 2px 4px rgba(0,0,0,0.3)", // 阴影
    zindex: 10                // 层级
  }
}

3. 矩形 (rect)

{
  type: "rect",
  style: {
    width: "356px",           // 宽度
    height: "473px",          // 高度
    top: "11px",              // 距离顶部距离
    left: "8px",              // 距离左侧距离
    background: "#fff",       // 背景色
    borderRadius: "10px",     // 圆角
    borderWidth: "1px",       // 边框宽度
    borderColor: "#ccc",      // 边框颜色
    shadow: "2px 2px 4px rgba(0,0,0,0.3)", // 阴影
    zindex: 1                 // 层级
  }
}

4. 二维码 (qrcode)

{
  type: "qrcode",
  content: "二维码内容",
  style: {
    width: "58px",            // 宽度
    height: "58px",           // 高度
    top: "404px",             // 距离顶部距离
    left: "286px",            // 距离左侧距离
    background: "#ffffff",    // 背景色
    color: "#000000",         // 二维码颜色
    borderRadius: "5px",      // 圆角
    zindex: 100               // 层级
  }
}

CSS 属性详解

定位属性

属性	说明	示例
top	距离顶部距离	"30px"
left	距离左侧距离	"25px"
right	距离右侧距离	"20px"
bottom	距离底部距离	"20px"

尺寸属性

属性	说明	示例
width	宽度	"100px"
height	高度	"100px"

样式属性

属性	说明	示例
background	背景色或渐变	"#fff" 或 "linear-gradient(45deg, #ff6b6b, #4ecdc4)"
color	文字颜色	"#000"
fontSize	字体大小	"16px"
fontFamily	字体	"Arial", "sans-serif"
fontWeight	字体粗细	"normal", "bold"
textAlign	文字对齐	"left", "center", "right"
borderRadius	圆角	"5px" 或 "5px 10px 15px 20px"
borderWidth	边框宽度	"1px"
borderColor	边框颜色	"#ccc"
shadow	阴影	"2px 2px 4px rgba(0,0,0,0.3)"

特殊属性

属性	说明	示例
zindex	层级，数值越大越靠前	10
mode	图片填充模式	"scaleToFill", "aspectFill", "auto"
lineHeight	行高倍数	1.5
maxLines	最大行数	2
textDecoration	文字装饰	"underline", "line-through", "overline"
textStyle	文字样式	"fill", "stroke"

高级功能

渐变背景

支持线性渐变和径向渐变：

// 线性渐变
background: "linear-gradient(45deg, #ff6b6b, #4ecdc4)"

// 径向渐变
background: "radial-gradient(circle, #ff6b6b, #4ecdc4)"

阴影效果

阴影格式：x偏移 y偏移模糊半径颜色

shadow: "2px 2px 4px rgba(0,0,0,0.3)"

圆角边框

支持四个角的独立设置：

// 统一圆角
borderRadius: "10px"

// 分别设置四个角
borderRadius: "10px 20px 30px 40px"

图片填充模式

模式	说明
scaleToFill	拉伸填充，可能变形
aspectFill	保持比例填充，可能裁剪
auto	保持原始比例，自适应

使用 `render` 方法手动触发渲染

<template>
	<view>
		<u-poster ref="poster"></u-poster>
		<un-button type="primary" @click="handleShare">分享</un-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
    methods: {
      handleShare() {
        const template = {
          width: "375px",
          height: "500px",
          background: "#fdbb2d",
          views: [
            {
              type: "text",
              text: "商品标题",
              style: {
                width: "252px",
                height: "59px",
                top: "404px",
                left: "24px",
                color: "#000000",
                fontSize: "18px",
                lineHeight: 1.5,
                maxLines: 2,
                fontFamily: "Arial",
                zindex: 11
              }
            }
          ]
        };
        this.$refs.poster.render(template)
      }
    }
	}
</script>

完整示例

const template = {
  width: "375px",
  height: "500px",
  background: "#fdbb2d",
  views: [
    {
      type: "rect",
      style: {
        width: "356px",
        height: "473px",
        top: "11px",
        left: "8px",
        background: "#fff",
        borderRadius: "10px",
        zindex: 1
      }
    },
    {
      type: "image",
      url: "https://example.com/product.jpg",
      style: {
        width: "321px",
        height: "321px",
        top: "30px",
        left: "25px",
        borderRadius: "10px",
        zindex: 10,
        mode: "scaleToFill"
      }
    },
    {
      type: "text",
      text: "商品标题",
      style: {
        width: "252px",
        height: "59px",
        top: "404px",
        left: "24px",
        color: "#000000",
        fontSize: "18px",
        lineHeight: 1.5,
        maxLines: 2,
        fontFamily: "Arial",
        zindex: 11
      }
    },
    {
      type: "text",
      text: "￥49.99",
      style: {
        width: "180px",
        height: "31px",
        top: "360px",
        left: "52px",
        color: "#f00",
        fontSize: "28px",
        fontFamily: "Arial",
        zindex: 10
      }
    },
    {
      type: "qrcode",
      content: "https://example.com/share",
      style: {
        width: "58px",
        height: "58px",
        top: "404px",
        left: "286px",
        background: "#ffffff",
        color: "#000000",
        zindex: 100
      }
    }
  ]
};

页面源码地址

github

gitee

API

Props

参数	说明	类型	默认值	可选值
showPreview	是否显示预览	Boolean	true	true \| false
width	预览宽度	Number \| String	375	-
height	预览高度	Number \| String	-	-
mode	预览模式	String	"widthFix"	widthFix \| heightFix \| scaleToFill
palette	海报配置对象	Object	() => []	-
scaleRatio	缩放比，会在传入的palette中统一乘以该缩放比	Number	1	-
widthPixels	宽度像素，设置后会覆盖scaleRatio	Number	0	-
dirty	启用脏检查，默认false	Boolean	false	true \| false
fileType	文件类型	String	"jpg"	jpg \| png
quality	质量	Number	1	0-1

Events

事件名	说明	回调参数
success	图片生成成功时触发	(path: String) 生成的图片路径
error	图片生成失败时触发	(error: Object) 错误信息

Methods

方法名	说明	参数
render	手动触发渲染	(data?: Object) 海报数据

注意事项

图片资源：确保图片URL可访问，建议使用HTTPS链接
字体支持：某些字体在小程序环境下可能不支持，建议使用系统默认字体
性能优化：大量元素时建议合理设置zindex，避免频繁重绘
尺寸单位：支持px、rpx、%等CSS单位
渐变支持：支持linear-gradient和radial-gradient语法
阴影限制：不支持spread参数，格式为"x y blur color"