Ich möchte einen Button zu einer unserer Webseiten hinzufügen, der es dem Benutzer ermöglicht, einen Bug mit unserem Bug-Tracking-System zu melden.Wie macht man einen Screenshot einer Webseite?
Eine der Feature-Anforderungen ist, dass ein Bildschirm Cap der betreffenden Seite gesendet werden soll.
Ohne etwas auf dem Endbenutzer zu installieren, wie kann ich das tun? Hat Javascript eine Art Bildschirm Cap API?
Sie können die innerHTML der Seite packen und sie dann auf dem Server bearbeiten:
document.getElementsByTagName('html')[0].innerHTML;
// this would also be interactive (i.e. if you've
// modified the DOM, that would be included)
Es ist nicht gerade ein Screenshot, aber in gewisser Hinsicht ist es besser. Sie sehen nicht nur, wie die Seite aussieht, sondern Sie sehen den Zustand der Seite zu dem Zeitpunkt, zu dem der Benutzer sie angezeigt hat. –
Beachten Sie jedoch, dass Sie das Problem erst dann sehen können, wenn der Browser eines bestimmten Benutzers (oder, schlimmer noch, die Browserkonfiguration) die Ursache ist, bis Sie die Umgebung des Benutzers wiederherstellen können. – AaronSieb
Wenn Sie Änderungen am DOM in JavaScript vorgenommen haben, werden sie möglicherweise nicht wie erwartet angezeigt. –
Nein, Javascript hat so etwas nicht.
Ich habe Angst, dass dies ziemlich schwierig sein wird. Ich kann nichts denken, was dies tun würde, ohne auf dem Computer des Benutzers zu installieren.
Ich würde gerne falsch bewiesen werden, aber zumindest das ist eine Antwort für Sie.
Leider muss ich zustimmen. Sie können das Image nicht ohne Installation von _irgendetwas_ auf dem Computer des Benutzers abrufen. Was Sie tun können, ist die genaue _html_ senden oder der Benutzer wird angezeigt, aber selbst das ist veraltet, wenn Sie eine Menge DOM-Manipulation gemacht haben. –
Ganz zu schweigen davon, dass Sie alle externen CSS und JS speichern müssen, um die Seite neu zu erstellen. Dann müssen Sie sicherstellen, dass sie in den gleichen relativen Pfad (en) gespeichert sind, es sei denn, Sie möchten das HTML manipulieren. – cbmeeks
Siehe this question. Grundsätzlich nicht, nicht mit Javascript. Vielleicht mit ActiveX, aber das ist zurück, Dinge auf dem Client-PC zu installieren.
Überlegen Sie, ein serverseitiges Skript zu schreiben, das die Anforderung des Benutzers exakt wiederholt (vorausgesetzt, es liegt nicht hinter einem POST) und die resultierende HTML-Datei zu speichern.
Sie bei Super Screenshot! oder WebShotsPro.com bot eine Web-basierte Lösung wie die in mit aussehen könnte. Je nach Ihren Anforderungen, wie Screenshots von bestimmten Seitenbereichen oder Seiten, die von der Außenwelt nicht zugänglich sind, funktioniert es möglicherweise nicht für Sie, aber es ist eine Idee.
Dies ist eine interne App, daher wird es nicht funktionieren. Gute Links. – NotMe
Ich stimme den anderen Antworten zu - kein Würfel.
Allerdings gibt es ein Firefox-Plugin, das Pearl Crescent Page Saver, das sich lohnt, für verwandte Aufgaben zu suchen.
Werfen Sie einen Blick auf pagecrop (implementiert mit jQuery + jCrop Plug-in)
Ich glaube nicht, dass dies einen Screenshot der Seite machen wird. Ich umgebe es einfach in einen Iframe und reduziere dann die Ansicht auf bestimmte Parameter. Es werden keine Eingabedaten gespeichert, Sie erhalten keine nützlichen Debug-Informationen. – Martin
ich eine Art Integration würde vorschlagen, mit FireShot, die eine kostenlose Firefox/IE Add-on ist.
Ich muss etwas fehlen, aber man kann nicht einfach ...
Press PrtScr auf Tastatur und in E-Mail einfügen.
Tatsächlich kopiert Alt + PrtScn nur das aktive Fenster in die Zwischenablage und verhindert das Kopieren umgebender Fenster mit vertraulichen Informationen. –
Dies funktioniert möglicherweise auf einem Windows-Rechner, was ist mit einem Mac/LINUX/etc? – LarryH
Sie könnten dies tun, aber es erlaubt mir nicht, alle anderen Dinge, die ich will, von der Seite zu erfassen. – NotMe
Holen Sie so viele Informationen wie möglich über die Benutzerumgebung mit jQuery. (jQuery.support)/user agent/cookies/form Eingabewerte, die URL (um Parameter abzurufen und zu wissen, auf welcher Seite ein Fehler aufgetreten ist)
Senden Sie die Quelle der Seite wie von Moff erwähnt. Versuchen Sie, das DOM so zu serialisieren, wie es jetzt ist, damit Sie vergleichen können, was sich von der ursprünglichen Seite unterscheidet.
Es ist auch nützlich, die Quelle der Seite zu senden, wenn Sie sie für historische Zwecke behalten müssen, da wenn Sie die Seite aktualisieren, wird es anders werden.
Nicht sicher, warum es downvoted wurde. Dies ist ein guter Vorschlag. – NotMe
Sie können auch einen Blick darauf werfen, wie Evernote hat seine Screen Capturing und vielleicht können Sie zu, dass binden oder eigene Chrome-Erweiterung erstellen. https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc?hl=en
Überprüfen Sie die Antworten hier, um zu sehen, ob irgendwelche Arbeit für Sie: http://StackOverflow.com/Questions/60455/Take-Ascreenshot-of-a-Webpage-with-Javascript – gpojd
Ähnliche Frage mit mehr up- bis heute Antworten: http://stackoverflow.com/questions/4340056/can-you-take-a-screenshot-of-the-page-using-canvas – nullability