1
输入内容
示例模板：
已选：未选择。元素截图直接捕获当前打开页面的真实渲染效果；跨域图片可开启右侧「跨域图片占位」避免失败。
HTML 转图片怎么用？三步出图
不需要装任何软件，浏览器打开即用，手机电脑都支持。
01
粘贴 HTML 代码
把 HTML 片段或完整页面代码 粘进编辑区，可先用示例模板找感觉；代码经 DOMPurify 消毒后在隔离沙箱渲染，脚本会被移除。
02
设置宽度与格式
选 375/768/1280 或自定义宽度，挑 PNG、JPEG、WebP，需要高清就开 2x/3x 像素倍率，要透明底选 PNG + 透明背景。
03
生成并导出
点击 生成预览 查看渲染效果与尺寸大小，再 下载图片 或 复制图片 直接粘贴到聊天工具；勾选多个宽度可 批量导出 ZIP。
这个网页截图工具能做什么
覆盖 html 截图生成图片、分享卡片、邮件模板等高频场景。
💬
生成分享长图
把文案 HTML 排成金句卡、战报图，一键转图片发朋友圈、社群与小红书。
✉️
邮件模板预览
写完营销邮件 HTML 直接截图，检查排版效果，不用真实发信。
🧩
组件效果存档
按钮、卡片、弹窗等 UI 片段的 HTML 转 PNG，做设计评审与文档配图。
📱
多端尺寸对照
同一份代码批量导出 375/768/1280 三档宽度图，响应式效果一眼对比。
🎯
页面元素截图
不用装插件，选择器或点选即可截取当前网页的某个区域、某块内容。
🏷️
商品主图速出
电商运营用 HTML 排促销角标与价格，转成图片直接上传主图位。
常见问题
关于 html 转图片在线、透明背景、批量导出与隐私的高频疑问。
HTML 怎么转成图片？
把 HTML 代码粘贴到编辑区，选好输出宽度、格式与像素倍率，点击生成预览，代码会在浏览器里渲染成画面并导出为 PNG、JPEG 或 WebP 图片，可直接下载或复制到剪贴板。
生成的图片可以透明背景吗？
可以。选择 PNG 格式并把背景设为透明，导出图片即保留透明通道；JPEG 不支持透明度，选择 JPEG 时会自动使用白色底。
为什么代码里的外链图片或字体没显示？
浏览器安全策略限制：跨域图片与字体若未开启 CORS 允许，本地渲染时无法读取像素。可开启跨域图片占位开关避免生成失败，或把图片改成内联 base64、使用系统字体。
这个工具支持批量导出吗？
支持。勾选 375、768、1280 等多个输出宽度后点击批量导出 ZIP，同一份 HTML 会按每个宽度分别渲染打包成压缩包，一次拿到多尺寸网页截图。
粘贴的 HTML 会被上传到服务器吗？
不会。渲染与截图全部在您的浏览器本地完成，代码先经过 DOMPurify 消毒去除脚本后在隔离沙箱中渲染，数据不出本机。
能直接截任意网址的网页吗？
浏览器出于安全限制无法把其他网站页面渲染进本工具截图。要截某个网页，可查看其源代码后粘贴 HTML 代码转换；需要截整页任意 URL 可用浏览器 F12 命令菜单的「捕获完整尺寸屏幕截图」，或用本工具的页面元素截图模式截取当前打开的页面。
关于截图原理与限制
原理：「HTML 代码转图片」基于 html-to-image 渲染引擎，把 DOM 节点逐层克隆并内联计算样式，转成 SVG foreignObject 后绘制到 Canvas 导出图片，粘贴的 HTML 会先经 DOMPurify 消毒（移除 script、事件处理器与危险协议）再放入沙箱 iframe 渲染，兼顾安全与还原度；「页面元素截图」基于 html2canvas 引擎，将选中的页面节点直接绘制到 Canvas，可承载大块区域乃至整页内容。
注意：① 依赖外部 JS 动态生成的内容（如需要执行脚本才能显示的区域）不会被渲染；② 跨域图片、字体若无 CORS 许可会缺失，可开启占位图开关；③ 极复杂 CSS（如多层 filter 动画）可能与真实浏览器渲染存在细微差异；④ 像素倍率越高占用内存越大，超大页面建议先用 2x。
