Back to Details

htmlcsstoimage

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

HTMLCSStoImage API

HTMLCSStoImage API

Use the HTMLCSStoImage API via direct 
curl
calls to generate images from HTML/CSS or capture screenshots of web pages.
Official docs: 
https://docs.htmlcsstoimage.com/
通过直接调用
curl
来使用HTMLCSStoImage API，以从HTML/CSS生成图片或捕获网页截图。
官方文档：
https://docs.htmlcsstoimage.com/

When to Use

使用场景

Use this skill when you need to:
  • Generate images from HTML/CSS for social cards, thumbnails, certificates
  • Screenshot web pages or specific elements on a page
  • Create dynamic images with custom fonts and styling
  • Generate OG images for social media sharing
在以下场景中可以使用此技能：
  • 从HTML/CSS生成图片，用于社交卡片、缩略图、证书
  • 截图网页或页面上的特定元素
  • 创建带有自定义字体和样式的动态图片
  • 生成用于社交媒体分享的OG图片

Prerequisites

前置条件

  1. Sign up at HTMLCSStoImage and create an account
  2. Go to your Dashboard to get your User ID and API Key
  3. Store credentials in environment variables
bash
export HCTI_USER_ID="your-user-id"
export HCTI_API_KEY="your-api-key"
  1. 在HTMLCSStoImage上注册并创建账户
  2. 进入你的控制台获取用户ID和API密钥
  3. 将凭证存储到环境变量中
bash
export HCTI_USER_ID="your-user-id"
export HCTI_API_KEY="your-api-key"

Authentication

身份验证

The API uses HTTP Basic Authentication:
  • Username: Your User ID
  • Password: Your API Key
该API使用HTTP基本身份验证：
  • 用户名：你的用户ID
  • 密码：你的API密钥

Pricing

定价

  • Free tier: 50 images/month
  • Paid plans available for higher volume
Important: When using 
$VAR
in a command that pipes to another command, wrap the command containing 
$VAR
in 
bash -c '...'
. Due to a Claude Code bug, environment variables are silently cleared when pipes are used directly.
bash
bash -c 'curl -s "https://api.example.com" -H "Authorization: Bearer $API_KEY"'
  • 免费套餐：每月50张图片
  • 提供更高用量的付费套餐
重要提示： 当在包含管道的命令中使用
$VAR
时，请将包含
$VAR
的命令用
bash -c '...'
包裹。由于Claude Code的bug，直接使用管道时环境变量会被静默清除。
bash
bash -c 'curl -s "https://api.example.com" -H "Authorization: Bearer $API_KEY"'

How to Use

使用方法

All examples below assume you have 
HCTI_USER_ID
and 
HCTI_API_KEY
set.
The base URL for the API is:
  • https://hcti.io/v1/image
以下所有示例均假设你已设置好
HCTI_USER_ID
和
HCTI_API_KEY
。
API的基础URL为：
  • https://hcti.io/v1/image

1. Simple HTML to Image

1. 简单HTML转图片

Generate an image from basic HTML.
Write to 
/tmp/hcti_html.txt
:
html
<div style="padding:20px;background:blue;color:white;font-size:24px;">Hello World</div>
Then run:
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt"'
Response:
json
{
  "url": "https://hcti.io/v1/image/abc123..."
}
The returned URL is permanent and served via Cloudflare CDN.
从基础HTML生成图片。
写入到
/tmp/hcti_html.txt
：
html
<div style="padding:20px;background:blue;color:white;font-size:24px;">Hello World</div>
然后运行：
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt"'
响应：
json
{
  "url": "https://hcti.io/v1/image/abc123..."
}
返回的URL是永久有效的，通过Cloudflare CDN提供服务。

2. HTML with CSS Styling

2. 带CSS样式的HTML转图片

Generate a styled card image.
Write to 
/tmp/hcti_html.txt
:
html
<div class="card"><h1>Welcome</h1><p>This is a styled card</p></div>
Write to 
/tmp/hcti_css.txt
:
css
.card { padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white; font-family: sans-serif; text-align: center; } h1 { margin: 0 0 10px 0; } p { margin: 0; opacity: 0.9; }
Then run:
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt" --data-urlencode "css@/tmp/hcti_css.txt"'
生成带样式的卡片图片。
写入到
/tmp/hcti_html.txt
：
html
<div class="card"><h1>Welcome</h1><p>This is a styled card</p></div>
写入到
/tmp/hcti_css.txt
：
css
.card { padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white; font-family: sans-serif; text-align: center; } h1 { margin: 0 0 10px 0; } p { margin: 0; opacity: 0.9; }
然后运行：
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt" --data-urlencode "css@/tmp/hcti_css.txt"'

3. Use Google Fonts

3. 使用Google Fonts

Generate an image with custom fonts.
Write to 
/tmp/hcti_html.txt
:
html
<div class="title">Beautiful Typography</div>
Write to 
/tmp/hcti_css.txt
:
css
.title { font-family: Playfair Display; font-size: 48px; padding: 40px; background: #1a1a2e; color: #eee; }
Then run:
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt" --data-urlencode "css@/tmp/hcti_css.txt" -d "google_fonts=Playfair Display"'
Multiple fonts: 
google_fonts=Playfair Display|Roboto|Open Sans
生成带自定义字体的图片。
写入到
/tmp/hcti_html.txt
：
html
<div class="title">Beautiful Typography</div>
写入到
/tmp/hcti_css.txt
：
css
.title { font-family: Playfair Display; font-size: 48px; padding: 40px; background: #1a1a2e; color: #eee; }
然后运行：
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt" --data-urlencode "css@/tmp/hcti_css.txt" -d "google_fonts=Playfair Display"'
多字体使用：
google_fonts=Playfair Display|Roboto|Open Sans

4. Screenshot a Web Page (URL to Image)

4. 网页截图（URL转图片）

Capture a screenshot of any public URL:
Write to 
/tmp/hcti_url.txt
:
https://example.com
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt"'
捕获任意公开URL的截图：
写入到
/tmp/hcti_url.txt
：
https://example.com
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt"'

5. Screenshot with Delay (for JavaScript)

5. 延迟截图（适配JavaScript）

Wait for JavaScript to render before capturing:
Write to 
/tmp/hcti_url.txt
:
https://example.com
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "ms_delay=1500"'
ms_delay
waits specified milliseconds before taking the screenshot.
等待JavaScript渲染完成后再捕获截图：
写入到
/tmp/hcti_url.txt
：
https://example.com
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "ms_delay=1500"'
ms_delay
会在截图前等待指定的毫秒数。

6. Capture Specific Element (Selector)

6. 捕获特定元素（选择器）

Screenshot only a specific element on the page:
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "selector=h1"'
Use any CSS selector: 
#id
, 
.class
, 
div > p
, etc.
仅截图页面上的特定元素：
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "selector=h1"'
可使用任意CSS选择器：
#id
、
.class
、
div > p
等。

7. High Resolution (Retina)

7. 高分辨率（Retina）

Generate 2x or 3x resolution images.
Write to 
/tmp/hcti_html.txt
:
html
<div style="padding:20px;font-size:18px;">High Resolution Image</div>
Then run:
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt" -d "device_scale=2"'
device_scale
accepts values 1-3 (default: 1).
生成2倍或3倍分辨率的图片。
写入到
/tmp/hcti_html.txt
：
html
<div style="padding:20px;font-size:18px;">High Resolution Image</div>
然后运行：
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt" -d "device_scale=2"'
device_scale
接受1-3之间的值（默认值：1）。

8. Custom Viewport Size

8. 自定义视口尺寸

Set specific viewport dimensions:
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "viewport_width=1200" -d "viewport_height=630"'
Perfect for generating OG images (1200x630).
设置特定的视口尺寸：
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "viewport_width=1200" -d "viewport_height=630"'
非常适合生成OG图片（1200x630）。

9. Full Page Screenshot

9. 整页截图

Capture the entire page height:
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "full_screen=true"'
捕获页面的完整高度：
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "full_screen=true"'

10. Block Cookie Banners

10. 屏蔽Cookie横幅

Automatically hide consent/cookie popups:
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "block_consent_banners=true"'
自动隐藏授权/Cookie弹窗：
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "url@/tmp/hcti_url.txt" -d "block_consent_banners=true"'

11. Download Image Directly

11. 直接下载图片

Add 
?dl=1
to the image URL to trigger download.
Write to 
/tmp/hcti_html.txt
:
html
<div style="padding:20px;background:green;color:white;">Download Me</div>
Then run:
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt"' | jq -r '.url'
This will output the image URL. Copy the URL and download with:
bash
curl -s "https://hcti.io/v1/image/<your-image-id>?dl=1" --output image.png
在图片URL后添加
?dl=1
即可触发下载。
写入到
/tmp/hcti_html.txt
：
html
<div style="padding:20px;background:green;color:white;">Download Me</div>
然后运行：
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt"' | jq -r '.url'
这会输出图片URL。复制该URL后，使用以下命令下载：
bash
curl -s "https://hcti.io/v1/image/<your-image-id>?dl=1" --output image.png

12. Resize on the Fly

12. 动态调整尺寸

Add width/height query parameters to resize.
Write to 
/tmp/hcti_html.txt
:
html
<div style="padding:40px;background:purple;color:white;font-size:32px;">Resizable</div>
Then run:
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt"' | jq -r '.url'
This outputs the image URL. Add query parameters to resize:
Original: https://hcti.io/v1/image/<your-image-id>
Thumbnail: https://hcti.io/v1/image/<your-image-id>?width=200&height=200
添加宽/高查询参数来调整图片尺寸。
写入到
/tmp/hcti_html.txt
：
html
<div style="padding:40px;background:purple;color:white;font-size:32px;">Resizable</div>
然后运行：
bash
bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" --data-urlencode "html@/tmp/hcti_html.txt"' | jq -r '.url'
这会输出图片URL。添加查询参数来调整尺寸：
原图：https://hcti.io/v1/image/<your-image-id>
缩略图：https://hcti.io/v1/image/<your-image-id>?width=200&height=200

Response Format

响应格式

Success (200):
json
{
  "url": "https://hcti.io/v1/image/be4c5118-fe19-462b-a49e-48cf72697a9d"
}
Error (400):
json
{
  "error": "Bad Request",
  "statusCode": 400,
  "message": "HTML is Required"
}
成功（200）：
json
{
  "url": "https://hcti.io/v1/image/be4c5118-fe19-462b-a49e-48cf72697a9d"
}
错误（400）：
json
{
  "error": "Bad Request",
  "statusCode": 400,
  "message": "HTML is Required"
}

Guidelines

注意事项

  1. Use 
    --data-urlencode
    for HTML/CSS    : Properly encodes special characters
  2. URLs must be public: Pages requiring login cannot be screenshotted
  3. Use 
    ms_delay
    for JS-heavy pages    : Give time for JavaScript to render
  4. Choose appropriate 
    device_scale
    : 2x for retina displays, 1x for standard
  5. Image URLs are permanent: They're cached on Cloudflare CDN globally
  6. Use selectors for cropping: More efficient than full page + manual crop
  1. 对HTML/CSS使用
    --data-urlencode
    ：正确编码特殊字符
  2. URL必须是公开的：需要登录的页面无法被截图
  3. 对JS密集型页面使用
    ms_delay
    ：给JavaScript留出渲染时间
  4. 选择合适的
    device_scale
    ：Retina显示器用2x，标准显示器用1x
  5. 图片URL是永久有效的：它们会在Cloudflare CDN上全球缓存
  6. 使用选择器进行裁剪：比整页截图后手动裁剪更高效