UltKit

HTML转PNG在线转换

把保存的网页、导出的仪表盘或组件设计稿转换为PNG,每个字母和每条细线都与浏览器绘制的完全一致。选择窗口宽度,排版会随之调整。

文档转图片

或将DOC, DOCX, DOCM … 文件拖放到此处 ·

单个文件最大 95 MB· 最多 20 个文件· 30 分钟后删除

输出

文件在我们的服务器上处理,并在 30 分钟后删除。

使用方法

  1. 1

    添加HTML文件

    上传 .html、.htm 或 .mhtml 文件,每批最多 20 个,每个不超过 95 MB。保存为单个 MHTML 文件的网页会把图片和样式一并包含在内。

  2. 2

    设置窗口宽度

    HTML 页面宽度默认为 1280 px。手机版式可设为 390 px,宽屏仪表盘可设为 1920 px。转换为已是 PNG,图片为一张长图。

  3. 3

    转换为PNG

    点击转换为 PNG。如果网页本身没有背景色,并且图片要放在其他素材上,请在高级设置中开启透明背景。

答案

如何将 HTML 转换为 PNG?

上传 .html 或 .mhtml 文件,把HTML 页面宽度设为想要模拟的屏幕宽度,然后点击转换为 PNG。渲染后的整个页面会作为一张无损图片返回。

需要文字和线条保持清晰时,就把HTML转换为PNG

PNG 自 1996 年起成为 W3C 推荐标准,采用无损压缩,因此 14 px 正文的抗锯齿边缘、1 像素的表格边框和带语法高亮的代码都能原样保留。这就是开发者在缺陷报告中附上 PNG 截图、设计师在评审中分享 PNG 的原因:没人需要猜测模糊的边缘是 CSS 问题还是压缩痕迹。

代价是体积。由文字和纯色构成的页面压缩效果好,满是照片的页面则不然。如果截图要发到聊天或邮件里,体积比清晰细节更重要,JPG 文件更小。对于文档、发布说明、仪表盘和样式指南,PNG 是更稳妥的默认选择。

宽度决定版式。HTML 没有固定的页面:同一个文件在 1280 px 下显示三栏桌面设计,在 390 px 下则是单栏堆叠。转换器会按你输入的HTML 页面宽度(320 到 3840 px 之间)排版,然后从第一行到页脚完整截取。

HTML转PNG:常见屏幕对应的宽度

195:422

390 × 844 px

手机

近年多款 iPhone 的 CSS 视口宽度,显示移动版式

41:59

820 × 1180 px

平板

竖屏的 iPad Air;许多网站的断点就在这附近

8:5

1280 × 800 px

笔记本电脑

本转换器的默认宽度

16:9

1920 × 1080 px

全高清显示器

宽屏仪表盘和管理后台

HTML

超文本标记语言

HTML 是网页的标记语言,由 Tim Berners-Lee 在 20 世纪 90 年代初提出,现由 WHATWG 作为活标准维护。HTML 文件描述标题、段落、链接、表格、图片和表单,样式通常由 CSS 提供。所有浏览器都能渲染它,它也用于邮件模板和保存的网页。单个 HTML 文件往往依赖外部图片和样式表,单独移动后可能显示异常。

压缩方式
–
透明度
–
动画
–
发布年份
1993 · Tim Berners-Lee; maintained by WHATWG
HTML 转换器

PNG

便携式网络图形(PNG)

PNG 是 PNG 开发组于 1996 年发布的无损位图格式,后来由 W3C 和 ISO 标准化。它精确保留每个像素,支持完整的 Alpha 透明度,处理文字、锐利边缘和纯色块时不会产生伪影。这种精确度使它非常适合截图、徽标、图标和界面图形。代价是体积:保存为 PNG 的照片往往比同一张照片的 JPEG 或 WebP 大好几倍。所有浏览器、操作系统和编辑器都能打开 PNG 文件。

压缩方式
无损
透明度
支持
动画
不支持
发布年份
1996 · PNG Development Group
PNG 转换器

页面以文字、代码、表格或界面组件为主时,人们通常选择 PNG:无损像素能让文档、缺陷报告和设计评审中的细线与小号文字保持清晰,不会出现 JPG 的压缩痕迹。

HTML转PNG,不丢失样式和字体

普通的 .html 文件往往依赖存放在别处的内容:css 文件夹中的样式表、原服务器上的图片、字体服务提供的字体。这些缺失时,页面会退回为默认字体的无样式文字。在 Chrome 或 Edge 中把网页保存为“网页,单个文件”,会生成把样式和图片放在一起的 .mhtml 文件,这是最可靠的上传方式。

网页字体也遵循同样的规则。用 @font-face 声明的字体只有在能访问到字体文件时才会加载;只存在于你自己电脑上的字体会被相近的字体替代。如果字体排印很重要,请嵌入字体,或在发送前检查结果。

固定宽度还能让每周对报告的截图并排对比。如果结果需要保留可选中的文字用于打印,则应改用 HTML 转 PDF。

HTML转PNG常见问题

HTML转PNG比用自己的浏览器截图更好吗?

浏览器截图只能截取屏幕上能容纳的内容,除非使用整页截图工具,而且宽度取决于当前窗口。在这里,宽度是你自己设置的数值,因此相隔数周的两次截图可以完全对齐,并且从第一行到页脚的整个页面都会包含在内。

为什么同一个页面的PNG比JPG大好几倍?

PNG 无损保存每个像素。文字和纯色用这种方式压缩效果很好,但照片、渐变和视频封面则不行,所以图片很多的落地页可能生成很大的 PNG。这类页面用 HTML 转 JPG 更轻便;而代码示例、图表和界面截图,通常不值得为了减小体积而变模糊。

PNG可以用透明背景代替白色背景吗?

可以。开启透明背景即可。它只会在页面自身没有设置背景色的地方透出来,所以 body 设为白色的网站导出后仍然是白色。它最适合单独做成 HTML 文件的单个组件或徽章。

转换器会运行页面中的JavaScript吗?

页面打开时由脚本生成的内容可以显示,但需要点击、滚动或登录才会出现的内容不会显示。如果图表或表格要在交互后才出现,请先在浏览器中打开页面,等它加载完成,再保存为单个文件后上传。

如何只为长页面的顶部生成图片?

将图片切换为每页一张,并把页面设为首页。这样得到的是第一屏大小的部分,而不是整个长度。之后如需裁成精确的画面,可使用图片裁剪工具。