html-to-image

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HTML to Image API

HTML转图片API

Convert HTML/CSS to PNG, WebP, or PDF via

html2png.dev

通过

html2png.dev

将HTML/CSS转换为PNG、WebP或PDF格式。

Endpoint

接口端点

POST https://html2png.dev/api/convert

POST https://html2png.dev/api/convert

Request

请求方式

Send HTML as raw body or JSON:

bash

curl -X POST "https://html2png.dev/api/convert?width=1200&height=630" \
  -H "Content-Type: text/html" \
  -d '<div style="padding: 40px;">Content</div>'

bash

curl -X POST "https://html2png.dev/api/convert" \
  -H "Content-Type: application/json" \
  -d '{"html": "<div>...</div>", "width": 1200}'

以原始内容或JSON格式发送HTML：

bash

curl -X POST "https://html2png.dev/api/convert?width=1200&height=630" \
  -H "Content-Type: text/html" \
  -d '<div style="padding: 40px;">Content</div>'

bash

curl -X POST "https://html2png.dev/api/convert" \
  -H "Content-Type: application/json" \
  -d '{"html": "<div>...</div>", "width": 1200}'

Parameters

参数说明

Parameter	Type	Default	Description
`html`	string	required	HTML content
`width`	int	1200	Width in px
`height`	int	630	Height in px
`format`	string	png	png, webp, pdf
`deviceScaleFactor`	float	2	Retina scale (1-4)
`delay`	int	0	Wait ms before capture
`selector`	string	body	CSS selector to capture
`omitBackground`	bool	false	Transparent bg
`colorScheme`	string	-	light or dark
`zoom`	float	1	Viewport zoom

参数名称	类型	默认值	描述说明
`html`	string	必填项	HTML内容
`width`	int	1200	宽度（像素）
`height`	int	630	高度（像素）
`format`	string	png	输出格式：png、webp、pdf
`deviceScaleFactor`	float	2	视网膜缩放比例（1-4）
`delay`	int	0	捕获前等待时长（毫秒）
`selector`	string	body	要捕获的CSS选择器
`omitBackground`	bool	false	是否使用透明背景
`colorScheme`	string	-	亮色或暗色模式
`zoom`	float	1	视口缩放比例

Response

响应示例

json

{
  "success": true,
  "url": "https://html2png.dev/api/blob/abc.png",
  "format": "png",
  "cached": false
}

json

{
  "success": true,
  "url": "https://html2png.dev/api/blob/abc.png",
  "format": "png",
  "cached": false
}

CDN Resources

CDN资源推荐

Use these CDNs for high-quality designs:

Tailwind CSS (preferred):

html

<script src="https://cdn.tailwindcss.com"></script>

Google Fonts:

html

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
  rel="stylesheet"
/>

Icons (use instead of inline SVGs):

Lucide:
```
https://unpkg.com/lucide@latest
```

Font Awesome:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css

Images:

Unsplash:
```
https://images.unsplash.com/photo-xxx
```
Any direct image URL

使用以下CDN资源实现高质量设计：

Tailwind CSS（推荐）：

html

<script src="https://cdn.tailwindcss.com"></script>

Google Fonts：

html

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
  rel="stylesheet"
/>

图标库（替代内联SVG）：

Lucide:
```
https://unpkg.com/lucide@latest
```

Font Awesome:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css

图片资源：

Unsplash:
```
https://images.unsplash.com/photo-xxx
```
任何直接图片URL

Example with Tailwind + Fonts + Icons

Tailwind + 字体 + 图标示例

html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/lucide@latest"></script>
  </head>
  <body
    class="bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center"
    style="width: 1200px; height: 630px; font-family: 'Inter', sans-serif;"
  >
    <div
      class="bg-white/10 backdrop-blur-lg rounded-2xl p-12 text-white text-center"
    >
      <i data-lucide="sparkles" class="w-16 h-16 mx-auto mb-4"></i>
      <h1 class="text-6xl font-extrabold mb-4">Hello World</h1>
      <p class="text-2xl opacity-90">Beautiful generated image</p>
    </div>
    <script>
      lucide.createIcons();
    </script>
  </body>
</html>

Request with delay for resources to load:

bash

curl -X POST "https://html2png.dev/api/convert?width=1200&height=630&delay=1000&deviceScaleFactor=2" \
  -H "Content-Type: text/html" \
  -d '<!DOCTYPE html>...</html>'

html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/lucide@latest"></script>
  </head>
  <body
    class="bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center"
    style="width: 1200px; height: 630px; font-family: 'Inter', sans-serif;"
  >
    <div
      class="bg-white/10 backdrop-blur-lg rounded-2xl p-12 text-white text-center"
    >
      <i data-lucide="sparkles" class="w-16 h-16 mx-auto mb-4"></i>
      <h1 class="text-6xl font-extrabold mb-4">Hello World</h1>
      <p class="text-2xl opacity-90">Beautiful generated image</p>
    </div>
    <script>
      lucide.createIcons();
    </script>
  </body>
</html>

添加延迟等待资源加载的请求示例：

bash

curl -X POST "https://html2png.dev/api/convert?width=1200&height=630&delay=1000&deviceScaleFactor=2" \
  -H "Content-Type: text/html" \
  -d '<!DOCTYPE html>...</html>'

Key Tips

关键技巧

Always use
```
deviceScaleFactor=2
```
or higher for quality
Use
```
delay=1000-2000
```
when loading fonts/icons/images
Any CSS works: grid, flex, transforms, filters, animations
JavaScript executes (use delay for rendering)

始终使用
```
deviceScaleFactor=2
```
或更高值以保证图片质量
加载字体、图标或图片时，设置
```
delay=1000-2000
```
支持所有CSS特性：网格布局、弹性布局、变换、滤镜、动画
支持JavaScript执行（需设置延迟以完成渲染）

Website Screenshot

网站截图接口

POST https://html2png.dev/api/screenshot

bash

curl -X POST "https://html2png.dev/api/screenshot" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "width": 1280, "fullPage": true}'

Extra params:

fullPage

(bool),

userAgent

(string)

POST https://html2png.dev/api/screenshot

bash

curl -X POST "https://html2png.dev/api/screenshot" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "width": 1280, "fullPage": true}'

额外参数：

fullPage

（布尔值）、

userAgent

（字符串）

Rate Limits

请求限制

50 requests/hour per IP. Cached results are free.

每个IP每小时最多50次请求。缓存结果免费。