Frage 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 einem doppelte Frage. 

Wie machen sie das? Die JavaScript-Feedback-API von Google wird geladen Hier und ihre Übersicht über das Feedback-Modul wird die Fähigkeit des Screenshots demonstrieren.


794
2018-02-06 06:58


Ursprung


Antworten:


JavaScript kann das DOM lesen und eine ziemlich genaue Darstellung davon wiedergeben canvas. Ich habe an einem Skript gearbeitet, das HTML in ein Leinwandbild 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/

bearbeiten Das html2canvas-Skript ist jetzt separat verfügbar Hier und einige Beispiele hier.

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


1013
2017-07-13 11:29



Ihre Web-App kann jetzt einen "nativen" Screenshot des gesamten Desktops des Clients verwenden 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.


54
2017-10-29 09:33



Wie Niklas Erwähnung Sie können verwenden html2canvas Bibliothek, 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>
<html>
<head>
    <meta charset="utf-8" />
    <title>Screen shoter</title>        
    <style>.container { margin-top: 10px; border: solid 1px black; }  </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>

    <div>Screenshot tester</div>
    <button onclick="report()">Take screenshot</button>

    <div class="container">
        <img width="75%" class="screen" >
    </div>

    <script>
        function report() {
            let region = document.querySelector("body"); // whole screen
            html2canvas(region, {
                onrendered: function (canvas) {
                let pngUrl = canvas.toDataURL();
                let img = document.querySelector(".screen");
                img.src = pngUrl;  // pngUrl contains screenshot graphics data in url form

                // here you can allow user to set bug-region
                // and send it with 'pngUrl' to server


                },
            });
        }
    </script>
</body>
</html>

Hier ist Arbeitsbeispiel.

Im report() Funktion in onrendered Nachdem Sie das Bild als Daten-URI erhalten haben, können Sie es dem Benutzer zeigen und ihm erlauben, mit der Maus "Fehlerregion" zu zeichnen und dann Screenshot- und Regionskoordinaten an den Server zu senden.


1
2017-07-01 19:25