更新记录

0.0.1（2026-05-02）

新增

• 新增海报生成组件 zp-poster。
• 支持 Canvas 海报容器和模板背景色。
• 支持文本元素渲染。
• 支持文本最大宽度换行。
• 支持矩形元素渲染。
• 支持图片元素渲染。
• 支持 render(template) 重新渲染模板。
• 支持 exportImage() 导出图片。
• 支持 saveToAlbum() 保存相册。
• 支持导出成功和失败事件。

优化

• 补充完整首页 demo，覆盖海报画布、模板元素、渲染按钮和导出按钮截图场景。
• demo 增加模板切换、导出图片和保存相册按钮，便于 App 真机验证权限流程。
• 补充详情页级 readme.md，完善模板结构、元素类型、方法、事件和权限说明。
• 完善插件市场发布配置、平台兼容性、授权价格和文档说明。

注意

• 当前支持文本、矩形和图片元素。
• 二维码、圆角裁剪和高清倍率需要后续版本扩展。
• 保存相册必须进行 App 真机权限验证。

平台兼容性

uni-app(5.08)

uni-app x(5.08)

其他

海报画板生成器

zhuanz-poster 提供基于 Canvas 的海报模板渲染、图片导出和保存相册能力，适合活动海报、会员权益图、商品分享图和营销卡片生成。

组件

• zp-poster

核心能力

• 模板背景色。
• 文本元素渲染。
• 文本自动换行。
• 矩形元素渲染。
• 图片元素渲染。
• Canvas 导出图片。
• 保存到系统相册。
• 渲染成功、导出成功、导出失败事件。

安装路径

uni_modules/zhuanz-poster

基础示例

<template>
  <view>
    <zp-poster ref="poster" :template="template" :width="300" :height="420" />
    <button @click="$refs.poster.exportImage()">导出图片</button>
    <button @click="$refs.poster.saveToAlbum()">保存相册</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      template: {
        background: '#ffffff',
        elements: [
          { type: 'rect', x: 0, y: 0, width: 300, height: 120, color: '#0f766e' },
          { type: 'text', x: 28, y: 58, text: '活动海报', color: '#ffffff', fontSize: 22 },
          { type: 'text', x: 28, y: 160, text: '支持多行文本自动换行', color: '#111827', fontSize: 16, maxWidth: 220 },
          { type: 'image', x: 28, y: 220, width: 120, height: 120, src: '/static/logo.png' }
        ]
      }
    }
  }
}
</script>

Props

模板结构

{
  background: '#ffffff',
  elements: []
}

元素类型

文本 text

矩形 rect

图片 image

Methods

Events

平台兼容性

• uni-app Vue2 / Vue3：支持。
• H5：支持 Canvas 渲染，保存相册能力以浏览器限制为准。
• App Vue：支持，保存相册需真机验证权限。
• 微信小程序：支持 Canvas 渲染，保存相册需按小程序权限要求配置。
• uni-app x：支持 Web 和 App，需按实际项目运行环境验证。

权限说明

• 插件不采集任何数据。
• 保存相册时需要宿主工程按平台要求申请相册写入权限。
• 图片元素的路径可用性由宿主项目保证。