用代码做商业餐饮海报：字体子集、GrabCut 抠图与无损导出避坑指南
在给可能实验室（大梦餐饮）制作午市特惠、台风天畅饮、球赛之夜等一系列商业促销海报时，我做了一个决定：不打开 Photoshop，全部用纯 HTML + CSS + Python 脚本来做。 用 Web 技术做海报有极大的优势：布局可以用 Flexbox/Grid 极速调整、文案改动只需改一行字符串、多尺寸适配通过 CSS 变量瞬间完成，而且全套物料可以纳入 Git 版本管理。 但在真正借助 Claude Fable 5 与 Grok Imagine 图像模型 将网页无损导出为 300DPI 商业级印刷海报的过程中，我们踩遍了前端渲染、字体子集化、图像抠图与色彩空间的几乎所有暗坑。 这篇文章把这些工程细节与解决方案彻底拆解，给同样想用代码做设计的朋友一份避坑指南。 一、 导出引擎的演进：从 html2canvas 到 Chrome Headless 网页在浏览器里看着很美，但要导出一张像素完美（Pixel Perfect）的 1600×2400 高清大图，首先要选对渲染引擎。 1. html2canvas 的「翻车」表现 最初我们尝试了老牌的 html2canvas，结果导出的图片与原页面差异巨大： ...