html-to-image

Name: html-to-image
Author: html2png

github.com/html2png设计与 UI10269 次安装39 周前更新

代码仓库

关于 html-to-image

html-to-image 是一项通过 html2png.dev 将 HTML 和 CSS 转为图像或 PDF 的技能，面向需要生成网页截图与视觉素材的用户。它支持自定义视口、格式、选择器和渲染等待时间。

主要功能

01HTML 转换为 PNG、WebP 或 PDF
02指定视口尺寸与设备缩放
03按 CSS 选择器截取内容
04设置配色方案与透明背景
05对网站页面进行截图

适用场景

01将 HTML 设计导出为 PNG 或 WebP
02生成网页的 PDF 版本
03截取指定页面区域或完整网站

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/html2png/skills --skill html-to-image

安装后在 Claude Code 中输入/html-to-image确认已加载。

详细介绍

HTML 转图像 API

通过 html2png.dev 将 HTML/CSS 转换为 PNG、WebP 或 PDF。

端点

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

请求

以原始请求正文或 JSON 发送 HTML：

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

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

参数

参数	类型	默认值	描述
`html`	string	必填	HTML 内容
`width`	int	1200	宽度，单位为 px
`height`	int	630	高度，单位为 px
`format`	string	png	png、webp、pdf
`deviceScaleFactor`	float	2	Retina 缩放（1-4）
`delay`	int	0	截取前等待的毫秒数
`selector`	string	body	要截取的 CSS 选择器
`omitBackground`	bool	false	背景透明
`colorScheme`	string	-	浅色或深色
`zoom`	float	1	视口缩放

响应

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

CDN 资源

使用以下 CDN 设计高质量页面：

Tailwind CSS（首选）：

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

Google Fonts：

<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

Tailwind + 字体 + 图标示例

<!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>

使用延迟参数发送请求，以等待资源加载：

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>'

要点

始终使用 deviceScaleFactor=2 或更高值以确保画质
加载字体/图标/图片时，使用 delay=1000-2000
支持任意 CSS：grid、flex、变换、滤镜、动画
JavaScript 会执行（渲染时请使用延迟参数）

网站截图

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

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

额外参数：fullPage（bool）、userAgent（string）

速率限制

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

支持 Markdown

登录后评论