HTML 转图片工具

粘贴带 CSS 的 HTML，选好尺寸，下载 PNG 或 JPG。页面在你的浏览器里渲染，未公开的设计不会外泄。

结果
图片会显示在这里。

如何把 HTML 转成图片

  1. 把 HTML 和 CSS 粘贴到编辑器。完整的文档，或只带一个 <style> 块的片段都可以。
  2. 选择尺寸。Open Graph（1200 x 630）是 Facebook、LinkedIn、X 和 Slack 生成链接预览时使用的尺寸；“整页”会以 1280 像素宽度截取页面的全部高度。
  3. 文字和纯色选 PNG，照片选 JPG，然后点击“转换为图片”，再点击“下载”。

HTML 会按你选的宽度精确排版，所以媒体查询的表现和在同样大小的窗口里一致。设定了固定高度时，超出边缘的部分会被裁掉。

示例

  • 博客的社交分享卡片。 上面的示例是一张用纯 CSS 写的 1200 x 630 卡片。改掉标题，转换后把 PNG 上传为文章的 og:image。
  • 邮件或收据的图片。 粘贴一封交易邮件的 HTML，选择“整页”，得到一张 PNG 长图，用于文档或客服工单。
  • 把 Tailwind 组件放进幻灯片。 引入 Tailwind CDN 脚本，选择“高清幻灯片”（1280 x 720）和 2x 缩放，把 PNG 放进你的演示文稿。

HTML 转图片常见问题

我的 HTML 会发送到服务器吗？

不会。HTML 在当前标签页内的一个沙箱框架里渲染，并在那里用开源库 html-to-image 转成图片。不上传任何内容。

为什么 PNG 里缺少网页字体或图片？

渲染器需要先下载每个字体和图片才能嵌入。没有 CORS 响应头的文件无法从沙箱页面读取，所以会被跳过。Google Fonts 和支持 CORS 的图床可以正常使用（我们测试过 Google Fonts、Tailwind CDN 和 placehold.co 图片）；禁止跨域读取的网站上的图片则不行。

可以用 Tailwind CSS 吗？

可以。在 HTML 里加上 <script src="https://cdn.tailwindcss.com"></script>。渲染器会等页面稳定后再生成图片，所以 Tailwind 类会生效。

2x 缩放有什么作用？

它在每个方向上渲染两倍的像素（1200 x 630 的卡片会变成 2400 x 1260），在高分辨率屏幕上文字依然清晰。布局不会改变。

有尺寸限制吗？

缩放后每条边最多 4096 像素，因为更大的画布在一些移动端浏览器里会渲染失败。