我正在做一个项目，我基本上需要截取用户在我的应用程序上创建的页面的屏幕截图，但我不知道从哪里开始。
我查看了其他类似 about.me 的网站，我想知道他们可能会做什么来创建页面截图。示例：https://about.me/search/#!/tag/MIT
缩略图基本上是页面的精确副本（包括字体等...）
我该如何处理？客户端，服务器端？
【问题讨论】：
标签： javascript image screenshot
看看wkhtmltoimage。给它一些 HTML，它会在 Webkit 浏览器中呈现页面可能看起来的图像（“可能”，因为浏览器各不相同，Webkit 一直在开发中）
【讨论】：
我以前曾为客户这样做过，根据经验，最简单的方法之一是使用名为 GrabzIt 的免费第三方服务。它们非常可靠、快速，并且拥有包括 PHP 在内的五种不同语言的 API。
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);
【讨论】：
看起来这个问题的答案就是你所追求的。
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/
您希望一个自动化的过程，还是一个由用户初始化的过程？
无论是截屏页面，您都需要在某处呈现页面 -> 通过浏览器或其他方法。这在客户端上更容易做到，因为有很多浏览器和其他渲染程序会为您完成步法，您所要做的就是弄清楚如何获取 渲染 的屏幕截图/副本strong> 使用 javascript 的页面。
【讨论】：
About.com 使用http://url2png.com/ 截取屏幕截图。还有其他服务，例如https://browshot.com/。这意味着如果出现以下情况，则必须保存用户页面以供外部服务截取屏幕截图：
【讨论】：
您基本上有两个选择：在客户端或服务器端渲染它。
对于客户端渲染，您有几个选项 - 最受欢迎的选项是 html2canvas。 html2canvas 的缺点是它并不总是准确的，特别是如果您使用大量的绝对定位、固定定位、.. 此外，您可能需要代理来解决加载图像时出现的 cors 问题。
对于服务器端渲染，您可以使用 puppeteer 之类的东西，它基本上允许您启动 chromium 浏览器并截取屏幕截图。在 JS 方面，您基本上收集所有 html 并将其发送到您的服务器，该服务器根据视口、滚动位置等呈现网站。
您也可以使用Bugbattle 之类的东西，它基本上结合了这两种方法。
【讨论】：