在浏览器中获取“全页面”截图非常有用。 也就是说,不仅仅是可见区域。 可见区域非常容易获得,只需对屏幕进行截图即可。 全页面截图会捕获整个网站,即使需要滚动才能查看所有内容。 您可以对可见区域拍摄单个截图,然后使用照片编辑程序将它们拼接在一起,但这很麻烦。 更不用说,使用固定位置元素时,操作会更加棘手了。
幸运的是,浏览器可以帮助我们解决这个问题。
Chrome
从 Chrome 59 开始,它已内置于 DevTools 中。 这里有一个 视频。 您使用“响应式设计模式”,然后在右上角菜单中选择全页面截图选项。

我发现使用命令提示符来完成它也很容易
如果您需要“移动端”的全长截图,只需将响应式视图调整到您想要的大小并再次保存。 方便!
我也在 Chrome 中使用 Nimbus 扩展程序 取得了不错的效果。
Firefox
在 Firefox DevTools 中,您需要打开一个名为 捕获整个页面截图 的设置,该设置位于 可用工具箱按钮 下。 打开它,就会出现一个按钮。

Safari
在 Safari DevTools 中,选择一个节点,右键单击,您将在上下文菜单中看到 捕获截图。

Safari 有 文件 > 导出为 PDF,但这很麻烦。 我不知道它是如何决定要导出什么,哪些不要导出,布局很奇怪,而且不知何故它被分成多个页面。
Awesome Screenshot 扩展程序似乎可以解决问题。

还有一些原生应用程序,例如 BrowseShot 和 Paparazzi!
我一直使用 Chrome 上的这个扩展程序 Full Page Screen Capture,它很棒。
我发现 Chrome 中的命令面板有助于捕获全页面截图。 Cmd + Shift + P(如 ST 或 VSCode)
我一直使用 Google 的“保存到 Google Drive”Chrome 扩展程序。 它允许您将可见页面或整个页面捕获为 PNG,甚至保存到 .mht 文件,这非常有用。
您提到的 Firefox 功能似乎对图像大小有限制。 它似乎将图像缩放到其限制的任何大小。
很高兴看到浏览器中可以进行截图操作。 我不知道 Firefox 中有这个选项,谢谢!
很高兴您提到了 Nimbus,这是我最喜欢的 Chrome 扩展程序之一。 我喜欢它可以捕获片段、选定区域或整个页面以进行截图。
让 Nimbus 在我眼中脱颖而出的原因是它能够在截图上添加文本和箭头,非常适合客户或用户询问功能。 非常适合教程和故障排除!
非常棒的小贴士! 很高兴看到浏览器实现了此功能。
另一个选择是 GNU Image Manipulation Program (https://www.gimp.org/) — 您可以使用
文件 > 创建 > 从网页
然后输入像素宽度和 URL。
(注意:Windows 用户! 确保您获得版本 2.8.22(截至本文发布时的最新版本),因为之前版本存在一个错误,导致此功能出现问题(缺少 lib)。)
再次感谢您的贴士!
我认为值得注意的是,您也可以使用新的 命令菜单(您首先需要打开 Dev Tools 才能打开命令菜单)在 Chrome 中拍摄全页面截图,方法是开始在命令菜单中键入
screenshot
,然后从自动完成列表中选择Capture full size screenshot
选项。在 Firefox 中,使用 Firefox 开发者工具栏 (GCLI) 也存在类似的命令,已经存在很久了。 只需通过按
Shift+F2
打开开发者工具栏,然后输入screenshot --fullpage filename.png
即可。 它在您键入时会为所有参数提供很好的工具提示,但您也可以通过键入help screenshot
来获取有关该命令的更多信息。 还有用于将截图保存到剪贴板或将其发布到 Imgur 的命令标志。太棒了! 谢谢分享。 :)
哇... 非常有用... 我不知道... 我一直使用截图工具,但在 Chrome 中,它会提供两个选项:可见部分和全页面,而 Firefox 只会捕获全页面,没有捕获可见部分的选项。
根据 Bit Defender 的说法,Awesome Screenshot 拥有或曾经拥有广告软件。 它也未针对视网膜显示屏进行优化,这会导致糟糕的用户体验。
它也内置在 Vivaldi 中,而且已经存在一段时间了,因此它并不依赖于 Chromium 的功能来执行此操作。
哦? 是吗? 太酷了。 我现在就去看一下;Vivaldi 是我的 Chrome 替代浏览器,也是我的辅助浏览器;)
再见,w0lf。
Safari 有 文件 > 导出为 PDF
它也有“另存为...”但没有一个是用于保存截图的。
导出为 PDF 使用样式将页面转换为 pdf,但它与截图无关。
所以这个不是免费的; 仅限 Mac,但它也支持多种分辨率,并导出分层 PSD 文件以及 PNG。 http://www.pagelayers.com
我使用 Page Layers for Mac 取得了很大的成功。 它并不便宜,但它几乎可以捕获所有元素。 您也可以指定视口大小和分辨率(例如 @2x)并导出为 PNG 或分层 Photoshop 文件,这很酷。
https://www.pagelayers.com/
在 MacOS 中,只要我能记住,“Command-3”会在任何应用程序或浏览器中以及 Finder 中进行全屏截图。 “Shift-Command-4”首先会显示一个选择工具来细化截图。 所有截图都将以 PNG 格式保存到桌面。
抱歉! 我的评论应该引用“Shift-Command-3”,而不是“Command-3”。
Shift-Command-3
会截取您的活动桌面(s)。
Shift-Command-4
会触发十字准线,用于选择您屏幕上要捕获的区域。 单击并拖动边界框以包含您的选择,然后释放以捕获。 在单击之前,您可以按空格键以触发捕获窗口模式,单击该模式后,将捕获整个选定窗口的截图。 非常适合捕获系统菜单的截图。
在两种情况下,图像都将以 PNG 格式保存到您的桌面上。
在任何截图快捷键命令中添加 Option 键,可以将生成的截图发送到剪贴板,而不是桌面。
Shift-Option-Command-4
补充 Lincoln Nail 和其他人的说法,您可以使用 CMD-SHIFT-4 在 Mac 上获得截图十字准线。然后,按空格键将十字准线更改为相机图标,并单击您要截图的浏览器窗口。
这将捕获网页的当前大小和浏览器“chrome”。它甚至可以在 Mac 上运行的 Parallels 中的 IE/Edge 上使用!
您可以先使用 Window Resizer 来调整窗口的大小。
(https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh)
在 Firefox 上,我使用 ScreenGrab! 多年了,对我来说仍然是无敌的:全页面、可见部分、部分,以及选择保存或复制到剪贴板。
我经常使用 Vialdi 浏览器 (https://vivaldi.com) 来创建我的全页面截图。它对截图的大小/长度没有限制,并且它也能很好地与 javascript 包含内容配合使用,例如顶部按钮(主要忽略它们)。Snagit (https://www.techsmith.com/screen-capture.html) 也适合各种截图、视频和 gif。我经常使用 Snagit 来做文档。
我使用这个免费的优秀工具
https://getsharex.com/
它可以通过多种方式捕获截图和视频。
它还具有滚动捕获功能,可以捕获网页等。
iOS:是的,将网页复制为 PDF 到应用程序(例如,Noteability 或 — 我怀疑但没有尝试过 — Kindle 或 iBooks)可以工作。它会生成一个 PDF。一个文件,尽管是多页而不是全流。对于 PDF 来说,它是一个死树(纸张)方向的东西。我不知道 iOS 设备上是否有其他类型的“扩展”,除了将一个项目添加到 Safari 的“分享”操作列表中。
或者使用 Vivaldi 浏览器及其集成的截图工具。
我一直使用 Mac 应用程序,Paparazzi,但也喜欢这里提供的浏览器内技术。
很棒的提示。您知道任何类似的技巧来捕获分成页面以供打印的全屏截图(如果未提供 css,则选项打印页面通常会更改页面内容)?
很高兴您提到了 Paparazzi。它有一些非常实用的技巧
在捕获之前设置延迟(您可以选择多少秒),以确保一切都已加载。
设置最小/最大尺寸
设置裁剪比例或像素尺寸。
最重要的是:您可以将截图从 Paparazzi 拖放到 Sketch 中。这有效地将一个实时网站变成了一个 Sketch 文档。它比 PageLayers 更好,因为文本仍然是实时的。
Paparazzi! 做得非常棒——比浏览器的扩展程序要好得多。在找到 Paparazzi! 之前,我尝试过每个扩展程序,而这个扩展程序效果最好。
Firefox 一直都有一个“shell”,带有用于执行(全页面)截图的命令:https://stackoverflow.com/questions/13158083/take-a-full-page-screenshot-with-firefox#answer-14830242
我猜新方法连接到了那个功能。
这是我在很棒的 css-trick 上的第一个评论\o/
遗憾的是,Chrome 和 Firefox 中内置的截图工具不支持包含滚动交互的页面(例如,http://scrollmagic.io),据我所知,唯一的方法是使用附加组件/扩展程序。
坏消息是,即将添加到 Firefox 中的新的内置截图工具默认情况下将不支持此功能(正如团队在打开的 github 问题上回复我的那样)。
Safari 和其他浏览器使用媒体打印 css 规则进行 pdf 导出。它们确实添加了自己的预定义打印规则集,但可以通过提供一个 print.css 文件来覆盖它。