uview-plus

# Poster 海报生成 3.5.5

打开

该组件用于生成海报图片，支持自定义背景、文本、图片、二维码等元素。

# 基础用法

通过配置 json 属性来定义海报内容和样式。

<template>
  <view class="u-page">
    <view class="u-page__item">
      <up-button type="primary" shape="circle" @click="generatePoster">生成海报</up-button>
      
      <!-- 海报预览区域 -->
      <view class="poster-preview" v-if="posterImageUrl">
        <image :src="posterImageUrl" class="poster-image" mode="widthFix"></image>
      </view>

      <!-- 海报组件 -->
      <up-poster 
        ref="poster" 
        :json="posterConfig"
      ></up-poster>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      posterConfig: {
        css: {
          width: '750rpx',
          height: '1000rpx',
          background: '#fff'
        },
        views: [
          {
            type: 'text',
            text: '夏日清凉特惠',
            css: {
              position: 'absolute',
              color: '#fff',
              left: '50rpx',
              top: '100rpx',
              fontSize: '40rpx',
              fontWeight: 'bold'
            }
          },
          {
            type: 'image',
            src: 'https://example.com/product.png',
            css: {
              position: 'absolute',
              left: '150rpx',
              top: '250rpx',
              width: '450rpx',
              height: '450rpx'
            }
          },
          {
            type: 'text',
            text: '立即抢购',
            css: {
              position: 'absolute',
              color: '#ff6600',
              left: '300rpx',
              top: '750rpx',
              fontSize: '36rpx',
              fontWeight: 'bold'
            }
          }
        ]
      },
      posterImageUrl: ''
    }
  },
  methods: {
    async generatePoster() {
      try {
        uni.showLoading({ title: '海报生成中...' });
        const result = await this.$refs.poster.exportImage();
        this.posterImageUrl = result.path;
        uni.hideLoading();
        uni.showToast({ title: '海报生成成功', icon: 'success' });
      } catch (error) {
        uni.hideLoading();
        uni.showToast({ title: '海报生成失败', icon: 'none' });
      }
    }
  }
}
</script>

# 自定义背景图海报

通过设置 background 为图片链接，可以创建自定义背景图的海报。

<template>
  <view class="u-page">
    <view class="u-page__item">
      <up-button type="primary" shape="circle" @click="generatePoster">生成海报</up-button>
      
      <!-- 海报预览区域 -->
      <view class="poster-preview" v-if="posterImageUrl">
        <image :src="posterImageUrl" class="poster-image" mode="widthFix"></image>
      </view>

      <!-- 海报组件 -->
      <up-poster 
        ref="poster" 
        :json="posterConfig"
      ></up-poster>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      posterConfig: {
        css: {
          width: '750rpx',
          height: '1000rpx',
          background: 'https://example.com/background.jpg'
        },
        views: [
          {
            type: 'text',
            text: '夏日清凉特惠',
            css: {
              position: 'absolute',
              color: '#fff',
              left: '50rpx',
              top: '100rpx',
              fontSize: '40rpx',
              fontWeight: 'bold'
            }
          },
          {
            type: 'image',
            src: 'https://example.com/product.png',
            css: {
              position: 'absolute',
              left: '150rpx',
              top: '250rpx',
              width: '450rpx',
              height: '450rpx'
            }
          },
          {
            type: 'text',
            text: '立即抢购',
            css: {
              position: 'absolute',
              color: '#ff6600',
              left: '300rpx',
              top: '750rpx',
              fontSize: '36rpx',
              fontWeight: 'bold'
            }
          }
        ]
      },
      posterImageUrl: ''
    }
  },
  methods: {
    async generatePoster() {
      try {
        uni.showLoading({ title: '海报生成中...' });
        const result = await this.$refs.poster.exportImage();
        this.posterImageUrl = result.path;
        uni.hideLoading();
        uni.showToast({ title: '海报生成成功', icon: 'success' });
      } catch (error) {
        uni.hideLoading();
        uni.showToast({ title: '海报生成失败', icon: 'none' });
      }
    }
  }
}
</script>

:::

# 渐变背景海报

支持线性渐变和径向渐变背景。

<template>
  <view class="u-page">
    <view class="u-page__item">
      <up-button type="primary" shape="circle" @click="generatePoster">生成海报</up-button>
      
      <!-- 海报预览区域 -->
      <view class="poster-preview" v-if="posterImageUrl">
        <image :src="posterImageUrl" class="poster-image" mode="widthFix"></image>
      </view>

      <!-- 海报组件 -->
      <up-poster 
        ref="poster" 
        :json="posterConfig"
      ></up-poster>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      posterConfig: {
        css: {
          width: '750rpx',
          height: '1000rpx',
          background: 'linear-gradient(45deg, #ff9a9e, #fecfef)'
        },
        views: [
          {
            type: 'view',
            css: {
              position: 'absolute',
              left: '60rpx',
              top: '150rpx',
              width: '630rpx',
              height: '700rpx',
              background: 'rgba(255, 255, 255, 0.9)',
              radius: '20rpx'
            }
          },
          {
            type: 'text',
            text: '限时优惠',
            css: {
              position: 'absolute',
              color: '#ff4d4f',
              left: '250rpx',
              top: '200rpx',
              fontSize: '48rpx',
              fontWeight: 'bold'
            }
          },
          {
            type: 'text',
            text: '全场商品5折起',
            css: {
              position: 'absolute',
              color: '#666',
              left: '200rpx',
              top: '300rpx',
              fontSize: '36rpx'
            }
          }
        ]
      },
      posterImageUrl: ''
    }
  },
  methods: {
    async generatePoster() {
      try {
        uni.showLoading({ title: '海报生成中...' });
        const result = await this.$refs.poster.exportImage();
        this.posterImageUrl = result.path;
        uni.hideLoading();
        uni.showToast({ title: '海报生成成功', icon: 'success' });
      } catch (error) {
        uni.hideLoading();
        uni.showToast({ title: '海报生成失败', icon: 'none' });
      }
    }
  }
}
</script>

:::

# Props

参数名 说明 类型 默认值 可选值
json 海报配置JSON数据 Object - -

# json 配置项

参数名 说明 类型 默认值
css 海报容器样式 Object -
views 海报元素列表 Array -

# json.css 容器样式

参数名 说明 类型 默认值
width 海报宽度 String 750rpx
height 海报高度 String 1114rpx
background 背景颜色或图片链接 String -

# json.views 元素配置

参数名 说明 类型 默认值
type 元素类型 String -
text 文本内容(仅text类型) String -
src 图片地址(仅image/qrcode类型) String -
css 元素样式 Object -

# views元素类型

类型 说明
text 文本元素
image 图片元素
qrcode 二维码元素
view 矩形容器元素

# css 样式属性

参数名 说明 类型 默认值
position 定位方式 String absolute
left 距离左边距离 String 0rpx
top 距离顶部距离 String 0rpx
width 元素宽度 String -
height 元素高度 String -
color 文字颜色(仅text类型) String #000
fontSize 文字大小(仅text类型) String -
fontWeight 文字粗细(仅text类型) String normal
lineHeight 行高(仅text类型) String -
lineClamp 最大行数(仅text类型) Number -
background 背景颜色(仅view类型) String -
radius 圆角大小 String -
shadow 阴影效果 String -

# Event

事件名 说明 回调参数
export 海报导出完成时触发 result

# Methods

方法名 说明 参数 返回值
exportImage 导出海报图片 - Promise

← ShortVideo 短视频 →