HTML转PNG在线转换
把保存的网页、导出的仪表盘或组件设计稿转换为PNG,每个字母和每条细线都与浏览器绘制的完全一致。选择窗口宽度,排版会随之调整。
文档转图片
或将DOC, DOCX, DOCM … 文件拖放到此处 ·
单个文件最大 95 MB· 最多 20 个文件· 30 分钟后删除
文件在我们的服务器上处理,并在 30 分钟后删除。
转换所有页面、仅第一页(缩略图或封面),或指定范围。
要转换的页面或幻灯片,例如 1-3, 5, 8-10。
仅限 HTML 文件:渲染页面所用的浏览器窗口宽度。1280 px 相当于常见的笔记本电脑;390 px 显示手机版布局。
85 在适中的体积下保持文字清晰。数值越低文件越小,但小字会变模糊。
使用方法
- 1
添加HTML文件
上传 .html、.htm 或 .mhtml 文件,每批最多 20 个,每个不超过 95 MB。保存为单个 MHTML 文件的网页会把图片和样式一并包含在内。
- 2
设置窗口宽度
HTML 页面宽度默认为 1280 px。手机版式可设为 390 px,宽屏仪表盘可设为 1920 px。转换为已是 PNG,图片为一张长图。
- 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:常见屏幕对应的宽度
390 × 844 px
手机
近年多款 iPhone 的 CSS 视口宽度,显示移动版式
820 × 1180 px
平板
竖屏的 iPad Air;许多网站的断点就在这附近
1280 × 800 px
笔记本电脑
本转换器的默认宽度
1920 × 1080 px
全高清显示器
宽屏仪表盘和管理后台
HTML
超文本标记语言
HTML 是网页的标记语言,由 Tim Berners-Lee 在 20 世纪 90 年代初提出,现由 WHATWG 作为活标准维护。HTML 文件描述标题、段落、链接、表格、图片和表单,样式通常由 CSS 提供。所有浏览器都能渲染它,它也用于邮件模板和保存的网页。单个 HTML 文件往往依赖外部图片和样式表,单独移动后可能显示异常。
- 压缩方式
- –
- 透明度
- –
- 动画
- –
- 发布年份
- 1993 · Tim Berners-Lee; maintained by WHATWG
PNG
便携式网络图形(PNG)
PNG 是 PNG 开发组于 1996 年发布的无损位图格式,后来由 W3C 和 ISO 标准化。它精确保留每个像素,支持完整的 Alpha 透明度,处理文字、锐利边缘和纯色块时不会产生伪影。这种精确度使它非常适合截图、徽标、图标和界面图形。代价是体积:保存为 PNG 的照片往往比同一张照片的 JPEG 或 WebP 大好几倍。所有浏览器、操作系统和编辑器都能打开 PNG 文件。
- 压缩方式
- 无损
- 透明度
- 支持
- 动画
- 不支持
- 发布年份
- 1996 · PNG Development Group
页面以文字、代码、表格或界面组件为主时,人们通常选择 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吗?
页面打开时由脚本生成的内容可以显示,但需要点击、滚动或登录才会出现的内容不会显示。如果图表或表格要在交互后才出现,请先在浏览器中打开页面,等它加载完成,再保存为单个文件后上传。
如何只为长页面的顶部生成图片?
将图片切换为每页一张,并把页面设为首页。这样得到的是第一屏大小的部分,而不是整个长度。之后如需裁成精确的画面,可使用图片裁剪工具。
- HTML转JPG转换器将HTML文件转换为JPG:页面在您设定宽度的浏览器窗口中渲染,并保存为一张完整长图。支持手机和电脑宽度。
- HTML转GIF转换器将HTML或MHTML文件转换为GIF:整页生成一张长图,或按页面高度切成多帧依次播放。并说明256色调色板会给网页画面带来哪些变化。
- HTML转PDF免费将.html和.htm文件转换为PDF:发票、邮件模板、导出的报告和文档均可。沿用打印CSS、页面尺寸和分页规则。
- TXT转JPG转换器将.txt文件转换为JPG:文本按默认字体和页边距排版到文档页面上,每页保存为一张图片。适用于笔记、日志、诗歌。
- PNG转JPG在线转换将PNG转换为JPG,减小文件大小,方便发邮件、填报名表和冲印照片。透明区域可填充白色、黑色或任意自选颜色。一次可批量转换20个文件。
- DOCX转PNG在线转换将Word DOCX页面转换为PNG图片,可选72、150或300 DPI。每页生成一张无损图片,可指定页码范围,无需安装Word。