Nehmen Sie einen Screenshot von einer Webseite mit JavaScript?

StackOverflow https://stackoverflow.com/questions/60455

  •  09-06-2019
  •  | 
  •  

Frage

Ist es möglich, einen Screenshot von einer Webseite mit JavaScript zu nehmen und dann diese zurück an den Server übermitteln?

ich mit Browser-Sicherheitsfragen nicht so besorgt bin. etc., wie die Umsetzung für HTA wäre. Aber ist es möglich?

War es hilfreich?

Lösung

Ich habe dies für eine HTA erfolgt durch ein ActiveX-Steuerelement verwenden. Es war ziemlich einfach, die Kontrolle in VB6 zu bauen den Screenshot zu nehmen. Ich hatte den keybd_event API-Aufruf zu verwenden, da Tastaturbefehle nicht tun Print. Hier ist der Code für das: 

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

Dass man nur so weit wie immer das Fenster in die Zwischenablage wird.

Eine weitere Option, wenn das Fenster Sie wollen einen Screenshot ist ein HTA nur wäre, eine XMLHTTPRequest zu verwenden, um den DOM-Knoten an den Server zu senden, dann die Screenshots auf Server-Seite erstellen.

Andere Tipps

Google tut dies in Google+ und ein talentierter Entwickler Reverse Engineering es und erzeugt http://html2canvas.hertzen.com/ . Um im Internet Explorer zu arbeiten, werden Sie eine Leinwand Support-Bibliothek benötigen wie http://excanvas.sourceforge.net/

Eine andere mögliche Lösung, die ich entdeckt habe, ist http://www.phantomjs.org/ die es ermöglicht man sehr leicht Screenshots der Seiten zu nehmen und eine ganze Menge mehr. Während meiner ursprünglichen Anforderungen für diese Frage nicht gültig sind mehr (verschiedene Job), werde ich wahrscheinlich PhantomJS in zukünftige Projekte integriert werden.

Pounder ist, wenn dies möglich ist, indem die ganzen Körperelemente in eine canvase tun dann canvas2image mit?

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

Eine Möglichkeit, dies zu tun, wenn auf Windows ausgeführt werden und .NET installieren 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 in der Server-Seite.

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

Snapsie ist ein Open Source,

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

Die SnapEngage verwendet ein Java-Applet (1.5+) einen Browser-Screenshot zu machen. AFAIK sollte java.awt.Robot den Job erledigen -. Der Benutzer nur das Applet zu erlauben, es zu tun (einmal)

Und ich habe gerade einen Beitrag über sie:

können Sie erreichen, dass die Verwendung von HTA und VBScript . Rufen Sie einfach ein externes Tool, um die screenshot zu tun. Ich habe vergessen, was der Name ist, aber unter Windows Vista gibt es ein Tool Screenshots zu tun. Sie brauchen noch nicht einmal ein extra für sie installieren.

Wie für die automatische - es hängt ganz von dem Werkzeug, das Sie verwenden. Wenn es eine API hat, ich bin sicher, dass Sie den Screenshot und Speichervorgang durch ein paar Visual Basic Anrufe ohne dass der Benutzer auslösen können zu wissen, dass du getan hast, was du getan hast.

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

Eine große Lösung für Screenshot in Javascript nehmen 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 wollen, es versuchen, zunächst sollten Sie die Genehmigung App-Taste + Geheimnis bekommen und die kostenlos SDK

Dann in Ihrer Anwendung würden die Umsetzungsschritte werden: 

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

Bildschirm kann mit verschiedenen Parameter . Zum Beispiel: 

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

Das ist alles. Dann einfach eine kurze Weile warten, und das Bild wird automatisch am unteren Rand der Seite angezeigt werden, ohne dass Sie die Seite neu zu laden zu müssen.

Es gibt auch andere Funktionalitäten Screenshot Mechanismus, die Sie erkunden können hier .

Es ist auch möglich, den Screenshot lokal zu speichern. Dafür müssen Sie GrabzIt Serverseite API verwenden. Für weitere Informationen überprüfen Sie die detaillierte Anleitung hier .

Ich fand, dass dom-to-Bild hat einen guten Job (viel besser als html2canvas). Siehe die folgende Frage & Antwort: https://stackoverflow.com/a/32776834/207981

Diese Frage stellt sich im zurück an den Server, die möglich sein sollte, aber wenn Sie schauen, um das Bild herunterzuladen (e) Sie es kombinieren wollen mit FileSaver.js , und wenn Sie einen Reißverschluss mit mehreren Bild herunterladen möchten alle Dateien erzeugt Client-Seite einen Blick auf jszip .

Wenn Sie bereit sind, es auf der Server-Seite zu tun, gibt es Optionen wie PhantomJS , die ist veraltet. Der beste Weg wäre zu gehen Headless Chrome mit so etwas wie Puppeteer auf Node.JS. Erfassen einer Webseite Puppeteer verwenden wäre so einfach, 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();
})();

Allerdings erfordert es ohne Kopf Chrom der Lage sein, auf dem Server ausgeführt werden, das einige Abhängigkeiten hat und möglicherweise nicht auf eingeschränkte Umgebungen geeignet sein. (Auch wenn Sie nicht Node.JS verwenden, müssen Sie möglicherweise selbst Installation / Start von Browsern zu handhaben.)

Wenn Sie bereit sind, einen SaaS-Service zu nutzen, gibt es viele Optionen wie

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top