更新记录

0.6.3（2026-10-21） 下载此版本

首个版本发布：

• JSON 模板驱动：6 类元素（文字/图片/色块/圆/线/二维码），渐变、旋转、阴影、自动换行
• 5 套精设计模板一键切换，模板 + 数据分离（fields 占位符动态填充，服务端可下发）
• 内嵌二维码：纯 JS 编码零依赖，真机可扫
• 1:1 高清导出（背板按 schema.width × pixelRatio 渲染，零重采样）
• 保存分流：H5 浏览器下载 / App·小程序存相册
• 已验证 H5 与微信小程序（真机）

平台兼容性

uni-app(3.8.6)

赢冬海报生成器 yingdong-poster

定位：与 canvas 海报类竞品（头部款 2020 年发布、累计 3929 下载、已停更多年）的差异点 在于声明式 JSON 模板——竞品把绘制逻辑写死在代码里，我们让海报变成一份数据： 改 JSON 即改海报，服务端可按用户动态下发模板实现"千人千面"活动页。 纯前端 canvas 实现，零外部依赖：无 key、无 CORS、无域名白名单问题。

特性

• 支持 vue2 / vue3；H5、微信小程序、App（vue）
• 声明式元素：rect / circle / line / text / image / qrcode（内嵌编码器，零依赖）
• 视觉能力：线性渐变填充、透明度、旋转、阴影、自动换行（中文友好）、圆角裁切、aspectFill 裁切
• 模板 + 数据分离：schema 挖 {{key}} 占位符 + fields 传值—— 开发定模板、运营填表单，终端用户无需理解 JSON；再往上可接可视化设计器
• 图片自动预加载、加载失败占位
• 2 倍像素导出高清 PNG（pixelRatio 可调），离屏背板 1:1 导出零重采样
• schema / fields 变更自动重绘；ref API：render() / saveToAlbum()（H5 自动转浏览器下载）/ getPosterPath()
• 组件为纯离屏输出，不渲染可见内容；监听 @success 拿临时图片路径自行展示
• 模板 + 数据分离：schema 挖 {{key}} 占位符 + fields 传值—— 开发定模板、运营填表单，终端用户无需理解 JSON；再往上可接可视化设计器

快速上手

<template>
    <!-- 运营视图：只填表单，不碰 JSON -->
    <input v-model="fields.title" placeholder="主标题" />
    <yingdong-poster ref="poster" :schema="schema" :fields="fields" :display-width="340" @success="onSuccess" />
</template>

<script>
export default {
    data() {
        return {
            // 模板由开发者提前定好，占位符挖给运营填
            schema: {
                width: 750,
                height: 1334,
                background: '#0f172a',
                elements: [
                    { type: 'rect', x: 0, y: 0, width: 750, height: 420, fill: '#3b82f6' },
                    { type: 'text', x: 60, y: 110, text: '{{title}}', fontSize: 56, color: '#ffffff', fontWeight: 'bold' }
                ]
            },
            fields: { title: '夏日大促 全场五折' }
        }
    },
    methods: {
        onSuccess(tempFilePath) {
            console.log('海报已生成：', tempFilePath)
        }
    }
}
</script>

典型接入场景

场景 A：给页面加"生成海报"按钮（电商商品图 / 分享图）

不传 preview-width 时组件完全离屏，页面上只需要一个按钮：

<template>
    <button @click="make">生成分享海报</button>
    <image v-if="path" :src="path" mode="widthFix" />
    <yingdong-poster ref="poster" :schema="tpl" :fields="fields" @success="p => path = p" />
</template>
<script>
export default {
    data() {
        return {
            tpl: { /* 商品海报模板，可直接抄插件内置示例改配色文案 */ },
            // 商品数据运行时填入模板占位符
            fields: { title: '无线蓝牙耳机', price: '¥ 199', qrUrl: 'https://xx.com/p/1001' },
            path: ''
        }
    },
    methods: {
        make() { this.$refs.poster.render() }
    }
}
</script>

场景 B：分销邀请海报（每人专属二维码，模板存服务端）

模板 JSON 放在服务端，运营改模板无需发版；用户数据通过 fields 填入占位符，每个人的二维码都不同：

onLoad() {
    // 1. 服务端下发模板（{ width, height, background, elements }）
    uni.request({
        url: 'https://你的后端/api/poster-template?scene=invite',
        success: (res) => { this.tpl = res.data }
    })
    // 2. 用户数据填充 {{nickname}} / {{inviteUrl}} 占位符
    const user = uni.getStorageSync('userInfo')
    this.fields = {
        nickname: user.nickname,
        inviteUrl: 'https://xx.com/inv?code=' + user.inviteCode
    }
},
methods: {
    make() { this.$refs.poster.render() }   // 出图后 @success 拿路径，可存相册/分享
}

保存与分享

• saveToAlbum()：App/小程序存相册（自动处理授权提示），H5 触发浏览器下载
• 拿到 @success 的临时路径后，也可以自行接 uni.share 或业务逻辑

Schema 说明

元素类型：

fill 渐变（background/rect/circle 通用）：

{ "type": "linear", "from": [0, 0], "to": [750, 1334], "stops": ["#4f46e5", "#db2777"] }

Props

Events / Methods

维护说明

组件持续更新维护中，欢迎通过官方渠道反馈需求与建议—— 你的每一个需求都可能出现在下一个版本里。