拓冰网站定制 
用无头 Chrome 出封面一条命令把 HTML 变成 1080×1440一次渲染一整批做图文最耗时间的从来不是写是出图。一张封面在设计软件里拖半小时改一个字又要重来一遍。后来我干脆把封面写成 HTML用一条命令渲染成图——现在改字就是改文本出图就是跑命令一整批一次跑完。这篇只讲一件事怎么用无头 Chrome 稳定、批量地把 HTML 变成指定尺寸的图以及我实际踩过的 5 个坑。## 一、最短可用命令Windows PowerShell一行出图路径用正斜杠可以少踩转义的坑反斜杠同样可用powershell C:/Program Files/Google/Chrome/Application/chrome.exe --headlessnew --disable-gpu --hide-scrollbars --no-first-run --user-data-dirC:/temp/chrome-shot-01 --window-size1080,1440 --screenshotC:/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-size1080,1440 出的就是 1080×1440 的位图。要在高分辨率下不发虚加 --force-device-scale-factor2 出 2160×2880再交给平台压缩。## 三、批量把命令包进循环powershell$i 0foreach ($n in 1..10) { $i C:/Program Files/Google/Chrome/Application/chrome.exe --headlessnew --disable-gpu --hide-scrollbars --no-first-run --user-data-dirC:/temp/shot-$i --window-size1080,1440 --screenshotC:/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 字左右留够安全边距一句话出图这件事一旦从「设计」变成「渲染」就从手动活变成了可批量的活。 用无头 Chrome 出封面：一条命令把 HTML 变成 1080×1440，一次渲染一整批
用无头 Chrome 出封面一条命令把 HTML 变成 1080×1440一次渲染一整批做图文最耗时间的从来不是写是出图。一张封面在设计软件里拖半小时改一个字又要重来一遍。后来我干脆把封面写成 HTML用一条命令渲染成图——现在改字就是改文本出图就是跑命令一整批一次跑完。这篇只讲一件事怎么用无头 Chrome 稳定、批量地把 HTML 变成指定尺寸的图以及我实际踩过的 5 个坑。## 一、最短可用命令Windows PowerShell一行出图路径用正斜杠可以少踩转义的坑反斜杠同样可用powershell C:/Program Files/Google/Chrome/Application/chrome.exe --headlessnew --disable-gpu --hide-scrollbars --no-first-run --user-data-dirC:/temp/chrome-shot-01 --window-size1080,1440 --screenshotC:/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-size1080,1440 出的就是 1080×1440 的位图。要在高分辨率下不发虚加 --force-device-scale-factor2 出 2160×2880再交给平台压缩。## 三、批量把命令包进循环powershell$i 0foreach ($n in 1..10) { $i C:/Program Files/Google/Chrome/Application/chrome.exe --headlessnew --disable-gpu --hide-scrollbars --no-first-run --user-data-dirC:/temp/shot-$i --window-size1080,1440 --screenshotC:/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 字左右留够安全边距一句话出图这件事一旦从「设计」变成「渲染」就从手动活变成了可批量的活。