ShadowUI3

# ui-poster 海报画布组件

版本：v2.3.11

基于 Canvas 的海报生成组件，支持绘制文本、段落文本和图片（含圆形裁剪、区域裁剪、旋转），可生成海报图片并保存到相册

# 基本使用

<template>
  <view class="poster-demo">
    <ui-button type="primary" @click="createPoster">生成海报</ui-button>
    <ui-button type="success" @click="savePoster">保存海报</ui-button>

    <ui-poster
      ref="poster"
      :list="posterList"
      :width="750"
      :height="1334"
      backgroundColor="#ffffff"
      @success="onSuccess"
      @error="onError"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const poster = ref(null)

const posterList = ref([
  { type: 'image', x: 0, y: 0, width: 750, height: 1334, url: 'https://example.com/bg.jpg' },
  { type: 'text', x: 375, y: 200, text: '海报标题', fontSize: 48, color: '#333333', textAlign: 'center' },
  { type: 'textarea', x: 75, y: 300, width: 600, text: '这是一段描述文字，支持自动换行', fontSize: 28, lineHeight: 40, color: '#666666' }
])

const createPoster = () => {
  poster.value.create()
}

const savePoster = () => {
  poster.value.saveImg()
}

const onSuccess = (tempFilePath) => {
  console.log('海报生成成功:', tempFilePath)
}

const onError = (err) => {
  console.error('海报生成失败:', err)
}
</script>

<style scoped>
.poster-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

# Props

参数 类型 默认值 说明
list Array - 绘制元素列表，每项包含 type（text/textarea/image）及对应绘制参数，必填
width Number - 画布宽度（px），必填
height Number - 画布高度（px），必填
backgroundColor String 'rgba(0,0,0,0)' 画布背景颜色
canvasId String 'posterCanvas' Canvas 的 canvas-id

# Events

事件名 说明 回调参数
success 海报生成成功时触发 (tempFilePath: string) 临时文件路径
error 海报绘制过程中发生错误时触发 (err: Error) 错误信息

# 方法

方法名 说明 参数
create 开始绘制海报，按 list 顺序绘制所有元素 -
saveImg 将当前画布内容保存到系统相册 -

# list 元素配置

# 文本元素（type: 'text'）

参数 类型 说明
type String 固定值 'text'
x Number X 坐标
y Number Y 坐标
text String 文本内容
fontSize Number 字体大小
color String 字体颜色
textAlign String 对齐方式：left、center、right
fontWeight String 字体粗细
rotate Number 旋转角度

# 段落文本元素（type: 'textarea'）

参数 类型 说明
type String 固定值 'textarea'
x Number X 坐标
y Number Y 坐标
width Number 文本区域宽度
text String 文本内容，支持自动换行
fontSize Number 字体大小
lineHeight Number 行高
color String 字体颜色
textAlign String 对齐方式

# 图片元素（type: 'image'）

参数 类型 说明
type String 固定值 'image'
x Number X 坐标
y Number Y 坐标
width Number 图片宽度
height Number 图片高度
url String 图片地址
circle Boolean 是否圆形裁剪
rotate Number 旋转角度
sx Number 裁剪起始 X 坐标
sy Number 裁剪起始 Y 坐标
sw Number 裁剪宽度
sh Number 裁剪高度

# 示例

# 带圆形头像的海报

<template>
  <view>
    <ui-poster
      ref="poster"
      :list="posterList"
      :width="750"
      :height="1000"
      backgroundColor="#ffffff"
      @success="onSuccess"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const poster = ref(null)

const posterList = ref([
  { type: 'image', x: 0, y: 0, width: 750, height: 1000, url: 'https://example.com/bg.jpg' },
  { type: 'image', x: 300, y: 100, width: 150, height: 150, url: 'https://example.com/avatar.jpg', circle: true },
  { type: 'text', x: 375, y: 300, text: '用户昵称', fontSize: 36, color: '#333333', textAlign: 'center' }
])

const onSuccess = (tempFilePath) => {
  console.log('海报生成成功:', tempFilePath)
}
</script>

# 平台兼容

平台 支持情况
H5 ✅
微信小程序 ✅
支付宝小程序 ✅
百度小程序 ✅
字节跳动小程序 ✅
QQ小程序 ✅
APP ✅

# 注意事项

  1. list、width、height 为必填属性
  2. 绘制图片时需确保图片地址可访问，小程序端需配置 downloadFile 域名白名单
  3. 通过 ref 调用 create() 方法开始绘制，绘制完成后会触发 success 事件
  4. saveImg() 方法会将画布内容保存到系统相册，需确保已获取相册权限
  5. canvasId 在同一页面中需保持唯一

← ui-form 表单容器组件 →