用无头 Chrome 出封面：一条命令把 HTML 变成 1080×1440，一次渲染一整批

做图文最耗时间的从来不是写，是出图。一张封面在设计软件里拖半小时，改一个字又要重来一遍。后来我干脆把封面写成 HTML，用一条命令渲染成图——现在改字就是改文本，出图就是跑命令，一整批一次跑完。这篇只讲一件事：怎么用无头 Chrome 稳定、批量地把 HTML 变成指定尺寸的图，以及我实际踩过的 5 个坑。## 一、最短可用命令Windows + PowerShell，一行出图（路径用正斜杠可以少踩转义的坑，反斜杠同样可用）：powershell& "C:/Program Files/Google/Chrome/Application/chrome.exe" --headless=new --disable-gpu --hide-scrollbars --no-first-run --user-data-dir="C:/temp/chrome-shot-01" --window-size=1080,1440 --screenshot="C:/out/cover.png" "file:///C:/work/cover.html"把 --window-size 换成 1280,720，出来的就是 16:9 的横版封面。HTML 里按像素把宽度写死就行，这个场景完全不需要做响应式。## 二、5 个坑，全是实测踩出来的**1）必须给独立的 --user-data-dir。**不给的话，Chrome 会尝试附着到你正在运行的那个实例上，–screenshot 直接不生效——不报错，图就是不生成。我一开始怀疑是路径写错了，查了很久。**2）重复渲染同一个 HTML，可能命中缓存。**症状是：HTML 改了，出来的图还是旧的。解法有两个——每次换一个新的 --user-data-dir，或者让输出文件名带上时间戳。3）不写 --hide-scrollbars，右边会多一条白边。做 3:4 竖版封面时这条边特别明显，等于白做。4）中文字体必须显式声明。无头环境下的字体回退和桌面不一样，不写清楚会出现方框或者字形突变。我的做法是在 HTML 里显式写：cssfont-family: "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;5）高分屏要加缩放。–window-size=1080,1440 出的就是 1080×1440 的位图。要在高分辨率下不发虚，加 --force-device-scale-factor=2 出 2160×2880，再交给平台压缩。## 三、批量：把命令包进循环powershell$i = 0foreach ($n in 1..10) { $i++ & "C:/Program Files/Google/Chrome/Application/chrome.exe" --headless=new --disable-gpu --hide-scrollbars --no-first-run --user-data-dir="C:/temp/shot-$i" --window-size=1080,1440 --screenshot="C:/out/cover-$i.png" "file:///C:/work/cover-$i.html"}关键就一点：每张图一个独立的 user-data-dir。它就是我从「偶发失败」走到「稳定批量」的那一步。## 四、跑完没出图，按这 4 步查1. 先看进程退出码，非 0 基本是参数或路径问题；2. 再看输出文件有没有真的生成、大小是否合理（几十 KB 以上）；3. 换一个全新的 --user-data-dir 重跑一次，这一步能解决大部分「静默失败」；4. 用普通 Chrome 直接打开那个 HTML，确认是版式问题还是渲染问题。## 五、真正决定效率的是版式，不是命令命令跑通之后，瓶颈会立刻从「怎么出图」变成「出什么图」。我最后把封面收敛成 8 个固定版式，按内容类型选，不再每次重新设计：| 版式 | 用在哪 ||—|—|| 清单·编号卡 | 通用默认 || 2×2 网格 | 正好 4 个并列点 || 对错对比 | 错误做法 vs 正确做法 || 大字标题 | 只有一个强观点 || 大数字 | 数字是主角（4 步 / 7 天） || 三栏横排 | 3 个关键词并列 || 步骤流程 | 有先后顺序 || 左右对照 | 以前 vs 现在 |固定版式换来两件事：风格稳定和可批量。每天自创结构，等于每天重新踩一遍排版坑。## 六、中文封面的几条硬规则- 主标题别超 10 个字，字号只留三档（超大 / 中 / 小），不要出现第四种- 断行按像素宽度切，不要按字数切。把「AI工具清单」切成「AI工 / 具清单」就是典型错误- 左右各留 70px 安全边距，避免被平台裁掉- 卡片里的文字必须单行放得下，放不下就减字，不要缩字号## 七、自查清单- [ ] 每条命令都带独立的 --user-data-dir- [ ] 输出文件名不重复（防缓存）- [ ] --hide-scrollbars 加了- [ ] 中文字体显式声明了- [ ] 尺寸符合目标平台（3:4 或 16:9）- [ ] 主标题不超过 10 字，左右留够安全边距一句话：出图这件事，一旦从「设计」变成「渲染」，就从手动活变成了可批量的活。