1

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

我查看了其他类似 about.me 的网站，我想知道他们可能会做什么来创建页面截图。示例：https ://about.me/search/#!/tag/MIT

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

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

4

5 回答 5

3

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

使用 HTML5/Canvas/JavaScript 截取屏幕截图

否则：

通过： 如何在 JavaScript 客户端截取网站 / Google 是如何做到的？（无需访问硬盘）

10 美元/月： http ://bugmuncher.com/

或 http://usersnap.com/

您希望一个自动化的过程，还是一个由用户初始化的过程？

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

于 2013-05-08T02:01:41.603 回答
3

看看wkhtmltoimage。给它一些 HTML，它将呈现页面在 Webkit 浏览器中可能看起来的图像（“可能”，因为浏览器各不相同，并且 Webkit 一直在开发中）

于 2013-05-08T01:54:43.770 回答
1

About.com 使用http://url2png.com/截取屏幕截图。还有其他服务，例如https://browshot.com/。这意味着如果出现以下情况，则必须保存用户页面以供外部服务进行截图：

  1. 将用户页面保存到 UrlA
  2. 调用 Web 服务截取 UrlA
于 2013-05-08T02:38:58.347 回答
1

我以前必须为客户这样做，根据经验，最简单的方法之一是使用名为 GrabzIt 的免费第三方服务。它们非常可靠、快速，并且拥有包括 PHP 在内的五种不同语言的 API。

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);
于 2013-05-08T01:59:52.803 回答
0

你基本上有两个选择：渲染它客户端或服务器端。

对于客户端渲染，您有几个选项 - 最流行的一个是html2canvas。html2canvas 的缺点是它并不总是准确的，特别是如果你使用很多绝对的、固定的、..另外你可能需要一个代理来解决加载图像时的 cors 问题。

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

你也可以使用像Bugbattle这样的东西，它基本上结合了这两种方法。

于 2021-03-23T09:18:38.653 回答