Mit "Fehler melden" oder "Feedback-Tool" von Google können Sie einen Bereich Ihres Browserfensters auswählen, um einen Screenshot zu erstellen, der mit Ihrem Feedback zu einem Fehler übermittelt wird.
Screenshot von Jason Small, in einer doppelten Frage veröffentlicht .
Wie machen sie das? Googles JavaScript - Feedback - API geladen wird von hier und ihre Übersicht über den Feedback - Modul wird die Screenshot Fähigkeit demonstrieren.
javascript
html
canvas
screenshot
Joelvh
quelle
quelle
Antworten:
JavaScript kann das DOM lesen und eine ziemlich genaue Darstellung davon mit rendern
canvas
. Ich habe an einem Skript gearbeitet, das HTML in ein Canvas-Bild konvertiert. Ich habe heute beschlossen, eine Implementierung davon durchzuführen, um Feedbacks zu senden, wie Sie es beschrieben haben.Mit dem Skript können Sie Feedback-Formulare erstellen, die einen Screenshot enthalten, der im Browser des Kunden zusammen mit dem Formular erstellt wurde. Der Screenshot basiert auf dem DOM und ist daher möglicherweise nicht 100% genau für die tatsächliche Darstellung, da kein tatsächlicher Screenshot erstellt wird, sondern der Screenshot auf der Grundlage der auf der Seite verfügbaren Informationen erstellt wird.
Es ist kein Rendern vom Server erforderlich , da das gesamte Bild im Browser des Clients erstellt wird. Das HTML2Canvas-Skript selbst befindet sich noch in einem sehr experimentellen Zustand, da es nicht annähernd so viele CSS3-Attribute analysiert, wie ich es gerne hätte, und es auch keine Unterstützung zum Laden von CORS-Images bietet, selbst wenn ein Proxy verfügbar war.
Immer noch recht eingeschränkte Browserkompatibilität (nicht, weil mehr nicht unterstützt werden konnten, ich hatte nur keine Zeit, es browserübergreifender zu unterstützen).
Weitere Informationen finden Sie in den Beispielen hier:
http://hertzen.com/experiments/jsfeedback/
edit Das Skript html2canvas ist jetzt hier separat und einige Beispiele hier verfügbar .
edit 2 Eine weitere Bestätigung, dass Google eine sehr ähnliche Methode verwendet (tatsächlich ist der einzige wesentliche Unterschied, basierend auf der Dokumentation, die asynchrone Methode zum Durchlaufen / Zeichnen), findet sich in dieser Präsentation von Elliott Sprehn vom Google Feedback-Team: http: //www.elliottsprehn.com/preso/fluentconf/
quelle
Ihre Web-App kann jetzt einen "nativen" Screenshot des gesamten Desktops des Clients erstellen, indem Sie Folgendes verwenden
getUserMedia()
:Schauen Sie sich dieses Beispiel an:
https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/
Der Client muss (vorerst) Chrome verwenden und die Unterstützung für die Bildschirmaufnahme unter chrome: // flags aktivieren.
quelle
Navigator.getUserMedia()
ist veraltet, aber direkt darunter steht "... Bitte verwenden Sie den neueren navigator.mediaDevices.getUserMedia () ", dh es wurde gerade durch eine neuere API ersetzt.Wie Niklas bereits erwähnt hat, können Sie mit der html2canvas- Bibliothek einen Screenshot mit JS im Browser erstellen . Ich werde seine Antwort an dieser Stelle durch ein Beispiel für die Erstellung eines Screenshots mit dieser Bibliothek erweitern:
Code-Snippet anzeigen
In
report()
Funktion inonrendered
nach wie Daten URI bekommen Bild , das Sie es dem Benutzer zeigen kann , und ihm erlauben , „Bug - Region“ mit der Maus zu ziehen und dann einen Screenshot und Region Koordinaten an den Server senden.In diesem Beispiel wurde
async/await
Version gemacht: mit schönermakeScreenshot()
Funktion .AKTUALISIEREN
Ein einfaches Beispiel, mit dem Sie einen Screenshot machen, eine Region auswählen, einen Fehler beschreiben und eine POST-Anfrage senden können ( hier jsfiddle ) (die Hauptfunktion ist
report()
).Code-Snippet anzeigen
quelle
Screenshot als Canvas oder Jpeg Blob / ArrayBuffer mit getDisplayMedia API abrufen :
DEMO:
quelle
Hier ist ein Beispiel mit: getDisplayMedia
Ebenfalls einen Besuch wert sind die Screen Capture API- Dokumente.
quelle