【问题标题】:Take a full page screenshot with Firefox on the command-line在命令行上使用 Firefox 截取整页屏幕截图
【发布时间】:2012-10-20 22:03:51
【问题描述】:

我在 VPS 中的 Xvfb 上运行 Firefox。我要做的是对页面进行整页截图。

我可以使用 Firefox 重定向到特定页面

firefox http://google.com

并使用 ImageMagick 截取屏幕截图(在 X 内)

import root -window output.jpg

问题是,大部分页面需要滚动,我无法事先知道高度。

另一种方法是选择一个非常大的高度(比如 4000px),然后处理图像并删除无用的部分。但这是不必要的处理。

我发现了许多 Firefox 附加组件,但我正在寻找一种可以使用 Shell 命令行进行编程的解决方案。

编辑:我最终为此编写了自己的 FireFox extension

【问题讨论】:

  • 我见过一些用于截屏的 webkit cli 工具,但我不记得名字了。

标签: shell firefox command-line screenshot


【解决方案1】:

Developer Toolbar GCLI and Shift+F2 shortcut were removed in Firefox version 60。要在 60 或更高版本中截屏:

  • Ctrl+Shift+K打开开发者控制台(⌥ Option+⌘命令+K(macOS)
  • 输入:screenshot:screenshot --fullpage

Find out more regarding screenshots and other features


对于

Shift+F2 或转到 工具 > Web Developer > Developer Toolbar 以打开命令行。写:

screenshot

然后按 Enter 以截取屏幕截图。

要完整回答问题,您甚至可以保存整个页面,而不仅仅是它的可见部分:

screenshot --fullpage

要将屏幕截图复制到剪贴板,请使用--clipboard 选项:

screenshot --clipboard --fullpage

Firefox 18 改变了参数传递给命令的方式,你必须在它们之前添加“--”。

Firefox 88.0 有一种新的截图方法。如果在 about:config 中将 extensions.screenshots.disabled 设置为 false,您可以右键单击屏幕并选择 Take Screenshot。您还可以通过自定义将屏幕截图菜单按钮添加到菜单中。

您可以找到一些文档和完整的命令列表here

PS。截图默认保存在downloads目录中。

【讨论】:

  • 如果您只想将屏幕截图复制到剪贴板,请直接使用 screenshot --clipboard --fullpage
  • 该命令在 javascript 控制台中不起作用,那么是否有指向有关此工具栏的更多信息的链接?它还能做什么?
  • 仅供参考,您也可以通过检查器选择 DOM 注释,然后选择 right-click -> screenshot node。当您想要截取页面的一部分时,这非常有用。
  • 整页截图到剪贴板 - screenshot --clipboard --fullpage 特定节点的截图(按 ID) - screenshot --clipboard --selector #elementId
  • 我必须使用:screenshot --clipboard --fullpage(注意冒号)
【解决方案2】:

2018 年 7 月 23 日更新

正如刚刚在 cmets 中指出的那样,这个问题是关于从命令行获取屏幕截图。对不起,我刚刚读了一遍。所以这里是正确的答案:

从 Firefox 57 开始,您可以像这样在无头模式下创建屏幕截图:

firefox -screenshot https://developer.mozilla.com

documentation 中了解更多信息。

2017 年 6 月 15 日更新

从 Firefox 55 开始,Firefox Screenshots 作为更灵活的替代方案。从 Firefox 57 开始,屏幕截图也可以捕获整页。

原答案

从 Firefox 32 开始,开发者工具 (F12) 中还有一个 full page screenshot button。如果未启用,请转到开发人员工具设置(齿轮按钮)并在“可用工具箱按钮”部分选择“获取整页截图”。

来源:developer.mozilla.org

默认情况下,屏幕截图保存在下载目录中。这类似于工具栏中的screenshot --fullpage

【讨论】:

  • 对于在 F12 上打开 Firebug 的用户,可以使用 Ctrl+Shift+K 或 Ctrl+Shift+I 来使用开发者工具。只是……以防万一……有人以前从未使用过它们。
  • 这些键盘快捷键在 Mac 上不起作用。使用工具 > Web 开发人员 > 切换工具。而且,是的,屏幕截图按钮 默认禁用。点击设置图标启用。
  • 在Mac上,你可以用cmd+alt+i打开开发者工具
  • Firefox Screenshots 将截取的屏幕截图上传到 Mozilla 的服务器。他们没有让我提前注意到这一点。幸运的是,在我的情况下,图像并不太敏感,尽管它是内部的。请注意。
  • 来自问题:“我发现了许多 Firefox 附加组件,但我正在寻找可以使用 Shell 命令行编程的解决方案。”
【解决方案3】:

我最终编写了一个自定义解决方案(Firefox 扩展)来执行此操作。我想在我开发它的时候,enreas 中提到的命令行并不存在。

Firefox 扩展是CmdShots。如果您需要更好地控制截屏过程(或者您想要进行一些 HTML/JS 修改和图像处理),这是一个不错的选择。

您可以使用它并滥用它。我决定让它未经许可,所以你可以随意使用它。

【讨论】:

  • 嗯,这不是“未经许可”的意思:它实际上意味着您没有给予任何使用许可,这显然不是真的,因为在这句话中您还说可以使用,滥用,并随心所欲地玩它。也许您想要the CC0 之类的东西?
  • 对于那些“未经许可”的东西,我更喜欢这个:wtfpl.net 它清楚地说明了没有合法 BS 的情况。
  • @SamB 我偶然发现了你的评论。是的,三年后我知道了。问题是如果我写一个许可证,我已经把事情复杂化了。 NOLICENSE 方法是简单地填充。
  • 请大家不要使用自定义许可证。我知道人们试图通过编写自己的许可证来避免法律上的废话,但他们最终会做相反的事情,当他们试图弄清楚自定义许可证的实际含义时,这会给人们带来法律上的头痛。请参阅choosealicense.com
  • @SamB - 虽然“unlicensed”不是明确的“官方许可”,但“The Unlicense”实际上一个许可,并且似乎非常接近于OP 描述了他使用他的代码的意图。见:choosealicense.com/licenses/unlicense
【解决方案4】:

我认为您正在寻找的是一个实用程序,它使您能够将在浏览器中打开的完整页面保存到 png 文件中。您很可能正在寻找像 commandlineprint2 这样的实用程序。

安装扩展后,你只需要输入命令:

firefox -print http://google.com -printfile ~/foo.png

【讨论】:

    【解决方案5】:

    Firefox Screenshots 是 Firefox 附带的一个新工具。它不是开发者工具,它是针对浏览器的最终用户的。

    要截取屏幕截图,请右键单击页面上的空白区域,然后选择“截取屏幕截图”。如果您然后单击“保存整页”,它将保存整页,为您滚动。

    (来源:mozilla.net

    【讨论】:

    • 来自问题:“我发现了很多 Firefox 附加组件,但我正在寻找可以使用 Shell 命令行编程的解决方案。”
    • @Quentin 这不是一个插件,它直接集成在最新的 Firefox 版本中。
    • @Veve — 强调“使用 Shell 命令行”
    • 我有 Firefox 88.0,右键单击时看不到“截屏”选项。我相信这是因为默认情况下,about:config 中的extensions.screenshots.disabled 属性设置为true。需要将其设置为 false 才能使该方法起作用。否则,您需要添加屏幕截图选项。 (更改这些属性时无需重新启动)
    • @TylerH 您需要右键单击空白区域。我已经编辑了我的答案。
    【解决方案6】:

    您可以使用 selenium 和 Firefox 的 webdriver。

    import selenium.webdriver
    import selenium.common
    
    options = selenium.webdriver.firefox.options.Options()
    # options.headless = True
    with selenium.webdriver.Firefox(options=options) as driver:
        driver.get('http://google.com')
        time.sleep(2)
        root=driver.find_element_by_tag_name('html')
        root.screenshot('whole page screenshot.png')
    

    【讨论】:

      猜你喜欢
      • 2017-12-25
      • 2013-04-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-10-06
      • 1970-01-01
      相关资源
      最近更新 更多