canvas-poster

服务端长图海报生成引擎，基于 @napi-rs/canvas。

快速开始

cd skills/canvas-poster && npm install
node examples/demo.js /tmp/my-poster.png

核心用法：Section DSL

const { buildPoster } = require('./lib/builder');

buildPoster({
  width: 800,
  header: {
    bg: '#1e40af',
    title: '📊 数据看板',
    subtitle: '2026年3月',
  },
  sections: [
    {
      type: 'kpi-cards',
      title: '📊 概览',
      cards: [
        { label: '总费用', value: '¥92.2万', color: 'red' },
        { label: '人数', value: '745人' },
        { label: '人均', value: '¥1,238' },
        { label: '达成率', value: '87.2%', color: 'green' },
      ],
    },
    {
      type: 'bar-chart',
      title: '💼 费用结构',
      bars: [
        { name: '住宿费', value: 380700, color: '#3b82f6' },
        { name: '交通费', value: 290000, color: '#22c55e' },
      ],
    },
    {
      type: 'pie-chart',
      title: '🗺️ 路线分布',
      slices: [
        { name: '北京→武汉', value: 180000 },
        { name: '北京→上海', value: 120000 },
      ],
    },
    {
      type: 'table',
      title: '⚠️ 异常分析',
      headers: ['部门', '异常金额', '占比'],
      rows: [
        ['AI应用中心', '¥64,121', '7.0%'],
      ],
    },
    {
      type: 'tips',
      title: '💡 管理建议',
      items: ['建议1', '建议2', '建议3'],
    },
  ],
  footer: '🦞 自动生成',
  output: '/tmp/poster.png',
});

Section 类型

核心模块

• lib/core.js — 通用绘制工具（圆角矩形、饼图、柱状图、格式化）
• lib/builder.js — Section DSL → Canvas 构建器

发图到飞书

IM 图片上传有 ECONNRESET 问题，推荐方案：

1. 生成 PNG → 上传飞书云盘 → 开权限 → 发链接
2. 或嵌入飞书文档直接预览

node examples/demo.js /tmp/poster.png