从零开始使用 Node.js 构建自动化海报生成服务1. 项目背景在开发小程序时我们需要分享动态生成不同内容的海报实时生成带有文字标注的海报。为了追求高质量、可维护性和高效率我们放弃了传统的 Canvas 方案选用了更为现代化的Satori Resvg Sharp架构。2. 技术选型对比为什么选择这套组合而不是node-canvas特性Satori 架构Canvas 方案开发方式JSX/CSS (Flexbox)命令式 API (填充坐标)自动布局支持自动处理换行/对齐需手动计算换行算法可维护性高修改样式简单低改动布局需重算坐标3. 核心实现方案服务整体链路分为三个步骤Satori: 将 HTML/CSS 结构转换为 SVG 矢量图。Resvg: 将 SVG 渲染为 PNG 图片 buffer。Sharp: 将图片层合成到背景模板上。关键代码逻辑 (posterGenerator.js)JavaScriptconst svg await satori({ type: div, props: { style: { display: flex, position: relative, width: 750, height: 1000 }, children: [ { type: div, props: { style: { position: absolute, top: 388, left: 245, fontSize: 32, color: white }, children: ¥${price}/人 } } ] } }, { width: 750, height: 1000, fonts: [...] });4. 生产环境避坑指南在开发过程中我们遇到了几个核心挑战总结如下“方块”乱码问题根源在于字体文件缺失货币符号。解决方案下载完整版的“思源黑体 (Noto Sans SC)”而非精简版或 Variable 字体。Satori 布局报错必须显式声明display: flex。尺寸不匹配Sharp.composite报错是因为图层尺寸超出背景需确保 Satori 的width/height与背景图像素精确对齐。5. 相关工具网站免费字体网站 阿里巴巴普惠体在线ps工具网站Photopea | Online Photo Editor