输入：完整 HTML 文档
/examples/fieldnotes.html下载示例 HTML复现设置
- 输入：手动输入 → HTML
- CSS 栏：留空（样式已内嵌在 HTML 中）
- 格式：PNG
- 设备：桌面（1920 × 1080）
- 显示缩放：100%；输出尺寸：原始尺寸
操作步骤
- 下载 HTML，用文本编辑器打开，再把完整文档复制到上方 HTML 栏。
- 独立 CSS 栏留空，在预览中检查绿色图形与圆角样式。
- 选择 PNG 和桌面预设，转换后下载原图。
HTML 截图工具
把 HTML 和 CSS 转成图片或 PDF
粘贴 HTML、添加 CSS，或者直接上传文件，把代码渲染成截图、预览图或可打印的 PDF。
- 免费使用
- 无需注册
- PNG · JPG · WebP · PDF
保留 HTML 内嵌样式。本地图片和字体不会自动上传，请使用公开 URL 或内联资源。
手机预设是浏览器视口预览，不是实体设备测试。长页面和懒加载内容可能不完整。
把 HTML 片段、完整文档或上传的 HTML 文件渲染为静态图片。需要 PNG 时在输出设置中选择 PNG；下方真实示例提供原始 HTML 和实际导出文件。
查看真实示例与转换限制热门任务
真实输入与输出
试用真实的 HTML 转 PNG 示例
用一份完整 HTML 文档渲染原创虚构落地页 Fieldnotes。示例使用内嵌 CSS 和系统字体，不依赖外部图片或字体下载。
转换前需要了解的限制
完整文档与额外 CSS
原有 style 样式块会保留，独立 CSS 栏的内容追加在文档样式之后，遵循 CSS 优先级和先后顺序；匹配的规则可能覆盖原有样式。
图片、字体与本地文件
粘贴 HTML 不会自动上传相对路径引用的文件或你电脑中的素材。请使用可公开访问的绝对地址或内联资源。资源被拦截、字体加载较晚都可能改变结果。
预览与导出
编辑器预览会缩放以适应容器，请按目标尺寸检查下载的原图。JavaScript、网络请求及渲染时机可能让复杂页面的导出与本地预览不同。
浏览器与邮件兼容性
输出是浏览器渲染结果，不等于实体手机或各类邮件客户端的兼容性测试。截图是静态图片，链接、表单、动画和视频不会保留交互能力。
常见用例
HTML 导出场景
HTML 转 JPG：适合轻量预览图
如果你要的是轻量、方便分享的代码渲染结果，JPG 是一个实用的导出格式。
- • 适合轻量导出
- • 适合内部评审
- • 文件体积更小
HTML 转 PNG：适合更清晰的布局和界面
如果你更重视文本、边缘、间距和界面细节，PNG 更适合 HTML 渲染结果。
- • 适合界面细节
- • 适合设计和产品 QA
- • 无损输出
HTML 转 WebP：适合现代网页图片流程
WebP 适合更现代的网页交付和内容生产场景，能够兼顾质量和体积。
- • 现代图片格式
- • 适合预览图和内容流程
- • 体积和质量更均衡
HTML 转 PDF：适合文档型输出
当 HTML 需要变成可打印、可归档、可发送的文档时，PDF 是更合适的格式。
- • 适合报告和发票
- • 适合打印输出
- • 更符合文档使用场景
上传 HTML 文件而不是手动粘贴代码
如果你本地已经有 HTML 或 CSS 文件，可以直接上传，而不需要重新复制粘贴。
- • 支持文件型工作流
- • 适合本地模板
- • 减少手动操作
常见问题
HTML 截图常见问题
Website Screenshot 免费吗？需要注册吗？+
免费。在线网页截图和 HTML 转换工具无需注册、登录或安装即可使用。
完整 HTML 文档可以直接转 PNG 吗？+
可以。把包含 style 样式块的完整文档粘贴到 HTML 栏；不需要额外样式时 CSS 栏留空，选择 PNG 后转换。下方示例提供源码和实际 PNG。
额外填写 CSS 栏会发生什么？+
文档原有内嵌样式会保留，额外 CSS 会追加在其后。最终样式由正常的 CSS 优先级与先后顺序决定。
可以上传本地 HTML 文件吗？+
可以使用文件上传。HTML 引用的本地图片、字体和样式表不会自动打包上传，请内联资源或使用可公开访问的绝对地址。
为什么字体或图片与预览不同？+
远程渲染器需要加载每一项资源，本地路径、访问限制、请求失败或字体加载较晚都可能改变结果。预览会缩放，请检查下载的原图。
可以用它测试 Gmail 或 Outlook 的邮件兼容性吗？+
不能。这是浏览器渲染，不是邮件客户端兼容性测试；不同邮件客户端和实体设备的结果可能不同。
支持哪些输出格式？+
工具提供 PNG、JPG、WebP 和 PDF。PNG 是无损格式，适合文字和界面细节；静态 PNG 不保留链接或表单交互。
相关工具