是否可以使用JavaScript截取网页的屏幕截图，然后将其提交回服务器？
我不太担心浏览器的安全性问题。 等，因为实施将针对HTA。 但是有可能吗？
Google正在Google+中进行此操作，而一位才华横溢的开发人员对其进行了反向工程，并制作了http://html2canvas.hertzen.com/。要在IE中工作，您需要一个画布支持库，例如http://excanvas.sourceforge.net/
我已经通过使用ActiveX控件为HTA完成了此操作。在VB6中构建控件以截取屏幕截图非常容易。我必须使用keybd_event API调用，因为SendKeys无法执行PrintScreen。这是该代码：
1
2
3
4
5
6
7
8
9
10
11
| 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节点发送到服务器，然后在服务器端创建屏幕快照。
我发现的另一种可能的解决方案是http://www.phantomjs.org/，它使人们可以非常轻松地拍摄页面截图以及更多内容。尽管我对这个问题的原始要求不再有效(不同的工作)，但我可能会将PhantomJS集成到未来的项目中。
如果有可能这样做的话是Pounder的方法，那就是将整个人体元素设置为canvase，然后使用canvas2image？
http://www.nihilogic.dk/labs/canvas2image/
一种可能的方法是，如果在Windows上运行并安装了.NET，则可以执行以下操作：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| 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.webp");
然后，您将截图保存在服务器端。
对于您来说，这可能不是理想的解决方案，但仍然值得一提。
Snapsie是一个开放源ActiveX对象，它可以捕获和保存Internet Explorer屏幕快照。在客户端上注册DLL文件后，您应该能够捕获屏幕截图并将其使用JavaScript上传到服务器。缺点：它需要在客户端注册DLL文件，并且只能与InternetExplorer一起使用。
报告错误有类似的要求。由于它是针对Intranet方案的，因此我们能够使用浏览器插件(例如Firefox的Fireshot和InternetExplorer的IE截图)。
SnapEngage使用Java小程序(1.5+)制作浏览器屏幕截图。 AFAIK，java.awt.Robot应该完成该工作-用户只允许applet进行一次(一次)。
我刚刚找到了有关它的帖子：
-
堆栈溢出问题JavaScript代码无需使用ActiveX即可截取网站的屏幕截图
-
博客文章SnapABug的工作原理–以及他们应该做什么
我发现dom-to-image做得很好(比html2canvas好得多)。请参阅以下问题和解答：https://stackoverflow.com/a/32776834/207981
这个问题询问将其提交回服务器的可能性，但这是可能的，但是如果您要下载图像，则需要将其与FileSaver.js结合使用，以及是否要使用多个图像文件都在客户端生成，请看一下jszip。
您可以使用HTA和VBScript来实现。只需调用外部工具即可进行屏幕截图。我忘记了名称，但是在WindowsVista上有一个用于截屏的工具。您甚至不需要额外安装。
至于自动-完全取决于您使用的工具。如果它具有API，我相信您可以通过几次Visual Basic调用来触发屏幕截图和保存过程，而用户不会知道您做了什么。
既然您提到了HTA，我假设您使用的是Windows，并且(可能)非常了解您的环境(例如OS和版本)。
如果您愿意在服务器端进行操作，则可以使用PhantomJS之类的选项，现在不建议使用。最好的方式是在Head.Chrome上使用类似Puppeteer之类的Headless Chrome。使用Puppeteer捕获网页非常简单，如下所示：
1
2
3
4
5
6
7
8
9
10
| 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.webp'});
await browser.close();
})(); |
但是，它需要无头chrome才能在您的服务器上运行，这有一定的依赖性，可能不适用于受限的环境。 (此外，如果您不使用Node.JS，则可能需要亲自处理浏览器的安装/启动。)
如果您愿意使用SaaS服务，则有很多选择，例如
https://grabz.it提供了一种使用Javascript截屏的绝佳解决方案。
它们具有灵活且易于使用的屏幕截图API，可被任何类型的JS应用程序使用。
如果您想尝试一下，首先应该获得授权应用密钥+机密和免费的SDK
然后，在您的应用中，实现步骤将是：
1
2
3
4
5
6
| // include the grabzit.min.js library in the web page you want the capture to appear
<script src="grabzit.min.js">
//use the key and the secret to login, capture the url
GrabzIt("KEY","SECRET").ConvertURL("http://www.google.com").Create(); |
屏幕截图可以使用不同的参数进行自定义。例如：
1
2
| GrabzIt("KEY","SECRET").ConvertURL("http://www.google.com",
{"width": 400,"height": 400,"format":"png","delay", 10000}).Create(); |
就这样。
然后，稍等片刻，图像将自动出现在页面底部，而无需重新加载页面。
屏幕快照机制还有其他功能，您可以在此处进行探索。
也可以将屏幕截图保存在本地。为此，您将需要利用GrabzIt服务器端API。有关更多信息，请在此处查看详细指南。
