概述

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  body {
    width: 1080px;
    height: 1440px;   /* 3:4 portrait */
    margin: 0;
    overflow: hidden;
    font-family: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  }
</style>
</head>
<body>
  <!-- Your content here -->
</body>
</html>

Step 2: Chrome Headless Screenshot

# 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 (auto-detect chrome/chromium)
google-chrome --headless=new --disable-gpu \
  --screenshot="output.png" \
  --window-size=1080,1440 \
  --hide-scrollbars \
  "file:///absolute/path/to/your.html"

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

版本历史

共 1 个版本

v1.0.1 当前

2026-03-30 07:27 安全安全

安全检测

腾讯云安全 (Keen)

安全，无风险

查看报告

腾讯云安全 (Sanbu)