Einen Screenshot einer Webseite mit JavaScript machen?

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

Ich bin nicht so besorgt über Browser-Sicherheitsprobleme. usw., da die Implementierung für HTA wäre . Aber ist es möglich?

Ich habe dies für einen HTA mithilfe eines ActiveX-Steuerelements getan. Es war ziemlich einfach, das Steuerelement in VB6 zu erstellen, um den Screenshot aufzunehmen. Ich musste den API-Aufruf keybd_event 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, dass Sie das Fenster in die Zwischenablage bringen.

Eine andere Option, wenn das Fenster, von dem Sie einen Screenshot wünschen, ein HTA ist, besteht darin, einfach eine XMLHTTPRequest zu verwenden, um die DOM-Knoten an den Server zu senden, und dann die Screenshots serverseitig zu erstellen.

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

Eine andere mögliche Lösung, die ich entdeckt habe, ist http://www.phantomjs.org/ , mit der man sehr einfach Screenshots von Seiten und vielem mehr machen kann. Obwohl meine ursprünglichen Anforderungen für diese Frage nicht mehr gültig sind (anderer Job), werde ich PhantomJS wahrscheinlich in zukünftige Projekte integrieren.

Pfünder, wenn dies möglich ist, indem die gesamten Körperelemente in eine Leinwand gesetzt werden, dann mit canvas2image?

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

Ein möglicher Weg, dies zu tun, wenn Sie unter Windows laufen und .NET installiert haben, können Sie Folgendes tun:

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 können Sie über PHP:

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

Dann haben Sie den Screenshot auf der Serverseite.

Dies ist möglicherweise nicht die ideale Lösung für Sie, aber dennoch erwähnenswert.

Snapsie ist ein Open Source- ActiveX- Objekt, mit dem Internet Explorer-Screenshots erfasst und gespeichert werden können. Sobald die DLL-Datei auf dem Client registriert ist, sollten Sie in der Lage sein, den Screenshot aufzunehmen 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.

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

Das SnapEngage verwendet ein Java-Applet (1.5+), um einen Browser-Screenshot zu erstellen. AFAIK java.awt.Robotsollte die Arbeit erledigen - der Benutzer muss nur dem Applet erlauben, dies zu tun (einmal).

Und ich habe gerade einen Beitrag darüber gefunden:

• Stack Overflow-Frage JavaScript-Code zum Erstellen eines Screenshots einer Website ohne Verwendung von ActiveX
• Blog - Post Wie SnapABug funktioniert - und was sie tun sollten ,

Sie können dies mit HTA und VBScript erreichen . Rufen Sie einfach ein externes Tool an, um den Screenshot zu erstellen. Ich habe vergessen, wie der Name lautet, aber unter Windows Vista gibt es ein Tool zum Erstellen von Screenshots. Sie brauchen nicht einmal eine zusätzliche Installation dafür.

Wie automatisch - es hängt ganz von dem Werkzeug ab, das Sie verwenden. Wenn es eine API hat, können Sie den Screenshot- und Speicherprozess sicher über einige Visual Basic-Aufrufe auslösen, ohne dass der Benutzer weiß, dass Sie das getan haben, was Sie getan haben.

Da Sie HTA erwähnt haben, gehe ich davon aus, dass Sie unter Windows arbeiten und (wahrscheinlich) Ihre Umgebung (z. B. Betriebssystem und Version) sehr gut kennen.

Ich fand, dass Dom-to-Image einen guten Job gemacht hat (viel besser als html2canvas). Siehe folgende Frage und Antwort: https://stackoverflow.com/a/32776834/207981

In dieser Frage wird gefragt, ob dies an den Server zurückgesendet werden soll. Dies sollte möglich sein. Wenn Sie jedoch die Bilder herunterladen möchten, sollten Sie sie mit FileSaver.js kombinieren und eine Zip- Datei mit herunterladen Mehrere Bilddateien, die alle clientseitig generiert wurden, werfen einen Blick auf jszip .

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

Sie verfügen über eine flexible und benutzerfreundliche Screenshot-API, die von jeder Art von JS-Anwendung verwendet werden kann.

Wenn Sie es versuchen möchten, sollten Sie zuerst den Autorisierungs- App-Schlüssel + Geheimnis und das kostenlose SDK erhalten

In Ihrer App lauten die Implementierungsschritte dann:

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

Der Screenshot kann mit verschiedenen Parametern angepasst werden . Beispielsweise:

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

Das ist alles. Warten Sie dann einfach eine kurze Zeit und das Bild wird automatisch am unteren Rand der Seite angezeigt, ohne dass Sie die Seite neu laden müssen.

Der Screenshot-Mechanismus bietet weitere Funktionen, die Sie hier untersuchen können .

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

Wenn Sie bereit sind, dies auf der Serverseite zu tun, gibt es Optionen wie PhantomJS , die jetzt veraltet sind. Der beste Weg wäre Headless Chrome mit so etwas wie Puppenspieler auf Node.JS. Das Erfassen einer Webseite mit Puppeteer ist wie folgt:

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

Es erfordert jedoch Headless Chrome, um auf Ihren Servern ausgeführt werden zu können. Dies weist einige Abhängigkeiten auf und ist möglicherweise nicht für eingeschränkte Umgebungen geeignet. (Wenn Sie Node.JS nicht verwenden, müssen Sie möglicherweise die Installation / den Start von Browsern selbst durchführen.)

Wenn Sie bereit sind, einen SaaS-Dienst zu nutzen, gibt es viele Optionen, z

• Umpacken
• UrlBox
• Screenshot-Ebene

Diese Frage ist alt, aber vielleicht gibt es noch jemanden, der an einer Antwort auf dem neuesten Stand der Technik interessiert ist:

Sie können verwenden getDisplayMedia:

https://github.com/ondras/browsershot

Ab heute April 2020 GitHub Bibliothek html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K Sterne | Azure Pipeles: Erfolgreich | Downloads 1.3M / Monat |

Zitat: " JavaScript HTML Renderer Mit dem Skript können Sie " Screenshots "von Webseiten oder Teilen davon direkt im Browser des Benutzers erstellen . Der Screenshot basiert auf dem DOM und ist daher möglicherweise nicht 100% genau für die tatsächliche Darstellung erstellt keinen tatsächlichen Screenshot, sondern erstellt den Screenshot basierend auf den auf der Seite verfügbaren Informationen.

Ich habe eine einfache Funktion erstellt, die rasterizeHTML verwendet, um ein SVG und / oder ein Bild mit Seiteninhalten zu erstellen.

Hör zu :

https://github.com/orisha/tdg-screen-shooter-pure-js