用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。