Verwenden von HTML5 / Canvas / JavaScript zum Aufnehmen von Browser-Screenshots

Mit Google “Fehler melden” oder “Feedback-Tool” können Sie einen Bereich Ihres Browserfensters auswählen, um einen Screenshot zu erstellen, der mit Ihrem Feedback zu einem Fehler gesendet wird.

Google Feedback Tool Screenshot Screenshot von Jason Small, geposted in einer doppelten Frage .

Wie machen sie das? Die JavaScript-Feedback-API von Google wird von hier geladen und ihre Übersicht über das Feedback-Modul zeigt die Möglichkeit, Screenshots zu erstellen.

   

JavaScript kann das DOM lesen und eine ziemlich genaue Darstellung des DOM mit canvas . Ich habe an einem Skript gearbeitet, das HTML in ein canvasbild konvertiert. Ich habe mich heute entschieden, eine Implementierung davon zu machen, Feedback zu senden, wie du es beschrieben hast.

Mit dem Skript können Sie Feedback-Formulare erstellen, die einen Screenshot enthalten, der zusammen mit dem Formular auf dem Client-Browser erstellt wird. Der Screenshot basiert auf dem DOM und ist daher möglicherweise nicht 100% ig auf die tatsächliche Darstellung zugeschnitten, da er keinen tatsächlichen Screenshot erstellt, sondern den Screenshot basierend auf den auf der Seite verfügbaren Informationen erstellt.

Es erfordert kein Rendering vom Server , da das gesamte Bild im Client-Browser erstellt wird. Das HTML2Canvas-Skript selbst befindet sich immer noch in einem sehr experimentellen Zustand, da es nicht so viele CSS3-Attribute analysiert, wie ich es möchte, und es hat auch keine Unterstützung, um CORS-Bilder zu laden, selbst wenn ein Proxy verfügbar ist.

Immer noch recht eingeschränkte Browserkompatibilität (nicht weil mehr nicht unterstützt werden konnte, hatte einfach noch keine Zeit, es browserübergreifend mehr zu unterstützen).

Weitere Informationen finden Sie hier:

http://hertzen.com/experiments/jsfeedback/

edit Das html2canvas Skript ist jetzt hier und einige Beispiele hier separat verfügbar.

Bearbeiten 2 Eine weitere Bestätigung, dass Google eine sehr ähnliche Methode verwendet (in der Tat basiert auf der Dokumentation der einzige wesentliche Unterschied ist ihre asynchrone Methode des Traversierens / Zeichnens) kann in dieser Präsentation von Elliott Sprehn aus dem Google Feedback-Team gefunden werden: http: / /www.elliottsprehn.com/preso/fluentconf/

Ihre Web-App kann jetzt mit getUserMedia() einen “nativen” Screenshot des gesamten Desktops des Clients getUserMedia() :

Schau dir dieses Beispiel an:

https://www.webrc-experiment.com/Pluginfree-Screen-Sharing/

Der Client muss (vorerst) chrome verwenden und muss die Bildschirmaufnahmeunterstützung unter chrome: // flags aktivieren.

Wie Niklas erwähnt , können Sie die html2canvas- Bibliothek verwenden, um einen Screenshot mit dem js-Browser zu erstellen. Ich werde in diesem Punkt eine Antwort entwickeln und ein Beispiel für das Erstellen eines Screenshots unter Verwendung dieser Bibliothek (in diesem Fragenrahmen) bereitstellen:

 < !DOCTYPE html>    Screen shoter     
Screenshot tester

Hier ist ein funktionierendes Beispiel .

In der function report() in onrendered nachdem man das Bild als data-uri bekommen hat, kann man es dem Benutzer zeigen und ihm ermöglichen, mit der Maus “bug region” zu zeichnen und dann Screenshot- und Regionskoordinaten an den Server zu senden.