捕捉浏览器内容(网站)的屏幕截图。

23
我的目标是拥有一个网站的图像(就是这么简单)。 我知道有像html2canvas这样的工具。然而,我不想让客户端浏览器呈现屏幕截图。 其中一个原因是我使用了一个带有webview的Chrome扩展程序,它本质上的行为类似于iFrame。出于安全原因,在包含iFrame的网站上呈现屏幕截图是无法实现的。 我也知道他们正在努力支持原生捕获网站截图,但我想要一个跨浏览器的解决方案,而不是依赖于浏览器的可能性。所有这些都在服务器上进行,因此应该可以通过命令行执行。 我现在正在做的是:
  1. 通过命令行打开浏览器
  2. 通过命令行切换到浏览器窗口
  3. 通过命令行进行截屏(在Mac上是screencapture,在Linux上是scrot)
在这个基本级别上进行操作的缺点是图像包含状态栏、浏览器插件等等。事实上,我只想要实际的网站内容,而不需要所有这些特定于应用程序的东西。
  • 最糟糕的解决方案是为每个浏览器硬编码内容相对于窗口的0|0位置。这很糟糕(显而易见的原因)。
  • 我想到的另一个解决方案是:告诉浏览器(我可以通过套接字与插件通信)在x:0;y:0;添加类似QR码的东西,将屏幕截图发送到图像处理服务器。之后删除QR码并再次发送屏幕截图。然后我就知道了相对于0|0的每个点,但这也不太优雅。

最好的办法是一个命令行工具,它可以让我确定我想要捕获图像的应用程序的哪一部分。

一个例子是这个Firefox插件或者这个服务器端工具,或者像这些一样提供不同浏览器和操作系统的网站截图的所有工具。我想知道他们如何摆脱特定于浏览器的GUI元素。 补充: 我不知道我是否表述清楚了,但我想要一个特定浏览器内容的屏幕截图,但没有浏览器特定的GUI元素。这意味着运行无头浏览器的应用程序对我没有用处。因为无头浏览器有自己的引擎。我特别想要例如Firefox版本x的屏幕截图。

在Chrome中应该看到https://developer.chrome.com/extensions/samples#search:screenshot,使用https://developer.chrome.com/extensions/tabs预设的选项卡权限。 - VelikiiNehochuha
最理想的情况是整个页面都能被截取。我可以通过套接字与浏览器通信,告诉它捕获、滚动、再捕获、再滚动等等,然后在服务器上将图像拼接起来。我不是担心图像中有太少相关内容,而是太多了!(用户界面元素) - Schnodderbalken
如果使用命令行工具可以的话,您需要哪些语言?您目前已经将此标记为 [tag:JavaScript]。 - Sildoreth
2
你不能简单地切换浏览器的全屏模式并捕获整个屏幕吗? - Sebastian G. Marinescu
@Schnodderbalken 然而,每个浏览器都有一个全屏浏览器的快捷键,即在Windows上是F11。您可以通过编程轻松地向进程发送按键。 - Francisco Aguilera
显示剩余6条评论
7个回答

8

好的,是个不错的建议。甚至可以启动特定的浏览器版本:https://dev59.com/93PYa4cB1Zd3GeqPexVi。你知道如何做到这一点吗?内容是否由JavaScript渲染?整个页面是否都被捕获(滚动)?是否可以捕获包含iframe之类外部元素的网站?我一定会研究一下的。谢谢! - Schnodderbalken
我不知道内部细节,但我可以看一下并尝试。你的理想行为是什么? - Ivan Batić

4
Awesomescreenshot 可以滚动页面并拍摄实际的屏幕截图,然后将这些图片合并成一个长图。您甚至可以将其设置为仅捕捉显示的页面部分或所选部分。
您可以将它与类似于Auto Hot Keys的宏类型程序/脚本语言混合使用。您可能会发现它比使用命令行更容易。我想这取决于您想要做什么。

我以前没听说过这个扩展。听起来很有前途。而且,它适用于Firefox和Chrome。让我困扰的是,截图仍然在客户端(使用JavaScript)上进行捕获。我真的能确定:
  1. 它会正确地呈现iframes(因为我使用webview)
  2. 它看起来100%(我是指100%)像渲染后的页面,因为之后我可能想进行逐像素比较。
- Schnodderbalken
1
我不能确定。找不到关于那一部分的讨论或文档。我在简单的iframe网站上进行了测试,看起来还可以,像素对比似乎也可以工作。不确定webviews是否适用。最快的方法是在您特定的项目上进行测试,以找出它是否适用。 - JemWritesCode

3
大多数服务器端语言只提供HTML而不渲染它。之前我遇到了单页JavaScript应用程序索引的问题,其中一种解决方案是PhantomJS
PhantomJS正好符合你的要求。你可以渲染HTML(服务器端),Phantom还内置有canvas,因此你可以使用它来截屏。Phantom是webkit,因此它将覆盖大多数流行的浏览器(Chrome、Safari、Opera)。如果你想看看网站在Firefox上的样子,可以尝试SlimerJS(类似于PhantomJS但运行Gecko引擎)。
这将涵盖所有最受欢迎的浏览器(除了IE)。这仍然是一个无头解决方案,但你将能够看到不同的布局引擎。你需要NodeJS,可能需要一些学习,但它们都有关于截图的文档。祝好运!

引用我上一段话:“我不知道我是否表达清楚,但我想要一个特定浏览器内容的截图,但没有浏览器特定的GUI元素。这意味着运行无头浏览器的应用对我没有用处。因为无头浏览器有自己的引擎。我特别想要例如Firefox版本x的屏幕截图。”如果我使用像PhantomJS这样的无头浏览器,我永远无法确定它在浏览器x版本y中看起来是否相同,然而这正是我想要的。 - Schnodderbalken
我的错。你可以尝试将PhantomJS与SlimerJS(http://slimerjs.org/)混合使用,以覆盖Webkit和Gecko。这将涵盖所有最受欢迎的浏览器。这仍然是一个无头解决方案,但你将能够看到不同的布局引擎。如果你想查看特定的浏览器版本,我恐怕无法帮助你。总之,这听起来像是一个困难的问题,所以如果你找不到其他解决方案,可以尝试这个。 - Jon Doe
好的,无论如何还是谢谢您 :). 是的,这可能是某种解决方案。然而,如果我不想改变任何东西,并且每次新的浏览器引擎变得流行时都要等待相应的无头浏览器实现,而且如果我想确保图像在实际浏览器中完全相同,那么这不是最好的方法 :( - Schnodderbalken
我明白了。抱歉,这是我能想到的最好的东西。如果你只是为了开发而尝试做这个,我曾经使用过一个很棒的工具 - http://vanamco.com/ghostlab/。我不认为它可以截屏,但它可以在任何浏览器上实时预览网站,并且可以同时预览多个网站。 - Jon Doe

1

许多浏览器、版本和操作系统平台的组合

要捕获特定浏览器和版本的网页截图,需要一个可以在所有这些浏览器中启动、运行和捕获的框架。此外,问题没有指定是否还需要针对与所述浏览器和版本相结合的特定平台(如OSX、Windows、Linux、Android等)进行捕获,这些平台的不同版本将进一步增加可能的组合。

  • 您需要设置和维护这些浏览器
  • 查找或创建一个驱动它们的框架,Selenium可能是最好的选择
  • 克服Selenium对某些浏览器/操作系统组合的支持不足
  • 管理此基础设施并将其公开为漂亮的API以供使用

然而,已经存在解决方案或相关解决方案,例如:

关于在特定浏览器、版本、平台等中获取截屏

http://browsershots.org/是免费的,并具有大量的浏览器组合,但不太清楚是否可以通过编程方式访问它。

通过调用现有API来完成此操作

crossbrowsertesting.com是一个商业服务(免费试用),似乎满足所有要求。

有没有可以做到这一点的技术?

http://usersnap.com 支持许多桌面和移动浏览器,并在服务器上进行了大量工作,以获得与用户环境中所见完全相同的像素完美截图。

工程师们关注解决方案而非需求...

对于我们这些工程师来说,通常会陷入如何实现特定解决方案的困境。问题并不清楚获取这些屏幕截图将解决什么问题,即底层需求。如果已知道这一点,也许还有其他更简单的方法可用?


1

有两种方法可以做到这一点:

  1. 为Firefox或Chrome创建插件

通过在页面上创建画布叠加层来拍摄截图。图像是从文档中获取的,因此浏览器UI不是图像的一部分。

  1. 重新创建一个浏览器(PhantomJS,TrifleJS)

首先根本没有浏览器UI。


1.) "但是我不想让客户端浏览器呈现出截图。" 2.) "这意味着运行无头浏览器的应用对我没有用处。因为无头浏览器有自己的引擎。我特别想要一个例如 Firefox 版本 x 的屏幕截图。我将不得不为基本上每个引擎创建一个无头浏览器,然后它将缺乏在同一浏览器的不同版本间获得不同结果的功能。" - Schnodderbalken

1

有许多开源和付费的工具可以做同样的事情。但出于安全考虑,我建议您使用谷歌自己的'保存到Drive'扩展程序。

这将为您提供一种更安全的方式,可以直接将屏幕截图保存到您的Google Drive中,并且除了截图之外,它还允许用户将图片或其他文档保存到Google Drive中。

// 第二个建议 //

如果您不想使用上述扩展,则可以使用'Blipshot',它是一个开源工具,也可在GitHub上获得。

// 第三个建议 //

第三个最佳解决方案是Full Page Screen Capture

这三个工具是Chrome浏览器以及其他浏览器中最好的评价屏幕截图工具之一。

希望它能帮助您!


0

总的来说,这很不错!它满足了我的需求。唯一的问题是我被限制在使用Firefox上。然而,正如我上面所说:“我想要一个跨浏览器的解决方案,而不是依赖于浏览器的可能性。”因为我的目标是比较某些浏览器的不同渲染效果。无论如何,谢谢 :) - Schnodderbalken

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接