Canvas Poster — 画布海报

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 类型 类型 说明 数据字段 kpi-cards KPI 卡片组（2×N 网格） cards: [{label, value, color?, sub?}] bar-chart 横向柱状图 bars: [{name, value, color?, pct?}] pie-chart 饼图/环图 + 图例 slices: [{name, value, pct?}], donut?: boolean|number, center?: string line-chart 折线图（多线+图例） lines: [{name, data: number[], color?}], xLabels?: string[], showDots?: boolean, showLegend?: boolean area-chart 面积图 areas: [{name, data: number[], color?}], xLabels?: string[], opacity?: number, showDots?: boolean, showLegend?: boolean scatter-chart 散点图 points: [{x, y, color?}], dotRadius?: number table 表格 headers: string[], rows: string[][] tips 建议卡片（绿色框） items: string[] divider 分隔线 无需数据 核心模块 lib/core.js — 通用绘制工具（圆角矩形、饼图、柱状图、格式化） lib/builder.js — Section DSL → Canvas 构建器 发图到飞书 IM 图片上传有 ECONNRESET 问题，推荐方案： 生成 PNG → 上传飞书云盘 → 开权限 → 发链接 或嵌入飞书文档直接预览 node examples/demo.js /tmp/poster.png