捕获浏览器内容的截图（网站）

Question

我的目标是拥有一个网站的形象（是的，就这么简单）。 我知道有像html2canvas这样的工具。但是我不希望客户端浏览器呈现屏幕截图。

一个原因是我使用带有webview的Chrome扩展程序，其基本上与iFrame相似。出于安全原因，为包含iFrame的网站呈现屏幕截图不起作用。

我也知道他们正在研究natively support capturing website screenshots的功能，但我想要一个跨浏览器解决方案而不依赖于浏览器的可能性。所有这些都发生在服务器上，所以它应该可以通过命令行执行。

我现在正在做的是：

1. 通过命令行打开浏览器
2. 通过命令行将焦点切换到浏览器窗口
3. 通过命令行制作屏幕截图（mac上的screencapture，Linux上的scrot）

在这个基本级别进行操作的缺点是图像包含状态栏，浏览器插件等等。实际上我只想拥有实际的网站内容而没有所有这些应用程序特定的东西

• 最糟糕的解决方案是硬编码内容的0 | 0位置相对于每个浏览器的窗口。这很糟糕（原因很明显）。
• 我提出的另一个解决方案是：告诉浏览器（我可以说 通过套接字插件）在x：0; y：0;处添加类似QR码的内容，将屏幕截图发送到图像处理服务器。 之后删除QR码并再次发送屏幕截图。然后我 知道相对于0 | 0的每个点，但它也不是那么优雅。

最好的事情是命令行工具，它以某种方式让我确定我想要捕获图像的应用程序的哪个部分。

示例是this plugin for Firefox或this server-side tool或所有这些工具提供具有不同浏览器和操作系统的网站的屏幕截图，例如this。我想知道他们如何摆脱浏览器特定的GUI元素。

加成：

我不知道我是否足够清楚，但我想要一个特定浏览器内容的屏幕截图，但没有特定于浏览器的GUI元素。这意味着运行无头浏览器的应用程序对我没用。因为无头浏览器有自己的引擎。我特别想要截取例如Firefox版本x。

Answer 1

你知道Selenium吗？ 它是一个实际打开特定浏览器并运行脚本测试的测试工具。 它也可用于截取屏幕截图。

This might be a solution to your problem

Answer 2

Awesomescreenshot实际上会向下滚动页面，然后拍摄实际屏幕截图，然后将这些图像合并为一张长图像。您甚至可以将其设置为仅捕获显示的页面部分或选定的部分。

您可以将其与像Auto Hot Keys这样的宏类型程序/脚本语言混合使用。您可能比使用命令行更容易找到它。我想这取决于你想要做什么。

Answer 3

大多数服务器端语言只提供HTML并且永远不会呈现它。一段时间后，我遇到了索引单页javascript应用程序的问题，其中一个解决方案是phantomJS。

PhantomJS完全符合您的要求。您可以渲染HTML（服务端），Phantom也内置了canvas，因此您可以使用它进行截屏。 Phantom是webkit，因此它将涵盖大多数流行的浏览器（Chrome，Safari，Opera）。如果你想看看网站在Firefox上会是什么样子，你可以尝试SlimerJS（类似于PhantomJs但运行Gecko引擎）。

这将涵盖所有最流行的浏览器（IE除外）。这仍然是一个无头的解决方案，但您将能够看到不同的布局引擎。您将需要NodeJS，它可能有点学习，但它们都有关于屏幕截图的文档。祝你好运！

• http://phantomjs.org/screen-capture.html
• http://docs.slimerjs.org/current/quick-start.html#taking-screenshots

Answer 4

有两种方法可以做到：

1. 为Firefox或Chrome创建插件

通过在页面上创建画布覆盖来拍摄屏幕截图。图像来自文档，因此浏览器UI不是图像的一部分。

1. 重新创建浏览器（PhantomJS，TrifleJS）

首先没有浏览器用户界面。

Answer 5

有各种各样的工具开源以及付费来做同样的事情。但是，请记住安全原因。我建议您使用Google本身的 '保存到云端硬盘' 扩展程序。

这将为您提供一种更安全的方式将屏幕截图直接保存到您的谷歌硬盘，并且屏幕截图还允许用户将图片或其他文档保存到谷歌硬盘。

//第二个建议//

如果您不想使用上述扩展名，那么您可以使用'Blipshot'，它是一个开源工具，也可以在GitHub上使用。

//第三个建议//

第三个最佳解决方案是 整页屏幕截图 。

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

我希望它可以帮到你！

Answer 6

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

要捕获具有特定浏览器和版本的网页截图，需要一个可以在所有这些浏览器中启动，运行和捕获的框架。此外，该问题并未指定特定平台是否也需要与所述浏览器结合使用和版本一样，如OSX，Windows，Linux，Android等。这些平台的不同版本将进一步增加可能的组合。

• 您需要设置，维护这些浏览器
• 找到或创建一个驱动它们的框架，Selenium可能是你最好的选择
• 克服某些浏览器/操作系统组合在Selenium中缺乏支持
• 管理此功能的基础架构，并在一个很好的API中公开以供使用

但是现有解决方案或相关解决方案，例如：

至于在特定浏览器，版本，平台等中获取屏幕截图

http://browsershots.org/是免费的，并且有大量的浏览器组合，如果您可以通过编程方式访问它，不是很清楚。

完成此操作只需调用和现有API

crossbrowsertesting.com是一项商业服务（免费试用），似乎可以满足所有要求。

是否有能够做到这一点的技术

http://usersnap.com支持许多桌面和移动浏览器，并且已经做了很多工作来在服务器上获得像素完美的屏幕截图，与用户在其环境中看到的完全相同。

工程师将重点放在解决方案上......

对于我们的工程类型来说，这是典型的，我们陷入了如何实施特定解决方案的困境。关于获取这些屏幕截图将解决的问题，即基本要求，目前尚不清楚。如果知道这可能还有其他更简单的方法吗？

Answer 7

过去我和XULRunner

运气不错

您可以尝试此处列出的例程：https://blog.builtwith.com/2010/07/02/mozilla-automated-website-screen-grabber/

基本上运行Firefox的shell并自动获取截图的过程。它可能需要一些调整，但我认为它可以满足您的要求。