是否可以使用 JavaScript 截取网页的屏幕截图，然后将其提交回服务器？
我不太关心浏览器的安全问题。等等，因为实现将针对HTA。但有可能吗？
【问题讨论】：
标签： javascript hta webpage-screenshot
您可以使用 HTA 和 VBScript 实现这一目标。只需调用外部工具进行截图。我忘了名字是什么，但在 Windows Vista 上有一个工具可以截屏。您甚至不需要额外安装它。
至于自动 - 这完全取决于您使用的工具。如果它有 API，我相信你可以通过几个 Visual Basic 调用触发屏幕截图和保存过程，而用户不知道你做了什么。
既然您提到了 HTA，我假设您在 Windows 上并且（可能）非常了解您的环境（例如操作系统和版本）。
【讨论】：
我们对报告错误也有类似的要求。由于它是针对 Intranet 场景的，因此我们能够使用浏览器插件（例如用于 Firefox 的 Fireshot 和用于 Internet Explorer 的 IE Screenshot）。
【讨论】：
我使用 ActiveX 控件为 HTA 完成了此操作。在 VB6 中构建控件以截取屏幕截图非常容易。我不得不使用 keybd_event API 调用，因为 SendKeys 不能做 PrintScreen。这是代码：
Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)
Public Const CaptWindow = 2
Public Sub ScreenGrab()
keybd_event &H12, 0, 0, 0
keybd_event &H2C, CaptWindow, 0, 0
keybd_event &H2C, CaptWindow, &H2, 0
keybd_event &H12, 0, &H2, 0
End Sub
这只能让您将窗口移至剪贴板。
另一种选择，如果您想要截屏的窗口是 HTA，则只需使用 XMLHTTPRequest 将 DOM 节点发送到服务器，然后在服务器端创建截屏。
【讨论】：
SnapEngage 使用Java applet (1.5+) 来制作浏览器截图。 AFAIK，java.awt.Robot 应该完成这项工作 - 用户只需允许小程序执行它（一次）。
我刚刚找到了一篇关于它的帖子：
【讨论】：
Pounder 是否可以通过将整个身体元素设置到画布中然后使用 canvas2image 来做到这一点？
【讨论】：
如果在 Windows 上运行并安装了 .NET，您可以这样做：
public Bitmap GenerateScreenshot(string url)
{
// This method gets a screenshot of the webpage
// rendered at its full size (height and width)
return GenerateScreenshot(url, -1, -1);
}
public Bitmap GenerateScreenshot(string url, int width, int height)
{
// Load the webpage into a WebBrowser control
WebBrowser wb = new WebBrowser();
wb.ScrollBarsEnabled = false;
wb.ScriptErrorsSuppressed = true;
wb.Navigate(url);
while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }
// Set the size of the WebBrowser control
wb.Width = width;
wb.Height = height;
if (width == -1)
{
// Take Screenshot of the web pages full width
wb.Width = wb.Document.Body.ScrollRectangle.Width;
}
if (height == -1)
{
// Take Screenshot of the web pages full height
wb.Height = wb.Document.Body.ScrollRectangle.Height;
}
// Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
wb.Dispose();
return bitmap;
}
然后通过 PHP 你可以做到：
exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");
然后你就有了服务器端的截图。
【讨论】：
Google 正在 Google+ 中执行此操作，一位才华横溢的开发人员对其进行了逆向工程并制作了 http://html2canvas.hertzen.com/。要在 IE 中工作，您需要一个画布支持库，例如 http://excanvas.sourceforge.net/
【讨论】：
我发现的另一种可能的解决方案是http://www.phantomjs.org/，它可以让人们非常轻松地截取页面和更多内容。虽然我对这个问题的原始要求不再有效（不同的工作），但我可能会将 PhantomJS 集成到未来的项目中。
【讨论】：
https://grabz.it 提供了一个很好的 Javascript 截图解决方案。
他们有一个灵活且易于使用的屏幕截图 API，可以被任何类型的 JS 应用程序使用。
如果你想尝试，首先你应该得到授权app key + secret和free SDK
然后，在您的应用中，实施步骤将是：
// include the grabzit.min.js library in the web page you want the capture to appear
<script src="grabzit.min.js"></script>
//use the key and the secret to login, capture the url
<script>
GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com").Create();
</script>
可以使用不同的parameters 自定义屏幕截图。例如：
GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com",
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>
就是这样。 然后稍等片刻，图片会自动出现在页面底部，无需重新加载页面。
屏幕截图机制还有其他功能，您可以探索here。
也可以在本地保存屏幕截图。为此，您需要使用 GrabzIt 服务器端 API。欲了解更多信息，请查看详细指南here。
【讨论】：
我发现 dom-to-image 做得很好（比 html2canvas 好得多）。请看以下问答：https://stackoverflow.com/a/32776834/207981
此问题询问有关将其提交回服务器的问题，这应该是可能的，但是如果您要下载图像，则需要将其与 FileSaver.js 结合使用，并且如果要下载包含多个图像文件的 zip 都在客户端生成，请查看 jszip。
【讨论】：
如果您愿意在服务器端执行此操作，可以使用 PhantomJS 之类的选项，但现在已弃用。最好的方法是在 Node.JS 上使用类似 Puppeteer 的 Headless Chrome。使用 Puppeteer 捕获网页非常简单：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();
但是，它需要 headless chrome 才能在您的服务器上运行，这有一些依赖性，可能不适合受限环境。 （另外，如果您不使用 Node.JS，您可能需要自己处理浏览器的安装/启动。）
如果您愿意使用 SaaS 服务，有很多选择，例如
【讨论】：
【讨论】：
截至今天 2020 年 4 月 GitHub 库 html2Canvas https://github.com/niklasvh/html2canvas
GitHub 20K 星 | Azure pipeles : 成功 |下载 1.3M/月 |
quote : " JavaScript HTML 渲染器 该脚本允许您直接在用户浏览器上截取网页或其部分的“屏幕截图”。屏幕截图基于 DOM，并且作为这可能不是 100% 准确的真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。
【讨论】：
我做了一个简单的函数，它使用 rasterizeHTML 来构建一个 svg 和/或带有页面内容的图像。
检查一下：
【讨论】：