更新记录

1.0.0（2026-06-11） 下载此版本

• 首次发布海报画板组件。
• 支持图片、文字、多行省略、标签、线条、头像、二维码图片位绘制。
• 内置商品海报和邀请海报模板，支持渲染后导出图片。

平台兼容性

uni-app(3.97)

JQ-PosterBoard JQ海报画板生成器

JQ-PosterBoard 是一个 uni-app 海报画板组件，适合商品分享图、活动邀请图、课程海报、分销海报、门店二维码海报等场景。插件不申请系统权限，不包含网络请求，也不内置广告 SDK。

特点

• 使用配置对象绘制海报，便于后端下发模板或前端维护模板。
• 支持矩形、圆角矩形、线条、文本、多行省略、标签、图片、头像、二维码图片位。
• 内置商品海报、邀请海报模板工具，导入后可直接改字段使用。
• 支持 render()、exportImage()、renderAndExport() 方法，方便生成后保存或分享。
• 符合 uni_modules / easycom 组件规范，导入后可直接使用 <jq-poster-board />。

快速使用

<template>
  <view>
    <jq-poster-board ref="posterBoard" :poster="poster" :hidden="false" />
    <button @click="makePoster">生成海报</button>
  </view>
</template>

<script>
import { createProductPoster } from '@/uni_modules/JQ-PosterBoard/js_sdk/jq-poster-board/templates.js'

export default {
  data() {
    return {
      poster: createProductPoster({
        title: '618 活动商品海报',
        price: '59.90',
        originalPrice: '99.00',
        badge: '新人专享',
        shopName: '我的小店'
      })
    }
  },
  methods: {
    makePoster() {
      this.$refs.posterBoard.renderAndExport(this.poster).then((res) => {
        console.log('海报图片路径', res.tempFilePath)
      })
    }
  }
}
</script>

组件属性

方法

exportImage 支持 pixelRatio、fileType、quality 参数。推荐移动端分享图使用 pixelRatio: 2。

poster 配置

{
  width: 750,
  height: 1100,
  background: '#ffffff',
  pixelRatio: 2,
  elements: [
    { type: 'rect', x: 36, y: 36, width: 678, height: 1028, radius: 28, color: '#ffffff' },
    { type: 'image', x: 66, y: 66, width: 618, height: 430, radius: 22, src: '/static/demo.png' },
    { type: 'tag', x: 66, y: 528, text: '限时优惠', background: '#fff1f2', color: '#be123c' },
    { type: 'text', x: 66, y: 610, width: 560, maxLines: 2, text: '海报标题', fontSize: 42 },
    { type: 'line', x1: 66, y1: 930, x2: 684, y2: 930, width: 1, color: '#e5e7eb' },
    { type: 'qrcode', x: 554, y: 958, width: 108, height: 108, src: '/static/qrcode.png' }
  ]
}

元素类型

rect

绘制矩形或圆角矩形。

text

绘制单行或多行文本。

image / avatar / qrcode

绘制图片。avatar 会默认裁成圆形，qrcode 用于二维码图片位。插件不负责生成二维码内容，建议传入已有二维码图片路径或网络图片地址。

tag

绘制胶囊标签。

事件

常见问题

为什么二维码不是插件内部生成？

真实业务里二维码通常来自后端、微信小程序码、活动短链或平台接口。插件提供二维码图片位，避免在前端重复实现各平台差异较大的码生成流程。

网络图片不显示怎么办？

确认图片地址支持当前平台访问，并且小程序端已配置合法域名。跨域或防盗链图片建议先下载为本地临时路径再绘制。

导出图片失败怎么办？

确认 canvas 已经渲染完成后再调用 exportImage()。如果同页存在多个海报组件，需要给每个组件设置唯一 canvasId。

平台说明

本插件是纯前端 canvas 组件，不涉及 Android/iOS 原生权限。不同平台的 canvas 行为可能存在差异，建议接入方在目标平台上做一次生成和导出测试。当前版本不支持 nvue。

隐私与权限

• 不申请系统权限。
• 不采集用户数据。
• 不包含网络请求、上传、统计或云端存储能力。
• 不内置广告 SDK；市场侧可配置免费广告解锁下载，仅为 DCloud 市场下载侧能力。