Machen Sie einen Screenshot einer Webseite mit JavaScript?

Question

Ist es möglich, einen Screenshot einer Webseite mit JavaScript zu erstellen und dann an den Server zurückzusenden?

Ich bin nicht so besorgt um Browsersicherheitsprobleme. usw. als die Implementierung wäre für HTA. Aber ist es möglich?

Answer 1

Ich habe dies für eine HTA mit einem ActiveX-Steuerelement getan. Es war ziemlich einfach, das Steuerelement in VB6 zu erstellen, um den Screenshot zu erstellen. Ich musste den Aufruf keybd_event API verwenden, da SendKeys PrintScreen nicht ausführen kann. Hier ist der Code dafür:

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 

Das bringt Sie nur so weit wie das Fenster in die Zwischenablage zu bekommen.

Eine andere Option, wenn das Fenster, von dem ein Screenshot von einer HTA sein soll, einfach eine XMLHTTPRequest verwenden würde, um die DOM-Knoten an den Server zu senden, dann die Screenshots serverseitig erstellen.

Answer 2

können Sie erreichen, dass HTA und VBScript verwenden. Rufen Sie einfach ein externes Tool an, um den Screenshot zu erstellen. Ich habe vergessen, was der Name ist, aber unter Windows   Vista gibt es ein Tool, um Screenshots zu machen. Sie brauchen nicht einmal eine extra Installation dafür.

Wie für automatische - es hängt völlig von dem Werkzeug ab, das Sie verwenden. Wenn es eine API hat, bin ich sicher, dass Sie den Screenshot und den Speichervorgang durch ein paar Visual Basic-Aufrufe auslösen können, ohne dass der Benutzer weiß, dass Sie das getan haben, was Sie getan haben.

Da Sie HTA erwähnt, gehe ich davon aus Sie sind auf Windows und (wahrscheinlich) kennen Ihre Umgebung (z OS und Version) sehr gut.

Answer 3

Wir hatten eine ähnliche Anforderung für die Meldung von Fehlern. Da es für ein Intranet-Szenario war, konnten wir Browser-Addons verwenden (wie Fireshot für Firefox und IE Screenshot für Internet Explorer  ).

Answer 4

Dies ist vielleicht nicht die ideale Lösung für Sie, aber es könnte noch erwähnenswert sein.

Snapsie ist ein Open Source, ActiveX Objekt, mit dem Screenshots von Internet Explorer erfasst und gespeichert werden können. Sobald die DLL-Datei auf dem Client registriert ist, sollten Sie in der Lage sein, den Screenshot zu erfassen und die Datei mit JavaScript auf den Server hochzuladen. Nachteile: Es muss die DLL-Datei auf dem Client registrieren und funktioniert nur mit Internet Explorer  .

Answer 5

Die SnapEngage verwendet eine Java applet (1.5+), um einen Browser Screenshot zu machen. AFAIK, java.awt.Robot sollte den Job erledigen - der Benutzer muss dem Applet nur erlauben, es (einmal) zu tun.

Und ich habe gerade einen Beitrag über sie:

• Stack-Überlauf Frage JavaScript code to take a screenshot of a website without using ActiveX
• Blog post How SnapABug works – and what they should do

Answer 6

Pounder ist, ob dies möglich ist, indem das zu tun ganze Körperelemente in eine Leinwand dann mit canvas2image?

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

Answer 7

Eine Möglichkeit, dies zu tun, wenn auf Windows ausgeführt werden und .NET installiert Sie tun können:

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; 
} 

Und dann via PHP können Sie tun:

exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");

Dann haben Sie den Screenshot auf der Serverseite.

Answer 8

Google tut dies in Google+ und ein talentierter Entwickler hat es rückentwickelt und produziert http://html2canvas.hertzen.com/. Um in IE zu arbeiten, benötigen Sie eine Canvas-Support-Bibliothek wie http://excanvas.sourceforge.net/

Answer 9

Eine andere mögliche Lösung, die ich entdeckt habe, ist http://www.phantomjs.org/, die ermöglicht sehr einfach Screenshots von Seiten und eine ganze Menge mehr zu machen. Während meine ursprünglichen Anforderungen für diese Frage nicht mehr gültig sind (andere Arbeit), werde ich PhantomJS wahrscheinlich in zukünftige Projekte integrieren.

Answer 10

Eine großartige Lösung für Screenshot in Javascript ist die von https://grabz.it.

Sie haben eine flexible und einfach zu bedienende Screenshot-API, die von jeder Art von JS-Anwendung verwendet werden kann.

Wenn Sie es ausprobieren möchten, zunächst sollten Sie die Berechtigung app key + secret und die free SDK

Dann erhalten, in Ihrer Anwendung würden die Umsetzungsschritte sein:

// 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> 

Screenshot angepasst werden könnte verschiedene parameters. Zum Beispiel:

GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create(); 
</script> 

Das ist alles. Dann warten Sie einfach kurz und das Bild erscheint automatisch am unteren Rand der Seite, ohne dass Sie die Seite neu laden müssen.

Es gibt andere Funktionalitäten zum Screenshot-Mechanismus, die Sie erkunden können here.

Es ist auch möglich, den Screenshot lokal zu speichern. Dazu müssen Sie die GrabzIt serverseitige API verwenden. Weitere Informationen finden Sie in der ausführlichen Anleitung here.