it-swarm.com.de

Wie kann ich einen Screenshot einer Website in JavaScript auf der Client-Seite machen / wie hat Google das gemacht? (kein Zugriff auf die Festplatte erforderlich)

Ich arbeite an einer Webanwendung, die eine Seite rendern und einen Screenshot auf der Client-Seite (Browser) erstellen muss.

Ich brauche den Screenshot nicht, um ihn auf der lokalen Festplatte zu speichern. Behalte ihn einfach in RAM und sende ihn später an den Anwendungsserver.

Ich habe recherchiert:

  1. BrowserShots wie Dienste ...
  2. Mechanisierte Browser ...
  3. wkhtmltoimage ...
  4. Python WebKit2PNG ...

Aber keines davon gibt mir alles, was ich brauche, nämlich:

  1. Verarbeitung auf der Browserseite (Screenshot der Seite erstellen). Muss nicht auf der Festplatte gespeichert werden! Gerade...
  2. ... Bild zur weiteren Verarbeitung an den Server senden.
  3. Ganze Seite erfassen (nicht nur sichtbarer Teil)

Irgendwann stieß ich auf das Feedback-Tool von Google (klicken Sie in der YouTube-Fußzeile auf "Feedback", um dies zu sehen). Es enthält JavaScript für JPG-Codierung und zwei weitere große Skripte, die ich nicht genau bestimmen kann, was sie tun ...

Aber es wird auf der Client-Seite verarbeitet - sonst hätte es keinen Sinn, diesen riesigen JPEG-Encoder in den Code einzufügen!

Hat jemand eine Idee, wie sie es geschafft haben/wie ich es schaffen kann?

Hier ist ein Beispiel für das Feedback (Fehler auf einigen Bildschirmen melden)

Feedback/report bug example

206

" Verwenden von HTML5/Canvas/JavaScript zum Erstellen von Screenshots " beantwortet Ihr Problem.

Sie können JavaScript/Canvas verwenden, um die Arbeit zu erledigen, aber es ist noch experimentell.

71
Vaibhav Garg

Ich musste einen Schnappschuss auf der Seite machen (für eine von mir geschriebene Web-App), die durch JWTs geschützt ist und Angular sehr intensiv nutzt.

Ich hatte mit keiner der oben genannten Methoden Glück.

Am Ende habe ich das OuterHTML des benötigten Divs genommen, es ein wenig aufgeräumt (*) und dann an den Server gesendet, auf dem ich wkhtmltopdf ausgeführt habe.

Das funktioniert sehr gut für mich.

(*) Verschiedene Eingabegeräte auf meinen Seiten wurden nicht wie angekreuzt gerendert oder haben ihre Textwerte, wenn sie im PDF angezeigt werden. Deshalb starte ich ein bisschen jQuery auf dem HTML-Code, bevor ich ihn zum Rendern sende. Beispiel: Für Texteingabeelemente kopiere ich die .val () in die 'value'-Attribute, die dann von wkhtmlpdf angezeigt werden

14
Al Joslin

SnapEngage bietet diesen Service mit einem Java-Applet an. Sie können ihr Produkt Snapabug verwenden oder ihre Funktionalität unter Verwendung der Informationen hier neu erstellen. Sie können auch darüber lesen hier .

4
oxyacanthous