Question

我正在开展一个项目，我需要基本上截取用户在我的应用程序上创建的页面的屏幕截图，我不知道从哪里开始。

我已经查看了其他像about.me这样做的网站，我想知道他们在创建网页截图时可能会做些什么。示例：https://about.me/search/#!/tag/MIT

缩略图基本上是页面的精确副本（包括字体等......）

我该如何处理？客户端，服务器端？

Answer 1

看看wkhtmltoimage。给它一些HTML，它会在Webkit浏览器中呈现页面的样子（“可能”因为浏览器不同而且Webkit一直在处理）

Answer 2

看起来这个问题的答案就是你所追求的。

Using HTML5/Canvas/JavaScript to take screenshots

否则：

经： How to screenshot website in JavaScript client-side / how Google did it? (no need to access HDD)

$ 10 /月： http://bugmuncher.com/

或 http://usersnap.com/

您是希望采用自动化流程，还是希望由用户初始化流程？

无论是截取页面的哪种方式，您都需要在某处呈现页面 - ＆gt;通过浏览器或其他方法。这在客户端上更容易，因为有很多浏览器和其他渲染程序为你做足部工作，所有你需要做的就是弄清楚如何获得渲染的截图/副本使用javascript的页面。

Answer 3

我之前必须为客户做这件事，从经验来看，最简单的方法之一是使用名为GrabzIt的免费第三方服务。它们非常可靠，速度快，并且有五种不同语言的API，包括PHP。

http://grabz.it/

include("GrabzItClient.class.php");

$grabzIt = new GrabzItClient("APPLICATION KEY", "APPLICATION SECRET");
$id = $grabzIt->TakePicture("http://www.google.com");

//wait a certain amount of time

$result = $grabzIt->GetPicture($id);

if (!$result)
{
return;
}

file_put_contents("images" . DIRECTORY_SEPARATOR . $filename, $result);

Answer 4

About.com使用http://url2png.com/截取屏幕截图。还有其他服务，例如https://browshot.com/。这意味着必须保存用户页面，以便以后为外部服务保存以获取屏幕截图：

将用户页面保存到UrlA
致电网络服务以获取UrlA的截图

Answer 5

您基本上有两种选择：在客户端或服务器端渲染。

对于客户端渲染，您有几种选择 - 最受欢迎的一种是 html2canvas。 html2canvas 的缺点是它并不总是准确的，特别是如果您使用大量绝对的、固定的等，此外您可能需要一个代理来解决加载图像时的 cors 问题。

对于服务器端渲染，您可以使用 puppeteer 之类的东西，它基本上允许您启动 Chrome 浏览器并截取屏幕截图。在 JS 方面，您基本上收集所有 html 并将其发送到您的服务器，该服务器根据视口、滚动位置等呈现网站。

您也可以使用 Bugbattle 之类的东西，它基本上结合了两种方法。

获取网页客户端或服务器端的屏幕截图

5 个答案: