在命令行上使用Firefox拍摄整页截图


224

我正在VPS的Xvfb上运行Firefox。我想做的是截取该页面的整个页面截图。

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

firefox http://google.com

并使用ImageMagick截屏(在X内)

import root -window output.jpg

问题是,大多数页面需要滚动,而我事先不知道高度。

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

我找到了许多Firefox插件,但我正在寻找可以使用Shell命令行进行编程的解决方案。

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


1
我看过一些用于截屏的webkit cli工具,但我不记得这些名称了。
Rufo El Magufo

Answers:


480

开发工具栏图形化命令行和Shift+ F2快捷方式在Firefox 60版本被拆除。要以60或更高版本拍摄屏幕截图:

  • Ctrl+ Shift+ K打开开发人员控制台(在macOS上为⌥ Option+ ⌘ Command+ K
  • 键入:screenshot:screenshot --fullpage

了解有关屏幕截图和其他功能的更多信息


对于<60的Firefox版本:

Shift+ F2或转到工具> Web开发人员>开发人员工具栏以打开命令行。写:

screenshot

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

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

screenshot --fullpage

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

screenshot --clipboard --fullpage

Firefox 18更改了将参数传递给命令的方式,您必须在命令之前添加“-”。

您可以在此处找到一些文档和完整的命令列表。

PS。屏幕截图默认情况下保存到下载目录中。


4
如果您只想将屏幕快照复制到剪贴板,请直接使用屏幕快照--clipboard --fullpage
mbokil 2014年

2
该命令在javascript控制台中不起作用,因此是否有指向此工具栏的更多信息的链接?它还能做什么?
tremby 2014年

5
仅供参考,您还可以通过检查器选择DOM注释,然后选择right-click-> screenshot node。当您要截屏页面的一部分时,这非常有用。
汤姆(Tom)

5
剪贴板上的完整页面截图- screenshot --clipboard --fullpage特定节点的截图(按ID)screenshot --clipboard --selector #elementId
Mohnish

3
我不得不使用:screenshot --clipboard --fullpage(注意结肠)
someonr '18

134

更新2018-07-23

正如评论中指出的那样,这个问题是关于从命令行获取屏幕截图。抱歉,我只是看完了。所以这是正确的答案:

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

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

文档中阅读更多内容

更新2017-06-15

从Firefox 55开始,Firefox截图是一种更灵活的选择。从Firefox 57开始,屏幕截图也可以捕获整个页面。

原始答案

从Firefox 32开始,开发人员工具(F12)中还有一个完整的页面截图按钮。如果未启用,请转到开发人员工具设置(齿轮按钮),然后在“可用工具箱按钮”部分中选择“获取完整的屏幕截图”。

开发人员工具工具栏 来源:developer.mozilla.org

默认情况下,屏幕截图保存在下载目录中。这与screenshot --fullpage工具栏中的工作方式相似。


7
对于在F12上打开了Firebug的用户,可以使用Ctrl + Shift + K或Ctrl + Shift + I来使用开发人员工具。只是...以防万一...以前从未使用过它们。
Kir Kanos 2014年

这些键盘快捷键在Mac上不起作用。使用工具> Web Developer>切换工具。而且,是的,默认情况下,屏幕快照按钮禁用的。单击设置图标以启用。
Snowcrash 2015年

在Mac上,您可以使用cmd+ alt+ 打开开发人员工具i
achairapart

Firefox屏幕截图将屏幕截图上传到Mozilla的服务器。他们没有让我提前注意到这一点。幸运的是,在我看来,该图像不是很敏感,尽管它是内部的。被警告。
锤兄弟。

1
从一个问题开始:“我找到了许多Firefox附加组件,但我正在寻找可以使用Shell命令行进行编程的解决方案。”
昆汀'18

9

我最终编写了实现此目的的自定义解决方案(Firefox扩展)。我认为,在我开发它时,enreas中提到的命令行并不存在。

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

您可以使用它并滥用它。我决定让它保持无牌状态,因此您可以随意使用它。


20
嗯,这不是“未经许可”的意思:它实际上意味着您没有对任何使用的任何许可,这显然是不正确的,因为在那句话中您还说可以随便使用,滥用和玩耍想。也许您想要像CC0这样东西?
SamB

对于那些“未经许可”的东西,我更喜欢:wtfpl.net它清楚地说明了没有合法BS所允许的内容。
kap

@SamB我偶然发现了您的评论。是的,我知道3年后。问题是,如果我写许可证,我已经很麻烦。NOLICENSE方法只是填充。
奥马尔·阿比德

3
拜托大家,不要使用自定义许可证。我知道人们试图通过编写自己的许可证来避免法律上的胡扯,但最终却相反,在试图弄清楚自定义许可证的实际含义时会给人们带来法律上的麻烦。见choosealicense.com
Flimm

@SamB-虽然“未经许可”不是明确的“官方许可”,但是“ Unlicense”实际上许可,并且似乎与OP所描述的使用其代码的意图非常接近。看到: choicealicense.com/licenses/unlicense
Will Ediger

8

我认为您正在寻找的是一种实用程序,可让您将在浏览器中打开的完整页面保存到png文件中。很可能您正在寻找类似commandlineprint2的实用程序。

安装扩展程序后,只需键入以下命令:

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

1

Firefox屏幕截图是Firefox附带的新工具。它不是开发人员工具,而是针对浏览器的最终用户的。

要截屏,请单击地址栏中的页面操作菜单,然后单击“截屏”。如果然后单击“保存整页”,它将为滚动保存整页。


(来源:mozilla.net


3
从一个问题开始:“我找到了许多Firefox附加组件,但我正在寻找可以使用Shell命令行进行编程的解决方案。”
昆汀'18

-1

您可以将selenium和webdriver用于Firefox。

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')
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.