外观
Poster 海报生成器
约 1644 字大约 5 分钟
2025-10-31
海报生成组件,提供了强大的海报生成能力,支持文字、图片、二维码,可以轻松生成各种精美的海报。
使用场景
- 生成商品海报、活动海报、分享图片等
- 动态生成包含文字、图片、矩形、二维码的复杂布局
- 支持渐变背景、阴影效果、圆角边框等样式
- 适用于电商、社交、营销等需要生成图片的场景
- 配合可视化设计工具,实现所见即所得的海报设计
平台差异说明
| App(vue) | App(nvue) | H5 | 小程序 |
|---|---|---|---|
| √ | X | √ | √ |
可视化设计工具
基本使用
通过 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 // 层级
}
}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
}
}
]
};页面源码地址
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"
