Jak wykonać zrzut ekranu renderowanej strony HTML?

Question

Nasz pakiet analizy sieci zawiera szczegółowe informacje o aktywności użytkownika na stronie, a my pokazujemy (kliknięcie/przewiń/interakcję) wizualizacje w nakładce na stronie internetowej. Obecnie jest to ramka IFrame zawierająca renderowanie na żywo strony.

Ponieważ strony zmieniają się w czasie, starsze dane nie odpowiadają już bieżącemu układowi strony. Chcielibyśmy uruchomić pająka, aby czasami robić migawki stron, co pozwala nam prowadzić rejestr interakcji z różnymi wersjami strony.

Mamy działającą implementację tego (Linux), ale proces migawki jest ohydnym hackem Python/JavaScript/HTML, który otwiera okno przeglądarki Firefox, zrzuty ekranu i przewijanie oraz scalanie i zapisywanie do pliku. Wymaga to zainstalowania stosu X na naszych normalnie bezgłowych serwerach i zajmuje ponad minutę na stronę.

Preferujemy bezgłosową implementację z wydajnością bliższą rozdzielczości renderowania w zwykłej przeglądarce internetowej, ale nie znaleźliśmy niczego.

Jest jakiś ruch w kierunku budowania czegoś wykorzystującego źródło Mozilli jako punkt wyjścia, ale to wydaje się przesadą dla mnie, jak również koszmarem dla utrzymania, jeśli staramy się go aktualizować.

Sugestie?

Answer 1

An article on Digital Inspiration punkty do CutyCapt która jest cross-platform i wykorzystuje silnik Webkit renderingu oraz IECapt który wykorzystuje obecny silnik renderowania IE i wymaga systemu Windows, wydrą. Nic z mojej głowy, która używa Gecko, silnika renderującego Firefoksa.

Wątpię jednak, czy uda Ci się uciec od X. Ponieważ CutyCapt wymaga Qt, wymaga instalacji X lub Windows. I podobnie, IECapt będzie wymagał Windowsa (lub Wine, jeśli chcesz spróbować uruchomić go pod Linuksem, a następnie wrócisz do X). Wątpię, czy uda Ci się znaleźć silnik renderujący, który nie wymaga Qt, Gtk, GDI ani Cocoa, a zatem wymaga pełnej instalacji bibliotek wyświetlania.

Answer 2

Dlaczego nie przechowywać kodu HTML wysyłanego do klienta? Następnie można użyć tego do ponownego wyświetlenia w przeglądarce internetowej jako strony, aby pokazać, jak to wyglądało.

Korzystając z danych webanalytics dotyczących akcji użytkowych, możesz użyć ich do domyślnego ustawienia pól złożonych, pól itp. Do wartości, które miałby klient, nawet zmienić przyciski CSS na itd., Aby oznaczyć je jako pchnięte.

Jako korzyść nie potrzebujesz stosu X, nie musisz wykonywać indeksowania ani przechowywania obrazów.

EDIT (Re Andrew Moore):

To byłeś zapisać aktualne CSS/obrazów pod numerem wersji. Umieść łatwo parsowalny numer wersji w komentarzu w kodzie HTML. Jeśli zmienisz swoje CSS/obrazy i użyjesz istniejących nazw, zwiększ numer wersji w wysyłanych wyjściach HTML.

System przechowujący kod HTML będzie wiedział, że musi pobrać nową kopię i zapisać ją pod nowym numerem. Podczas ponownego wyświetlania po prostu używa numeru wersji, aby określić, który zestaw CSS/obrazu ma być użyty.

Obecnie mamy oto system, który wykorzystuje system bardzo podobna więc możemy śledzić działania użytkowników i zapewnić lepsze wsparcie, gdy nazywają naszą help desk, ponieważ mogą one wywołać sesji użytkowników i śledzić to, co zrobili, nawet jakoś na żywo.

można go nawet zakodować na pola czułości autocenzora podczas przechowywania.

Answer 3

w zależności od specyfiki Twoich potrzeb może uda Ci się uciec dzięki korzystaniu z jednego z wielu bezpłatnych serwisów z miniaturami stron internetowych? snapcasa, na przykład umożliwia generowanie tysięcy miesięcznie/brak opłat bez reklamowania. (Nigdy nie używane, tylko wyszukiwana w Google "bezpłatna usługa miniatur"), aby to znaleźć.

tylko thot