Aus Support-Gründen möchte ich in der Lage sein, einen Screenshot des aktuellen Browserfensters so einfach wie möglich zu erstellen und an den Server zu senden.Screenshot des Browsers über JavaScript (oder etwas anderes) machen
Irgendwelche (verrückte) Ideen?
Das scheint eine ziemlich große Sicherheitslücke in JavaScript zu sein, wenn Sie dies tun könnten. Stellen Sie sich einen böswilligen Benutzer vor, der diesen Code mit einem XSS-Angriff auf Ihrer Site installiert und dann Ihre gesamte tägliche Arbeit scannt. Stellen Sie sich das mit Ihrem Online-Banking vor ...
Es ist jedoch möglich, diese Art von Sache außerhalb von JavaScript zu tun. Ich entwickelte eine Swing-Anwendung, die used screen capture code like this, die eine großartige Arbeit des Sendens einer E-Mail an den Helpdesk mit einem beigefügten Screenshot immer dann, wenn der Benutzer eine RuntimeException aufgetreten ist.
Ich nehme an, Sie könnten mit einem signierten Java-Applet (Schock! Horror! Noooooo!) Experimentieren, das in der Ecke herumhing. Wenn es mit den entsprechenden Sicherheitsprivilegien ausgeführt wird, die bei der Installation gegeben wurden, könnte es zur Ausführung dieser Art von Screenshot-Code gezwungen werden.
Der Einfachheit halber hier ist der Code von der Website I verknüpft:
import java.awt.Dimension;
import java.awt.Rectangle;
import java.awt.Robot;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import java.io.File;
...
public void captureScreen(String fileName) throws Exception {
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
Rectangle screenRectangle = new Rectangle(screenSize);
Robot robot = new Robot();
BufferedImage image = robot.createScreenCapture(screenRectangle);
ImageIO.write(image, "png", new File(fileName));
}
...
Dieser Sicherheitspunkt macht nicht viel Sinn, da Sie nur alle Tastenanschläge und ihre Ziele in JavaScript überwachen können. –
Denken Sie über die Eingabe eines Passworts mit einer Reihe von Dropdown-Menüs nach. Die Überwachung einer Tastatur wird nicht helfen, aber eine Reihe von Screenshots wird. –
Dann könnten Sie Formularänderungen überwachen. Wenn wir nicht über Flash reden, gibt es nicht viel, was nicht von JS überwacht werden könnte. –
Bildschirm drucken? Alte Schule und ein paar Tasten drücken, aber es funktioniert!
Sie könnten versuchen, die gesamte Seite im Canvas-Bereich zu rendern und dieses Bild auf dem Server zu speichern. Viel Spaß :)
Dies kann getan werden, aber nicht direkt von der Webseite. Sie können es aus einer Firefox-Erweiterung (und vermutlich auch eine Erweiterung in verschiedenen anderen Browsern, obwohl ich nicht weiß). Siehe meine Antwort. – MatrixFrog
Warum nicht. http://ajaxian.com/archives/crazy-times-rendering-html-in-canvas –
In JavaScript? Nein. Ich arbeite für eine Sicherheitsfirma (eine Art NetNanny-Zeugs) und die einzige effektive Möglichkeit, Screenshots des Benutzers zu machen, ist eine versteckte Anwendung.
Dies funktioniert möglicherweise nicht für Sie, aber auf IE können Sie das snapsie Plugin verwenden. Es scheint nicht mehr in der Entwicklung zu sein, aber die letzte Version ist auf der verlinkten Seite verfügbar.
Eine Webseite kann dies nicht tun (oder zumindest, wäre ich sehr überrascht, wenn es könnte, in jedem Browser) aber eine Firefox-Erweiterung kann. Siehe https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas - wenn auf dieser Seite "Chrome-Berechtigungen" angegeben sind, bedeutet dies, dass eine Erweiterung dies kann, eine Webseite jedoch nicht.
Ich brauche eine ActiveX-Steuerelemente. Ohne es kann ich mir nicht vorstellen. Sie können den Benutzer zwingen, sie erst nach der Installation auf der Client-Seite zu installieren. activex controls sollten funktionieren und Sie können erfassen.
scheint mir, dass Support-Anforderungen (mindestens) die Antworten für zwei Fragen:
Ein Screenshot - eine visuelle - ist sehr notwendig und beantwortet die erste Frage, aber es kann nicht die zweite beantworten.
Als ersten Versuch würde ich versuchen, die gesamte Seite zur Unterstützung zu senden. Der Support-Techniker könnte diese Seite in seinem Browser anzeigen (beantwortet die erste Frage); und könnte auch den aktuellen Zustand des Kunden HTML (hilft, die zweite Frage zu beantworten) sehen.
Ich würde versuchen, so viel von der Seite zu senden, wie für den Client JS über AJAX oder als die Nutzlast eines Formulars verfügbar ist.Ich würde auch Informationen nicht auf der Seite senden: alles, was den Status der Seite beeinflusst, wie Cookies oder Sitzungs-IDs oder was auch immer.
Der Kunde könnte einen sendungsähnlichen Knopf haben, um den Prozess zu starten.
Ich denke, das würde funktionieren. Mal sehen: Es braucht irgendwo irgendwo auf dem Server ein CGI, das die eingehende Benutzerseite abfängt und zur Verfügung stellt, um sie zu unterstützen, vielleicht indem sie eine Disk-Datei schreibt. Dann kann der Support-Mitarbeiter dieselbe Seite laden (oder automatisch geladen haben). Alle anderen Informationen (Cookies usw.) können in die Seite eingefügt werden, die der Support sieht.
PLUS: der Client JS, der die Übergabeschaltfläche onclick() verarbeitet, könnte auch nützliche JS-Variablenwerte enthalten!
Hey, das kann funktionieren! Ich erhalte psyched :-)
HTH
- pete
Wir sammeln vorübergehend Ajax Staaten, Daten in Formularfelder und Sitzungsinformationen. Dann rendern wir es am Support Desk. Da wir für alle Browser testen und integrieren, gibt es aus Darstellungsgründen kaum Support-Fälle.
Werfen Sie einen Blick auf den roten Knopf an der Unterseite auf holidaycheck
Alternativ ist es html2canvas von Google. Aber es gilt nur für nie Browser und ich habe es noch nie ausprobiert.
Ich habe Leute gesehen, entweder tun dies mit zwei Ansätze:
Setup einen separaten Server für screenshot und eine Reihe von firefox Instanzen dort laufen, sehen Sie sich diese zwei Juwel, wenn Sie es tun in ruby: selenium-webdriver und headless
Verwendung eine gehostete Lösung wie http://url2png.com (Art und Weise einfacher)
Bitte beachten Sie die Antwort geteilt hier für eine relativ erfolgreiche Umsetzung dieses: https://stackoverflow.com/a/6678156/291640
Verwendung: https://github.com/niklasvh/html2canvas
Sie können dies auch mit der Fireshot-Plugin. Ich verwende den folgenden Code (die ich aus dem API-Code extrahierte so dass ich nicht über die API JS umfassen müssen), um einen direkten Aufruf an das Objekt Fireshot zu machen:
var element = document.createElement("FireShotDataElement");
element.setAttribute("Entire", true);
element.setAttribute("Action", 1);
element.setAttribute("Key", "");
element.setAttribute("BASE64Content", "");
element.setAttribute("Data", "C:/Users/jagilber/Downloads/whatev.jpg");
if (typeof(CapturedFrameId) != "undefined")
element.setAttribute("CapturedFrameId", CapturedFrameId);
document.documentElement.appendChild(element);
var evt = document.createEvent("Events");
evt.initEvent("capturePageEvt", true, false);
element.dispatchEvent(evt);
Anmerkung: Ich weiß nicht, ob Diese Funktionalität ist nur für die kostenpflichtige Version verfügbar oder nicht.
Vielleicht http://html2canvas.hertzen.com/ könnte verwendet werden. Dann können Sie die Anzeige erfassen und dann bearbeiten.
es macht eine beeindruckende Arbeit! und funktioniert cross-browser, obwohl es auf IE etwas langsam zu laufen scheint. –
Sie könnten versuchen PhantomJs, ein Headless-Browsing-Toolkit. http://phantomjs.org/
Das folgende Beispiel zeigt Javascript Grund Screenshot Funktionalität:
var page = require('webpage').create();
page.settings.userAgent = 'UltimateBrowser/100';
page.viewportSize = { width: 1200, height: 1200 };
page.clipRect = { top: 0, left: 0, width: 1200, height: 1200 };
page.open('https://google.com/', function() {
page.render('output.png');
phantom.exit();
});
Ich verstehe diesen Beitrag ist 5 Jahre alt, aber im Interesse der zukünftigen Besuche werde ich meine eigene Lösung hinzufügen hier, die ich denke, löst die Frage des ursprünglichen Beitrags ohne Drittanbieterbibliotheken außer jQuery. wenn es in einem modalen Fenster
pageClone = $('html').clone();
// Make sure that CSS and images load correctly when opening this clone
pageClone.find('head').append("<base href='" + location.href + "' />");
// OPTIONAL: Remove potentially interfering scripts so the page is totally static
pageClone.find('script').remove();
htmlString = pageClone.html();
Sie könnten andere Teile des DOM entfernen Sie denken, sind nicht erforderlich, wie die Support-Formular ist. Oder Sie können wählen, Skripte nicht zu entfernen, wenn Sie eine Interaktion mit dynamischen Steuerelementen bevorzugen.
Senden Sie diese Zeichenfolge an den Server, entweder in einem ausgeblendeten Feld oder von AJAX, und dann auf der Serverseite fügen Sie die ganze Menge als HTML-Datei an die Support-E-Mail an.
Die Vorteile davon sind, dass Sie nicht nur einen Screenshot, sondern die gesamte scrollbare Seite in ihrer aktuellen Form erhalten, und Sie können sogar das DOM inspizieren und debuggen.
Ich hoffe, dass dies für komplexe Javascript-Basis-SPAs (Single-Page-Anwendungen) funktioniert! – Kieveli
Die Skript-Tags werden entfernt, sodass Sie nur noch statisches HTML von dem haben, was Sie gerade sehen, aber Sie könnten nicht mit ihm interagieren. Wahrscheinlich möchten Sie die Skript-Tags nicht in einem SPA behalten, da sie die Seite wahrscheinlich zurücksetzen oder neu rendern würden. –
Sie könnten möglicherweise das Ansichtsfenster erfassen, in dem sich die Seite befindet, aber ich bezweifle wirklich, dass Sie das ganze Fenster erfassen könnten. Das wäre ein Sicherheitsrisiko, nicht wahr? – Keyo
Im Jahr 2013 gibt es Lösungen dafür. [Usersnap] (http://www.usersnap.com) kann so einfach wie Google Analytics installiert werden und Sie erhalten genaue Screenshots von Ihren Besuchern (sie müssen nicht installieren alles, kein Java, kein Flash, kein ActiveX, überhaupt keine. – Gregor
Mögliches Duplikat von [Mit HTML5/Canvas/JavaScript Screenshots erstellen] (http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) –