html-to-image

HTML から画像への API

html2png.dev 経由で HTML/CSS を PNG、WebP、または PDF に変換します。

エンドポイント

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

リクエスト

HTML を raw body または JSON として送信します。

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	キャプチャ前の待機時間（ms）
selector	string	body	キャプチャする CSS セレクター
omitBackground	bool	false	背景を透明にする
colorScheme	string	-	light または dark
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>

リソースの読み込みを待つ場合は、delay を指定してリクエストします。

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、transforms、filters、animations
• JavaScript が実行されます（レンダリングには delay を使用します）

ウェブサイトのスクリーンショット

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 あたり 1 時間に 50 リクエストです。キャッシュされた結果は無料です。