HTML 转图片

将网页转换为 JPG 或 SVG,同时保持原有的视觉效果。

自动滚动截取完整页面 - 使用服务端浏览器渲染
使用真实 Chrome 浏览器渲染,完整支持现代 CSS 样式(如 Tailwind v4)

捕获的是一个实时页面,而不是抓取它的代码

Pico Image 的网页转图片工具,并不是把您粘贴进去的 HTML 标记或 CSS 转换成图片——它接收一个网址,用一个真正的渲染引擎打开这个地址(就像浏览器打开网页那样),等待页面的排版、网页字体和图片全部加载完成,然后精确捕获那一刻屏幕上呈现的画面。源代码本身不会被保留下来:没有可选中的元素,没有链接,也没有之后可以复制出来的文字,只有最终的视觉呈现结果。在输出格式中选择 JPG,会把捕获到的这一帧栅格化成一张标准的压缩照片,和手机相机拍出的文件类型相同。选择 SVG,则会把同样的渲染结果包裹在一个矢量容器中,这在文件需要放进设计工具,或者需要缩放到不同尺寸而不出现明显质量下降时很有用,但这个 SVG 内部的内容仍然是页面渲染后的结果,而不是一组可以逐条路径单独选中和编辑的矢量图形。捕获图片的分辨率取决于渲染视口,而不是您自己的屏幕,因此无论您用什么设备或窗口尺寸来发起捕获,结果都是一致的——这是一个可重复的结果,而不是取决于当时碰巧打开的显示器。由于整个过程依赖页面真正完成渲染,因此存在一些实际限制。需要登录才能查看的页面,会以匿名访客的身份加载,展示的是匿名访客能看到的内容——通常是一个登录表单。设有付费墙的文章会显示付费墙本身。明确配置为拒绝被嵌入或自动化访问的网站——通过 X-Frame-Options 之类的响应头,或严格的 frame-ancestors 策略,又或者专门针对无头浏览器的反爬检测——往往会返回一个错误,或者一个刻意呈现的错乱版面,而不是真实内容。捕获结果反映的是单一的视口宽度和页面完整的滚动高度,而不是多种屏幕尺寸,也不会模拟滚动或点击操作,因此只有在用户交互之后才会出现的内容——一个可展开的区块、页面底部的懒加载图片、轮播图后面的幻灯片——可能会缺失,或者只呈现渲染结束那一刻恰好所处的状态。

什么时候实时捕获比手绘草图或手动截图更有优势

一个缺失或过时的 Open Graph 图片是最典型的场景:如果某个 CMS 从未为一个页面生成合适的社交预览图,把这个实时网址跑一遍这个工具,就能得到一张准确的缩略图,不需要打开浏览器开发者工具,也不需要安装截图插件。市场营销和法务团队会在落地页被修改之前使用同样的能力,因为一张带日期的 JPG 图片,能证明这个页面当时实际的文案和外观,而单纯一个链接一旦下面的文案改了,就无法再证明这一点。在设计交接过程中,一张真实主页的平面截图——带有真实数据、真实广告位、真实 cookie 弹窗,也就是生产环境中实际存在的一切——能比一个在这些内容都还不存在时画出来的 Figma 稿,给开发者提供更多关于间距和色彩的信息。对于提出改版方案的团队来说,把当前的实时截图和新的设计稿并排展示,能让改进之处一目了然,这是在工单里用文字描述永远达不到的效果。它同样也是在不搭建监控系统的情况下,留意竞争对手或合作伙伴页面变化的快捷方式——现在捕获一次,一个月后再捕获一次,直接对比两张图片,而不用费力回忆到底改了什么。当一份 bug 报告需要展示页面在某个特定时刻的具体渲染效果——一个错乱的版面,或者一个卡住的加载状态——单独一个网址在问题修复之后就无法再复现那个瞬间,但在问题发生时抓取的一张快照可以。

不需要截图工具或浏览器插件
精确捕获页面渲染后的效果,包括字体和排版
JPG 便于分享和嵌入,SVG 便于按比例缩放
保留页面在被修改或下线之前的样貌

捕获一个页面

把工具指向您想要捕获的确切页面——这个流程针对的是一个具体的网址,而不是您上传的文件或编写的代码,因此这个地址必须是页面真实、可公开访问的位置。请提前选好格式,因为 JPG 和 SVG 生成的是实质不同的文件,而不仅仅是同一张图片的两种扩展名。捕获过程本身在服务器端进行:一旦开始,这个工具会在一个实时渲染环境中加载页面,捕获中的提示会持续显示,直到排版、字体和可见图片都稳定下来,才会完成截图。输出结果会以您选择的格式下载为单个文件,可以直接用于附件、上传,或放进设计文件,不需要再做任何转换。

1

把页面的完整地址(包括 https://)粘贴到网址字段中

2

选择输出格式——JPG 适合常规分享用的图片,SVG 适合需要可缩放包装的场景

3

开始捕获,并等待“捕获中...”阶段,此时页面正在加载、版面正在趋于稳定

4

渲染完成后下载最终的快照

常见问题

最常见的原因是这个页面需要您登录才能查看——渲染器是不带您的会话、cookie 或凭据去访问这个网址的,因此任何需要登录才能看到的内容都会显示为登录界面,而不是您想要的内容。第二常见的原因是网站故意屏蔽被嵌入或自动化访问,通过 X-Frame-Options 之类的响应头,或者严格的内容安全策略(Content-Security-Policy),又或者专门针对无头浏览器的反爬检测;这些页面会返回一个错误,或者一个被精简过的兜底版本,而不是真实版面。设有付费墙的文章一旦付费墙脚本生效,也会表现出同样的情况。用无痕窗口自己打开这个网址,是快速判断一个未登录访客是否会看到同样内容的办法。
这个工具生成的 SVG 是渲染后页面的一份打包快照——也就是屏幕上呈现的像素,被包装进一个 SVG 容器里,从而能够干净地缩放,不需要额外引入字体或素材。它和把一张照片跑一遍图片转 SVG 是不一样的:后者会把一张位图描摹成真正的矢量路径和形状,您可以在 Illustrator 之类的程序里逐节点选中、重新上色和编辑。如果您需要的是可编辑的矢量美术作品,这个工具对网页来说是做不到的;它的定位是获取一个页面的精确视觉副本,而不是把一张图片转换成矢量图形。
输出格式只提供 JPG 和 SVG 两种选项——这个特定工具没有 PNG 或 PDF 选项。对于要粘贴进聊天、文档或社交动态的内容,JPG 是更好的默认选择;当文件需要放进设计工具,或者需要在不同尺寸下使用又不希望损失质量时,SVG 更合适。如果您确实需要 PNG 或 PDF,可以之后用另一个工具把 JPG 转换过去。
和站内那些完全在客户端运行的裁剪、滤镜、调整大小工具不同,网页转图片必须把网址发送到服务器,因为捕获一个真实网页,意味着要在一个真正的渲染环境中加载它——由于跨域限制,浏览器标签页无法对另一个网站做到这一点。只有您输入的网址会被发送出去;这个工具不会索取或使用任何登录凭据,因此它无法获取任何原本需要登录才能看到的内容。如果对某个特定文件而言,保持一切在本地处理很重要,这正是您应该改用站内客户端图片编辑工具的理由。
不能。渲染器是以匿名、未登录访客的身份加载这个网址的,因此任何被登录表单、订阅付费墙或基于 cookie 的会话限制的内容,都只会显示这个页面对公众展示的部分——通常是一个登录提示、一个付费墙横幅,或者一段被截断的预览,而不是背后真正的内容。网址字段里没有办法传入凭据来绕过这个限制。
它会在一个标准桌面视口宽度下捕获页面渲染后的效果,最终生成的图片会跟随页面完整的可滚动高度,而不是止步于首屏,因此一个很长的落地页会生成一张相应很高的 JPG 或 SVG。它不会做的是模拟滚动来触发那些只有在访客滚动到才会加载的区块,因此即便文件本身从顶部贯穿到底部,那些设计为按滚动触发出现的内容仍有可能缺失。
捕获的是页面初始加载稳定之后的一个静止瞬间,因此轮播图或幻灯片只会显示当时恰好处于激活状态的那一张,而不是全部。只有在滚动触发、点击,或延迟脚本之后才出现的内容,可能来得及加载完成,也可能来不及,而 CSS 过渡或动画效果,取决于时机,可能被捕获到运动过程中的某一帧,也可能完全没有捕获到。对于严重依赖用户交互才能展示真实内容的页面,在与页面完成交互后手动截图,会比这个工具更可靠。
请把它当作一份视觉记录,而不是经过认证的存档——输出结果是一个图片文件,没有嵌入时间戳,没有页面元数据,也没有捕获底层 HTML 或链接的记录,除了您自己文件系统的日志之外,没有任何东西能证明它是何时、从哪里拍摄的。对于非正式用途——比如记录某个页面在改版之前的样子,或者给一个可能会被下架的列表留个副本——它确实很有用。对于任何需要经得起追溯来源审查的场景,比如纠纷或合规记录,应该改用专门的网页存档服务,它们会为捕获内容加上时间戳和哈希校验。

更多图片工具

探索其他强大的图片编辑工具