PosterCard.js 纯前端的海报/分享卡片生成库

mengkun2026/07/25 20:152026年7月25日 20:1530

这是一个 纯前端、模板化 的通用海报生成库：你只需要传入「标题、摘要、封面、二维码链接」这几个关键字段，它就能在浏览器里渲染出一张排版精良的分享卡片，并一键导出高清 PNG（带二维码）。

起因是看到 @森木志发布的 TEPoster 插件（ https://litebbs.com/post/111 ），原本是准备移植到 WordPress 平台，后面想着不如干脆做成一个通用的前端插件，这样所有的系统都能使用了~

开源地址：https://github.com/mengkunsoft/PosterCard

在线预览：https://mengkunsoft.github.io/PosterCard/

核心特性

模板化，预置 16 种版式：默认卡片、网易云风格、深色卡片、经典报纸、杂志拼贴、手绘涂鸦……总有一款满足你的需要。
圆角透明边角：模板根节点带圆角时，导出的 PNG 会自动把圆角外区域擦成透明，不再残留白色矩形边角——由模板设计自动生效，无需额外参数。
可扩展：想做自己的风格？新建 tpl/<名>/index.html，用 data-pg-* 行为属性标记可替换内容，调用时填模板名即可。也能注册自定义 helper 函数和 onRender 钩子。

如何使用

引入样式、依赖和脚本，然后调用一行 PosterCard.generate()：

PosterCard.generate({
  fields: {
    title: '文章标题',
    summary: '文章摘要……',
    cover: 'https://example.com/cover.jpg',
    url: 'https://example.com/article/123', // 二维码内容
    siteName: '我的站点'
  },
  style: { template: 'default', width: 400 }
}).then(function (res) {
  // res: { canvas, blob, dataUrl, url, download() }
});

生成后会自动弹出预览，可下载。