HTML转图片 — HTML 和 CSS 在线转 PNG
渲染粘贴的 HTML 和 CSS，按指定宽度和倍数截取为 PNG
在浏览器中处理 · 不上传任何内容
粘贴片段（<div>…）或完整文档（<html>…）。完整文档只使用 <body> 内容和 <style> 块。
要追加的样式。HTML 中的 <style> 块同样生效。
内容按这个宽度（px）排版，并按完整高度截图。100–4000。
2× 像视网膜屏一样清晰，3× 适合打印。像素数随倍数的平方增长。
出于安全和隐私考虑，无论预览还是截图，都不会请求 data: 或 blob: 以外地址的图片、字体和 CSS，脚本也不会运行。文字使用设备上安装的字体。
预览
输入 HTML 即可看到预览。
功能简介
这个工具把一段 HTML 和 CSS，比如卡片、公告、表格、按钮或邮件横幅，保存为 PNG 图片。可以用来在文档或博客里展示渲染效果、用代码制作社交媒体公告卡片，或把设计的一部分分享为图片。和截图后裁剪不同，你能得到精确的宽度和倍数。
使用方法
- 在 HTML 中粘贴代码：完整文档（
<html>…）或片段都可以。第一次使用可以点击 插入示例。 - 需要时在 CSS 中添加样式。HTML 里的
<style>块同样生效。 - 设置 截图宽度（px）、倍数（1×、2×、3×）和 背景（白色或透明）。
- 确认预览后点击 生成 PNG，再点击 保存 PNG。
工作原理
- 安全预览：代码在沙箱 iframe 中绘制。沙箱阻止脚本运行，内容安全策略（CSP）会拦截 data: 和 blob: 以外的所有网络请求。
- 移除外部地址：粘贴的代码先由浏览器自带的 HTML 和 CSS 解析器读取（这一步不会加载任何内容）。src、srcset、poster、SVG href、style 属性、
<style>、url()、image-set()、@import 和 @font-face 中所有非 data: 或 blob: 的地址都会被移除并列出。截图前会再检查一次预览，截图时也只能读取 data: 和 blob: 地址，因此不会有任何请求发往外部地址。链接（<a href>）不影响画面，所以不列出，但会被改成点击后不跳转。 - 截图尺寸：内容按所选宽度排版，并按实际高度截取。PNG 尺寸为宽度 × 倍数、高度 × 倍数。
- 尺寸限制：超过浏览器可处理的上限（iPhone 和 iPad 上为 16,777,216 像素、每边 16,384 px）时，会自动降低倍数并提示。
- 完整文档：只使用
<body>内容和所有<style>块，<head>中的其他标签会被丢弃。 - 截图使用 html-to-image（MIT 许可）。
示例
| 输入 | 设置 | 结果 |
|---|---|---|
| 示例公告卡片 | 宽度 800，2× | 宽 1600 px 的 PNG |
带 CSS 的 <table> |
宽度 600，3×，透明 | 宽 1800 px、透明背景的 PNG |
| 含外部图片的代码 | 宽度 800，1× | 外部图片位置为空，并列出被拦截的地址 |
矢量图请用 SVG 转 PNG；Markdown 可以试试 Markdown 预览。
常见问题
可以输入网址截取网页吗？
不可以。截取其他网站需要服务器代你打开页面，本工具不这样做。请粘贴你自己写的，或从浏览器开发者工具中复制的 HTML 和 CSS。
图片显示不出来。
出于安全和隐私考虑，data: 或 blob: 以外地址（http、https、// 和相对路径）上的图片、字体和 CSS 一律不加载。用 HTML 字符引用或 CSS 转义隐藏的地址，会按浏览器解码后的结果检查，同样会被拦截。工具会列出被拦截的地址；把图片改成 data:（Base64）地址嵌入就能显示，可以用图片转 Base64 工具生成。
字体和我的设计不一样。
网页字体文件不会被获取，文字使用你设备上安装的字体。如果没有指定的字体，会使用系统默认字体（例如 Windows 上的微软雅黑或 Segoe UI，Apple 设备上的苹方或 San Francisco）。
JavaScript 生成的内容会显示吗？
不会。粘贴代码中的脚本不会运行，只绘制静态的 HTML 和 CSS。
我的代码会被发送到服务器吗？
不会。预览和图片都在你的浏览器中生成。
