用JavaScript截取网页截图？

Question

是否可以使用JavaScript截图网页，然后将其提交回服务器？

我并不关心浏览器的安全问题。等等，因为实施将是HTA。但是有可能吗？

Answer 1

我已经通过使用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节点发送到服务器，然后在服务器端创建屏幕截图。

Answer 2

您可以使用HTA和VBScript来实现。只需调用一个外部工具来执行屏幕截图。我忘了名字是什么，但在Windows上有一个工具来做屏幕截图。你甚至不需要额外的安装。

至于自动 - 它完全取决于你使用的工具。如果它有一个API，我相信你可以通过几个Visual Basic调用触发屏幕截图和保存过程，而用户不知道你做了什么。

既然你提到过HTA，我假设你在Windows上并且（很可能）非常熟悉你的环境（例如操作系统和版本）。

Answer 3

我们对报告错误有类似的要求。由于它是针对Intranet的情况，因此我们可以使用浏览器插件（如Firefox的Fireshot和Internet的  Explorer的IE Screenshot）。

Answer 4

这可能不是您理想的解决方案，但它可能仍值得一提。

Snapsie是一个开放源代码，ActiveX对象，可以捕获并保存Internet Explorer屏幕截图。在客户端注册DLL文件后，您应该能够捕获屏幕截图并使用JavaScript将文件上传到服务器。缺点：它需要在客户端注册DLL文件，并且只能与Internet   Explorer一起工作。

Answer 5

SnapEngage使用Java applet（1.5+）来制作浏览器截图。 AFAIK，java.awt.Robot应该完成这项工作 - 用户只需允许该applet执行该操作（一次）。

而且我刚刚发现了一个关于它的帖子：

• 堆栈溢出问题JavaScript code to take a screenshot of a website without using ActiveX
• 博客文章How SnapABug works – and what they should do

Answer 6

庞德尔的，如果这是可以通过设置做整个身体元素变成一个画布然后使用canvas2image？

http://www.nihilogic.dk/labs/canvas2image/

Answer 7

一个可能的方式做到这一点，如果在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");

然后你在服务器端有截图。

Answer 8

谷歌在Google+中这样做，一位有才华的开发人员对其进行了逆向设计并生产了http://html2canvas.hertzen.com/。要在IE中工作，您需要一个画布支持库，例如http://excanvas.sourceforge.net/

Answer 9

我发现的另一个可能的解决方案是http://www.phantomjs.org/，它允许用户非常轻松地截取页面的截图以及更多。虽然我对这个问题的原始要求不再有效（不同的工作），但我可能会将PhantomJS整合到未来的项目中。

Answer 10

截取Javascript的一个很好的解决方案是由https://grabz.it。

他们有一个灵活和简单易用的屏幕截图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。