HTML 转图片工具

粘贴一段 HTML。渲染前会移除脚本、表单、框架和事件处理器。

HTML 和生成的图片会留在此浏览器中。远程图片、字体或样式表仍会从各自的源 URL 获取;如需完全离线渲染,请将数据嵌入 HTML。

把一段 HTML 和 CSS 转成固定尺寸的 PNG 或 JPG,无需将源码或生成的图片上传到 Hyperion。画布每边可设为 64 至 1,920 px,缩放可设为 1x 至 3x,然后直接在浏览器中预览和下载。

如何把 HTML 渲染成图片

  1. 1

    粘贴代码

    输入 HTML 片段或文档。支持内联 CSS 和 `<style>` 规则;脚本、表单、框架和事件处理器会被移除。

  2. 2

    设置画布

    选择 PNG 或 JPG,填写宽度与高度,并选择 1x 至 3x 的缩放。

  3. 3

    渲染预览

    浏览器会在隔离的固定尺寸框架中排版清理后的代码。

  4. 4

    本地下载

    直接保存 PNG 或 JPG。生成的文件不会上传到 Hyperion。

浏览器渲染器支持的内容

转换器使用浏览器自身的布局引擎,因此普通 HTML、内联 CSS、<style> 规则、Flexbox、Grid、渐变、阴影、内嵌 SVG 和已安装字体都可以显示在结果中。输出是静态的光栅图片,不是可交互的网页副本。

画布与输出规则

设置 支持范围 行为
宽度 64 至 1,920 px 截取框架的精确 CSS 宽度
高度 64 至 1,920 px 精确 CSS 高度,超出的内容会被裁切
缩放 1x 至 3x 提高输出分辨率,但不改变布局尺寸
PNG 固定尺寸光栅图 保留透明区域
JPG 固定尺寸光栅图 使用 92% 质量和白色背景

为避免浏览器占用过多内存,输出上限为 16 百万像素。如果尺寸与缩放超过上限,工具会将缩放降到最大的安全 0.5x 档位。HTML 源码最多为 100,000 个字符。

隐私与远程资源

HTML 和生成的数据图片会留在当前浏览器中。分步模式会把设置保存在当前标签页的会话存储中,以便进入下一步;重新开始会清除此状态。工具不会把代码或图片发送给 Hyperion。

外部 URL 是例外。远程图片、网络字体和样式表会从源服务器获取,对方能够看到这次请求。CORS 或访问控制也可能让资源加载失败。如需完全离线渲染,请把图片和字体嵌入为数据 URL,并使用内联 CSS。

安全与还原限制

截取前会移除脚本、表单、嵌套框架、嵌入对象和事件属性。这样能让预览失去交互能力,但不能代替用于发布内容的通用 HTML 清理工具。依赖 JavaScript 的组件不会运行,视频与 canvas 的状态不保证还原,动画只会成为一个静止画面,浏览器特有的 CSS 在其他引擎中也可能不同。

常见问题

可以。渲染器会读取 head 中受支持的 <style> 规则和样式表链接,再截取 body 内容。脚本、元数据、表单、框架和活动处理器会被移除,因此结果不是可浏览的网页。

源服务器可能阻止跨域使用、要求登录,或响应过慢。请使用允许 CORS 的可访问 URL,或将资源嵌入为数据 URL。

PNG 会保留透明像素。JPG 使用白色背景和固定的 92% 质量,照片内容通常更小。此工具不导出 WebP,也不提供单独的质量调节。

转换器将输出限制为 16 百万像素。画布较大时,它会自动选择最大的安全 0.5x 档位,避免耗尽浏览器内存。

相关工具