javascript - team - w3c html5 3




Capture Screenshot des Browser-Inhalts(Website) (5)

Viele Kombinationen von Browser, Version und Betriebssystem

Um Screenshots von Webseiten mit einem bestimmten Browser und einer bestimmten Version zu erstellen, ist ein Framework erforderlich, das in all diesen Browsern starten, ausführen und erfassen kann. Weiterhin wurde nicht spezifiziert, ob es auch für bestimmte Plattformen in Kombination mit diesen Browsern und Versionen erforderlich ist OSX, Windows, Linux, Android etc. verschiedene Versionen dieser Plattformen werden die möglichen Kombinationen weiter erhöhen.

  • Sie müssten diese Browser einrichten, pflegen
  • Finde oder erstelle einen Rahmen, um sie zu fahren, Selenium wahrscheinlich deine beste Wahl
  • Überwinden Sie den Mangel an Unterstützung in Selenium für bestimmte Browser / Betriebssystem-Kombinationen
  • Eine Infrastruktur, die dies verwaltet und wie in einer netten API zur Verfügung stellt

Es gibt jedoch eine existierende Lösung oder eine verwandte Lösung dafür, zum Beispiel:

Wie für Screenshots Screenshots in bestimmten Browsern, Versionen, Plattformen usw.

this ist kostenlos und hat eine große Reihe von Browser-Kombinationen, nicht sehr klar, wenn Sie es jedoch programmgesteuert zugreifen können.

Um dies zu erreichen, rufen Sie einfach die vorhandene API auf

crossbrowsertesting.com ist ein kommerzieller Dienst (kostenlose Testversion), der alle Anforderungen zu erfüllen scheint.

Hat die Technologie, die das kann

http://usersnap.com unterstützt eine Vielzahl von Browsern, sowohl Desktop- als auch Mobilgeräte, und hat eine Menge Arbeit geleistet, um Pixel-perfekte Screenshots auf Servern zu erhalten, die mit denen identisch sind, die der Benutzer in seiner Umgebung sehen würde.

Ingenieure setzen auf Lösung als Voraussetzung ...

Wie es für uns Engineering-Typen typisch ist, bleiben wir stecken, wenn es darum geht, eine spezifische Lösung zu implementieren. Die Frage, welches Problem mit diesen Screenshots gelöst wird, ist nicht klar, dh die zugrunde liegende Anforderung. Wenn das bekannt wäre, gibt es vielleicht noch andere einfachere Ansätze?

Mein Ziel ist es, ein Image einer Website zu haben (Ja, so einfach ist das). Ich weiß, dass es Werkzeuge wie html2canvas . Ich möchte jedoch nicht, dass der Client-Browser den Screenshot rendert.

Ein Grund ist, dass ich eine Chrome-Erweiterung mit einem webview der sich im Wesentlichen wie ein iFrame verhält. Aus Sicherheitsgründen iFrame das Rendern eines Screenshots für eine Website, die einen iFrame enthält, nicht.

Ich weiß auch, dass sie daran arbeiten, native Screenshots von Websites zu unterstützen, aber ich möchte eine Cross-Browser-Lösung und bin nicht von der Möglichkeit des Browsers abhängig. All dies geschieht auf einem Server, so dass es über die Befehlszeile ausführbar sein sollte.

Was ich jetzt mache ist:

  1. Öffnen Sie den Browser über die Befehlszeile
  2. Wechseln Sie den Fokus über die Befehlszeile zum Browserfenster
  3. Machen Sie einen Screenshot (screencapture auf Mac, scrot unter Linux) über die Kommandozeile

Dies zu tun, hat den Nachteil, dass das Bild Statusleisten, Browser-Plugins usw. enthält. Eigentlich möchte ich nur den eigentlichen Inhalt der Website haben, ohne all diese anwendungsspezifischen Dinge.

  • Die schlechteste Lösung wäre, die 0 | 0-Position des Inhalts relativ zum Fenster für jeden Browser fest zu codieren. Das ist beschissen (aus offensichtlichen Gründen).
  • Eine andere Lösung, die ich mir ausgedacht habe, ist: Sag dem Browser (ich kann über Socket mit einem Plugin sprechen), etwas wie einen QR-Code bei x: 0; y: 0; hinzuzufügen, schicke den Screenshot an den Bildverarbeitungsserver. Danach entfernen Sie den QR-Code und senden Sie den Screenshot erneut. Dann weiß ich jeden Punkt relativ zu 0 | 0, aber es ist auch nicht so elegant.

Das Beste wäre ein Befehlszeilen-Tool, mit dem ich feststellen kann, welchen Teil einer Anwendung ich erfassen möchte.

Ein Beispiel ist dieses Plugin für Firefox oder dieses serverseitige Tool oder all diese Tools, die Screenshots von Websites mit anderen Browsern und Betriebssystemen wie this bereitstellen. Ich frage mich, wie sie Browser-spezifische GUI-Elemente loswerden.

Zusatz :

Ich weiß nicht, ob ich das klar genug gemacht habe, aber ich möchte einen Screenshot eines Inhalts eines bestimmten Browsers, aber ohne die browserspezifischen GUI-Elemente. Das bedeutet, dass eine Anwendung, die einen kopflosen Browser ausführt, für mich keinen Nutzen hat. Weil der kopflose Browser eine eigene Engine hat. Ich möchte speziell einen Screenshot von zB Firefox Version x haben.


Die meisten serverseitigen Sprachen dienen nur dem HTML und geben es nie wieder. phantomJS Zeit stieß ich auf das Problem der Indexierung von JavaScript-Anwendungen auf einer Seite und eine der Lösungen war phantomJS .

PhantomJS macht genau das, was Sie wollen. Sie können den HTML-Code (serve-side) rendern und Phantom hat auch eine Leinwand eingebaut, so dass Sie mit diesem Screenshot arbeiten können. Phantom ist ein Webkit, das die meisten gängigen Browser (Chrome, Safari, Opera) abdeckt. Wenn Sie sehen möchten, wie die Website in Firefox SlimerJS können Sie SlimerJS ausprobieren (ähnlich wie PhantomJs, aber mit der Gecko-Engine).

Dies würde alle gängigen Browser (außer IE) abdecken. Dies ist immer noch eine kopflose Lösung, aber Sie könnten verschiedene Layout-Engines sehen. Sie werden NodeJS brauchen, und es kann ein wenig lernen, aber beide haben Dokumentation auf Screenshots. Viel Glück!


Es gibt verschiedene Open-Source-Tools und bezahlt, um das gleiche zu tun. Aber unter Berücksichtigung von Sicherheitsgründen. Ich schlage vor, dass Sie die Google - Erweiterung "In Google Drive speichern" verwenden .

Dies bietet Ihnen eine sicherere Möglichkeit, Screenshots direkt auf Ihrem Google-Laufwerk zu speichern und zusammen mit Screenshots ermöglicht es Benutzern auch, Bilder oder andere Dokumente auf dem Google-Laufwerk zu speichern.

// Zweiter Vorschlag //

Wenn Sie die obige Erweiterung nicht verwenden möchten, können Sie 'Blipshot' verwenden, ein Open-Source-Tool, das auch auf GitHub verfügbar ist.

// Dritter Vorschlag //

Die drittbeste Lösung ist Full Page Screen Capture .

Diese drei Tools sind nur einige der besten Screenshot-Tools für Google Chrome sowie andere Browser.

Ich hoffe es hilft dir!



Awesomescreenshot tatsächlich die Seite herunter, indem er tatsächliche Screenshots macht, und fügt diese Bilder dann für Sie in ein langes Bild zusammen. Sie können sogar festlegen, dass nur der angezeigte Teil der Seite oder ein ausgewählter Bereich erfasst wird.

Sie können dies mit einem Makro-Programm / Skriptsprache wie Auto Hot Keys mischen. Sie finden es vielleicht einfacher als die Befehlszeile. Ich nehme an, es hängt davon ab, was Sie versuchen zu tun.





webpage-screenshot