Korzystanie z HTML5 / Canvas / JavaScript do robienia zrzutów ekranu w przeglądarce

Google "Zgłoś błąd "lub" narzędzie opinii " pozwala wybrać obszar okna przeglądarki, aby utworzyć zrzut ekranu, który jest przesłany z uwagą na temat błędu.

Zrzut Ekranu Narzędzia Google Feedbackzrzut ekranu autorstwa Jasona Small, opublikowany w zduplikowane pytanie .

Jak oni to robią? Google JavaScript feedback API jest ładowany z tutaj i ich przegląd modułu feedback pokaże możliwości zrzutu ekranu.

Author: joelvh, 2011-02-06
Source

3 answers

JavaScript może odczytać DOM i renderować dość dokładne odwzorowanie tego za pomocą canvas. Pracowałem nad skryptem, który konwertuje HTML na obraz płótna. Zdecydowałem się dziś na wdrożenie go w wysyłanie informacji zwrotnych, jak opisałeś.

Skrypt pozwala na tworzenie formularzy opinii, które zawierają zrzut ekranu, utworzony w przeglądarce klienta, wraz z formularzem. Zrzut ekranu jest oparty na DOM i jako taki może nie być w 100% dokładny do rzeczywistego reprezentacja, ponieważ nie tworzy rzeczywistego zrzutu ekranu, ale tworzy zrzut ekranu w oparciu o informacje dostępne na stronie.

To nie wymaga żadnego renderowania z serwera , ponieważ cały obraz jest tworzony w przeglądarce klienta. Sam skrypt HTML2Canvas jest nadal w bardzo eksperymentalnym stanie, ponieważ nie analizuje prawie tak wielu atrybutów CSS3, których bym chciał, ani nie ma żadnego wsparcia dla ładowania obrazów CORS, nawet jeśli proxy był dostępny.

Nadal dość ograniczona kompatybilność przeglądarki (nie dlatego, że więcej nie może być obsługiwane, po prostu nie miałem czasu, aby uczynić go bardziej cross browser obsługiwane).

Aby uzyskać więcej informacji, spójrz na przykłady tutaj:

Http://hertzen.com/experiments/jsfeedback/

Edytuj Skrypt html2canvas jest teraz dostępny osobno tutaj i kilka przykładów tutaj .

Edycja 2 Kolejne potwierdzenie, że Google używa bardzo podobną metodę (w rzeczywistości, w oparciu o dokumentację, jedyną istotną różnicą jest ich asynchroniczna metoda trawersowania/rysowania) można znaleźć w tej prezentacji Elliotta Sprehna z zespołu Google Feedback: http://www.elliottsprehn.com/preso/fluentconf/

 1023
Author: Niklas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-20 09:16:47

Twoja aplikacja internetowa może teraz wykonać "natywny" zrzut ekranu całego pulpitu klienta za pomocą getUserMedia():

Spójrz na ten przykład:

Https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

Klient będzie musiał używać chrome (na razie) i będzie musiał włączyć obsługę przechwytywania ekranu pod flagami chrome://.

 55
Author: Matt Sinclair,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-17 10:09:58

Jako Niklas mention możesz użyć biblioteki html2canvas aby zrobić zrzut ekranu za pomocą przeglądarki js . Rozwiążę odpowiedź w tym punkcie I podam przykład wykonania zrzutu ekranu przy użyciu tej biblioteki (w tej ramce pytania): 

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


    },
  });
}
.container {
  margin-top: 10px;
  border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div>Screenshot tester</div>
<button onclick="report()">Take screenshot</button>

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

W report() funkcja w onrendered po uzyskaniu obrazu jako data-uri możesz pokazać go użytkownikowi i pozwolić mu narysować" bug region " za pomocą myszy, a następnie wysłać zrzut ekranu i współrzędne regionu do serwera.

 5
Author: Kamil Kiełczewski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-21 11:11:06