Poster 分享海报

通过画布组合文字、图片、矩形、线条和二维码，再生成图片。nvue 页面使用 PosterWeex 海报。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

官网的海报平台表将两个实现合并列出；App nvue 使用 fui-poster-weex，其他平台使用 fui-poster。

基础用法

<template>
  <!-- 海报画布 -->
  <fui-poster ref="posterRef" @ready="handlePosterReady" />
</template>

<script>
export default {
  methods: {
    /** 画布就绪后生成海报 */
    handlePosterReady() {
      const posterData = {
        texts: [{ x: 40, y: 60, text: '分享海报', fontSize: 32, color: '#333333' }]
      };
      this.$refs.posterRef.generatePoster(posterData, (filePath) => {
        if (filePath) {
          uni.previewImage({ urls: [filePath] });
        }
      });
    }
  }
};
</script>

属性

属性	类型	说明	官网默认值
width	Number / String	画布宽度，单位 rpx	750
height	Number / String	画布高度，单位 rpx	1024
pixelRatio	Number / String	画布缩放比	2

本地支付宝小程序的 pixelRatio 默认值为 3。

事件

事件	说明	回调参数
ready	画布初始化完成	无

generatePoster(params, callback) 生成海报并通过回调返回路径；saveImage(filePath) 保存图片。H5 返回 base64，可预览并由用户保存；各平台保存相册的权限和能力不同。

海报数据

params 可包含 texts、imgs、blocks、lines 和 qrcode 数组。坐标和尺寸通常使用 rpx，通过 zIndex 控制绘制顺序。

数组	常用字段
texts	x、y、text、fontSize、color、width、rows、lineHeight、textAlign、fontWeight、opacity、zIndex
imgs	imgResource、type、x、y、width、height、crop、borderRadius、borderWidth、borderColor、zIndex
blocks	x、y、width、height、backgroundColor、borderWidth、borderColor、borderRadius、gradientColor、gradientType、opacity、shadow、zIndex
lines	x、y、endX、endY、color、width、zIndex
qrcode	x、y、width、height、value、foreground、background、zIndex

图片 type 为 1 时直接使用资源，2 时先下载网络图片，3 时转换 base64；实际支持范围取决于平台。nvue 不支持矩形阴影。大尺寸画布在 iOS/Safari 上可能无法绘制。

插槽

插槽	说明
—	官网未列出该组件的插槽