uView Next

# Poster 海报生成器 3.6.0

海报生成组件，提供了强大的海报生成能力，支持文字、图片、二维码，可以轻松生成各种精美的海报。

# 使用场景

  • 生成商品海报、活动海报、分享图片等
  • 动态生成包含文字、图片、矩形、二维码的复杂布局
  • 支持渐变背景、阴影效果、圆角边框等样式
  • 适用于电商、社交、营销等需要生成图片的场景
  • 配合可视化设计工具，实现所见即所得的海报设计

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ X √ √

# 可视化设计工具

TIP

uView Next 提供了配套的可视化海报设计工具，支持拖拽式设计、实时预览、模板库等功能，让海报设计变得简单高效。

访问 uView Next 可视化海报设计器 (opens new window) 开始设计

# 基本使用

通过 palette 属性配置海报内容，支持文字、图片、矩形、二维码等元素：

# 配置说明

# 基础配置

参数 说明 类型 默认值
width 海报宽度 String "375px"
height 海报高度 String "500px"
background 背景色或背景图片 String -
views 视图元素数组 Array []

# 视图元素类型

# 1. 文字 (text)

{
  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                // 层级
  }
}

✅ Copy success!

# 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                // 层级
  }
}

✅ Copy success!

# 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                 // 层级
  }
}

✅ Copy success!

# 4. 二维码 (qrcode)

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

✅ Copy success!

# 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)"

✅ Copy success!

# 阴影效果

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

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

✅ Copy success!

# 圆角边框

支持四个角的独立设置：

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

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

✅ Copy success!

# 图片填充模式

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

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

<template>
	<view>
		<u-poster ref="poster"></u-poster>
		<u-button type="primary" @click="handleShare">分享</u-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>

✅ Copy success!

# 完整示例

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
      }
    }
  ]
};

✅ Copy success!

# 页面源码地址

页面源码地址


 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) 海报数据

# 注意事项

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

← ColorPicker 颜色选择器 →

🌟 真诚邀请 🌟
如果你觉得本项目对你有帮助
欢迎访问我们的Gitee/Github 仓库为我们点个 Star！
点我去 Gitee 点我去 Github
帮忙助力一下
关闭弹窗
×