更新记录

1.0.0（2025-12-30） 下载此版本

• 初始版本发布
• 支持图片绘制（圆角、裁剪模式）
• 支持文字绘制（换行、省略、字间距、装饰线、阴影）
• 支持二维码生成（自定义颜色、Logo）
• 支持矩形、圆形、线条绑制
• 支持纯色背景、渐变背景、图片背景
• 支持高清绘制（像素比）
• 支持导出图片
• 支持保存到相册
• 兼容微信小程序、H5、App

平台兼容性

uni-app(3.6.15)

w-poster 海报生成器

一个功能强大的 uniapp 海报生成插件，支持图片、文字、二维码等元素的绘制，可自定义样式和布局。

特性

• 支持图片绘制（支持圆角、裁剪模式）
• 支持文字绘制（支持换行、省略、字间距、文字装饰等）
• 支持二维码生成（支持自定义颜色、logo）
• 支持矩形、圆形、线条等基础图形
• 支持背景色、渐变、背景图
• 支持高清绘制（像素比）
• 支持导出图片、保存到相册
• 兼容微信小程序、H5、App

安装

将插件导入到 uni_modules 目录即可自动注册使用。

基本用法

<template>
  <view>
    <w-poster
      ref="poster"
      :config="posterConfig"
      :width="375"
      :height="667"
      :pixel-ratio="2"
      @bindSuccess="onSuccess"
      @bindFail="onFail"
    />
    <button @click="draw">生成海报</button>
    <button @click="save">保存图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      posterConfig: {
        background: '#ffffff',
        elements: [
          {
            type: 'image',
            src: '/static/bg.jpg',
            x: 0,
            y: 0,
            width: 375,
            height: 200
          },
          {
            type: 'text',
            text: '这是标题文字',
            x: 20,
            y: 220,
            fontSize: 24,
            fontWeight: 'bold',
            color: '#333333'
          },
          {
            type: 'qrcode',
            text: 'https://example.com',
            x: 137,
            y: 500,
            size: 100
          }
        ]
      }
    }
  },
  methods: {
    async draw() {
      await this.$refs.poster.draw()
    },
    async save() {
      await this.$refs.poster.saveToAlbum()
    },
    onSuccess() {
      console.log('绘制成功')
    },
    onFail(err) {
      console.log('绘制失败', err)
    }
  }
}
</script>

Props

Events

Methods

通过 ref 调用组件方法：

Config 配置

background 背景

// 纯色背景
background: '#ffffff'

// 图片背景
background: '/static/bg.jpg'

// 渐变背景
background: {
  type: 'linear-gradient',
  x1: 0,
  y1: 0,
  x2: 0,
  y2: 667,
  colorStops: [
    { offset: 0, color: '#ff6b6b' },
    { offset: 1, color: '#feca57' }
  ]
}

elements 元素列表

image 图片

{
  type: 'image',
  src: '/static/img.jpg',  // 图片路径，支持本地和网络图片
  x: 0,                     // x 坐标
  y: 0,                     // y 坐标
  width: 100,              // 宽度
  height: 100,             // 高度
  borderRadius: 10,        // 圆角，可选
  mode: 'aspectFill'       // 裁剪模式：aspectFill | aspectFit | scaleToFill
}

text 文字

{
  type: 'text',
  text: '文字内容',
  x: 20,
  y: 100,
  fontSize: 16,            // 字号
  fontWeight: 'normal',    // 字重：normal | bold
  fontFamily: 'sans-serif', // 字体
  color: '#333333',        // 颜色
  textAlign: 'left',       // 对齐：left | center | right
  textBaseline: 'top',     // 基线：top | middle | bottom
  lineHeight: 1.4,         // 行高倍数
  maxWidth: 200,           // 最大宽度，超出换行
  maxLines: 2,             // 最大行数
  ellipsis: '...',         // 省略符号
  letterSpacing: 2,        // 字间距
  textDecoration: 'none',  // 装饰：none | underline | line-through
  shadow: {                // 阴影，可选
    offsetX: 2,
    offsetY: 2,
    blur: 4,
    color: 'rgba(0,0,0,0.3)'
  }
}

qrcode 二维码

{
  type: 'qrcode',
  text: 'https://example.com', // 二维码内容
  x: 100,
  y: 400,
  size: 120,                   // 尺寸
  errorCorrectionLevel: 'M',   // 纠错级别：L | M | Q | H
  foreground: '#000000',       // 前景色
  background: '#ffffff',       // 背景色
  margin: 1,                   // 边距（模块数）
  logo: {                      // 中心 logo，可选
    src: '/static/logo.png',
    size: 30,
    padding: 2,
    borderRadius: 4,
    background: '#ffffff'
  }
}

rect 矩形

{
  type: 'rect',
  x: 20,
  y: 300,
  width: 335,
  height: 100,
  fillColor: '#f5f5f5',     // 填充色
  strokeColor: '#e0e0e0',   // 边框色
  strokeWidth: 1,           // 边框宽度
  borderRadius: 8,          // 圆角
  shadow: {                 // 阴影
    offsetX: 0,
    offsetY: 2,
    blur: 10,
    color: 'rgba(0,0,0,0.1)'
  }
}

circle 圆形

{
  type: 'circle',
  x: 187,                  // 圆心 x
  y: 150,                  // 圆心 y
  radius: 50,              // 半径
  fillColor: '#ff6b6b',
  strokeColor: '#ffffff',
  strokeWidth: 2
}

line 线条

{
  type: 'line',
  startX: 20,
  startY: 400,
  endX: 355,
  endY: 400,
  strokeColor: '#e0e0e0',
  strokeWidth: 1,
  lineCap: 'butt',         // 端点样式：butt | round | square
  lineDash: [5, 3]         // 虚线样式 [实线长度, 间隔长度]
}

完整示例

posterConfig: {
  background: {
    type: 'linear-gradient',
    y2: 667,
    colorStops: [
      { offset: 0, color: '#667eea' },
      { offset: 1, color: '#764ba2' }
    ]
  },
  elements: [
    // 白色卡片背景
    {
      type: 'rect',
      x: 20,
      y: 20,
      width: 335,
      height: 627,
      fillColor: '#ffffff',
      borderRadius: 16,
      shadow: {
        offsetY: 4,
        blur: 20,
        color: 'rgba(0,0,0,0.15)'
      }
    },
    // 商品图片
    {
      type: 'image',
      src: '/static/product.jpg',
      x: 40,
      y: 40,
      width: 295,
      height: 295,
      borderRadius: 12
    },
    // 商品标题
    {
      type: 'text',
      text: '这是一个超长的商品标题需要换行显示的效果展示',
      x: 40,
      y: 355,
      fontSize: 18,
      fontWeight: 'bold',
      color: '#333333',
      maxWidth: 200,
      maxLines: 2
    },
    // 价格
    {
      type: 'text',
      text: '¥199.00',
      x: 40,
      y: 420,
      fontSize: 24,
      fontWeight: 'bold',
      color: '#ff4757'
    },
    // 原价
    {
      type: 'text',
      text: '¥399.00',
      x: 140,
      y: 426,
      fontSize: 14,
      color: '#999999',
      textDecoration: 'line-through'
    },
    // 分割线
    {
      type: 'line',
      startX: 40,
      startY: 470,
      endX: 335,
      endY: 470,
      strokeColor: '#eeeeee',
      lineDash: [4, 2]
    },
    // 二维码
    {
      type: 'qrcode',
      text: 'https://example.com/product/123',
      x: 40,
      y: 490,
      size: 100,
      logo: {
        src: '/static/logo.png',
        size: 24
      }
    },
    // 扫码提示
    {
      type: 'text',
      text: '长按识别二维码',
      x: 160,
      y: 520,
      fontSize: 14,
      color: '#666666'
    },
    // 描述文字
    {
      type: 'text',
      text: '立即查看商品详情',
      x: 160,
      y: 545,
      fontSize: 12,
      color: '#999999'
    }
  ]
}

注意事项

1. 网络图片需要配置域名白名单（小程序）
2. 高清绘制时，实际画布尺寸 = width * pixelRatio
3. 绘制大量元素时建议分批绘制
4. 保存相册需要用户授权

更新日志

1.0.0

• 初始版本发布
• 支持图片、文字、二维码绘制
• 支持基础图形绘制
• 支持导出和保存功能