HTML to Image
Generate images from HTML+CSS using Chrome headless screenshots. Ideal for covers, posters, info cards, and any text-heavy visual content. Zero API cost, 100% accurate text rendering.
Use Cases
- - ✅ Cover images (title + subtitle + tags)
- ✅ Info cards (data display, comparison charts)
- ✅ Text layout images (quote cards, highlight cards)
- ❌ Illustrations, photos (use an AI image generation tool)
Workflow
Step 1: Write HTML
Create an HTML file with inline CSS:
CODEBLOCK0
Step 2: Chrome Headless Screenshot
CODEBLOCK1
Chrome path can be overridden via CHROME_PATH environment variable.
Common Sizes
| Purpose | Width×Height | Ratio |
|---|
| Portrait cover | 1080×1440 | 3:4 |
| Square cover |
1080×1080 | 1:1 |
| Widescreen cover | 1920×1080 | 16:9 |
| Social media banner | 1280×720 | 16:9 |
Tips
- - Chrome GPU error logs can be safely ignored
- Use
--force-device-scale-factor=2 for retina/high-DPI output (doubles pixel dimensions) - Use
--force-device-scale-factor=1 for exact pixel dimensions - CJK fonts: PingFang SC (macOS built-in), Noto Sans SC (Linux, install via
apt install fonts-noto-cjk) - For complex layouts, test in a regular browser first, then screenshot
HTML 转图片
使用 Chrome 无头浏览器截图，从 HTML+CSS 生成图片。适用于封面、海报、信息卡片以及任何文字密集的视觉内容。零 API 成本，100% 准确的文字渲染。
使用场景
- - ✅ 封面图片（标题 + 副标题 + 标签）
- ✅ 信息卡片（数据展示、对比图表）
- ✅ 文字排版图片（引用卡片、高亮卡片）
- ❌ 插画、照片（请使用 AI 图片生成工具）
工作流程
第一步：编写 HTML
创建一个包含内联 CSS 的 HTML 文件：
html
第二步：Chrome 无头浏览器截图
bash
macOS
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome \
--headless=new \
--disable-gpu \
--screenshot=output.png \
--window-size=1080,1440 \
--hide-scrollbars \
--force-device-scale-factor=2 \
file:///absolute/path/to/your.html
Linux（自动检测 chrome/chromium）
google-chrome --headless=new --disable-gpu \
--screenshot=output.png \
--window-size=1080,1440 \
--hide-scrollbars \
file:///absolute/path/to/your.html
Chrome 路径可通过 CHROME_PATH 环境变量覆盖。
常用尺寸
| 用途 | 宽度×高度 | 比例 |
|---|
| 竖版封面 | 1080×1440 | 3:4 |
| 方形封面 |
1080×1080 | 1:1 |
| 宽屏封面 | 1920×1080 | 16:9 |
| 社交媒体横幅 | 1280×720 | 16:9 |
提示
- - Chrome GPU 错误日志可以安全忽略
- 使用 --force-device-scale-factor=2 获得视网膜/高 DPI 输出（像素尺寸翻倍）
- 使用 --force-device-scale-factor=1 获得精确像素尺寸
- 中日韩字体：PingFang SC（macOS 内置）、Noto Sans SC（Linux，通过 apt install fonts-noto-cjk 安装）
- 对于复杂布局，先在常规浏览器中测试，然后再截图
