Jak zrobić zrzut ekranu zawierający przewijany element na stronie internetowej w przeglądarce Firefox?

70

Muszę zrobić zrzut ekranu całej strony. Chodzi o to, że potrzebuję zrzut ekranu, aby uwzględnić całą zawartość jednego elementu, który nie mieści się na ekranie.

Jest to tabela jednokolumnowa, która ze względu na wysokość ma pasek przewijania. To nie jest ramka IFRAME (którą można łatwo załadować we własnej zakładce).

Kolumna zawiera sformatowany tekst i kilka małych obrazów.

W przypadku przewijanych długich stron internetowych wykonanie tego zadania jest banalne. Ale jak można to osiągnąć, gdy zawiera on przewijany element na stronie?

Żeby było jasne, muszę uchwycić całą stronę, a nie tylko sam element.

Chciałbym to zrobić za pomocą przeglądarki Firefox w systemie Windows.

windows  firefox  scrolling  screenshot  capture 
— RockPaperLizard
źródło
2
Czy zastanawiałeś się kiedyś nad zapisaniem strony jako pliku PDF? Zaletą tej metody jest to, że niektóre strony internetowe mają „widok wydruku”, który będzie zawierał plik PDF, ale w niektórych przypadkach ta technika może działać.
— JakeGould
@JakeGould Thanks Jake. Czy zadziałałoby przewijanie i element strony?
— RockPaperLizard,
Welp, brakowało mi części o przewijanym elemencie. To zbyt dziwne, żebym mógł komentować, więc mogę tylko powiedzieć, że nie mogę być pewien, że metoda drukowania PDF zadziała. Powodzenia w prezentowaniu innych pomysłów.
— JakeGould
— CVn
Jeśli dobrze rozumiem, przewijany element prawdopodobnie jest zmuszony do zmniejszenia jego pełnej wysokości. Ustawienie atrybutu stylu wysokości na auto dla tego elementu może pomóc.
— tehwalris,

Odpowiedzi:

86

Moją sugestią jest użycie wbudowanej funkcji Firefoksa, która pozwala robić zrzuty ekranu z pojedynczego elementu DOM.

Wystarczy otworzyć narzędzia programistyczne → Znajdź element → Kliknij prawym przyciskiem myszy i zrób zrzut ekranu

wprowadź opis zdjęcia tutaj

Nie działało na jednej z moich wewnętrznych stron, więc nie mogę powiedzieć, że będzie działać dla wszystkich.

Zaktualizuj po edycji OP:

Jeśli zamierzasz nagrywać całą stronę wraz z całą zawartością elementu DOM, jak pokazano poniżej, powinieneś na żywo edytować wysokość elementu DOM, ale ...

wprowadź opis zdjęcia tutaj

Spowoduje to wypchnięcie wielu elementów DOM z okienka ekranu i zrzutu ekranu lub AFAIK, które nie zostanie przechwycone przez żadne inne narzędzie, co moim zdaniem jest lepsze niż cel.

Przeczytaj poniżej z https://en.wikipedia.org/wiki/Screenshot

Zrzut ekranu, zrzut ekranu, czapka ekranu, czapka, zrzut ekranu lub zrzut ekranu to zdjęcie wykonane przez osobę w celu zarejestrowania widocznych elementów wyświetlanych na monitorze, telewizorze lub innym używanym urządzeniu wyjściowym.

Gdybym naprawdę musiał to zrobić po swojemu, stworzyłbym GIF lub zrobiłem dwa zrzuty ekranu, jedną pełną stronę, a drugą tylko element DOM, aby scalić w jedną.

— gra słów
źródło
Bardzo dziękuję za odpowiedź (i świetny obraz!), Ale niestety to nie odpowiada na pytanie. Muszę zrobić zrzut ekranu całej strony, w tym elementu, a nie tylko samego elementu.
— RockPaperLizard,
5
@RockPaperLizard faktycznie odpowiedź @ pun CZY odpowiada na twoje pytanie ... po prostu nie zastosował go do twojego przypadku użycia. Możesz śledzić jego odpowiedź, ale wybierz <body>element, a otrzymasz pożądany zrzut ekranu.
— Cyfrowy Chris
2
Jeśli edytujesz wysokość elementu DOM, aby nie było wewnętrznych pasków przewijania, użyj FireShot do przechwycenia całej strony, powinna działać.
Udało mi się zrobić taki zrzut ekranu, ale nie więcej. Nadal emituje dźwięk migawki aparatu, po prostu nic nie umieszcza w schowku. To samo dotyczy polecenia na pasku narzędzi programisty, żaden plik nie zostanie utworzony.
— MrFox,
@MrFox Plik png jest tworzony w folderze Pobrane.
— AxiomaticNexus
24

Możesz użyć polecenia zrzutu ekranu z paska narzędzi programisty:

  1. Naciśnij Shift+, F2aby otworzyć pasek narzędzi lub wybierz go z menu Narzędzi dla webmasterów.

  2. Na pasku narzędzi wpisz polecenie screenshot --fullpage fullpage.png.

Aby przechwycić pojedynczy element, możesz użyć jego selektora css z flagą --selector, np 

screenshot --selector #hot-network-questions

dostaniesz obraz poniżej

wprowadź opis zdjęcia tutaj

— topher
źródło
4
@RockPaperLizard Znalazłem inny post z tą samą odpowiedzią, a OP było przez ciebie edytowane.
— pun
@pun Dziękuję. Ale muszę zrobić zrzut ekranu całej strony z rozwiniętym elementem, a nie tylko samego elementu.
— RockPaperLizard,
Udało mi się zrobić taki zrzut ekranu, ale nie więcej. Nadal generuje dźwięk migawki aparatu, po prostu nie plik. To samo dotyczy kliknięcia elementu prawym przyciskiem myszy w trybie programisty i skopiowania go w ten sposób. Brak obrazu wysyłanego do schowka.
— MrFox,
4

Istnieje oprogramowanie o nazwie Snagit, które może rozwiązać Twój problem. To oprogramowanie może wykonywać zrzuty ekranu różnych typów, takich jak przewijane okno, a także nagrywać wideo.

Jest to aplikacja płatna, ale dostępna jest również wersja próbna.

— Gurumurthy.G
źródło
jeśli znajdziesz to jako odpowiedź, zaznacz to i opublikuj w komentarzu Co to znaczy?
— AL
3
— MonkeyZeus,
Używam SnagIt od lat. To bardzo przydatne oprogramowanie.
— Roy Tinker,
2

Używam Screenpresso . Umożliwia zrobienie przewijanego zrzutu ekranu. Zasadniczo wykonujesz zrzut ekranu, przewijasz w dół i bierzesz kolejny itd., A następnie Screenpresso łączy je ze sobą. Screenpresso jest również bezpłatny.

Do Twojej wiadomości, klawisze skrótu do przewijania zrzutu ekranu to WindowsKey + Shift + PrintScreen. Następnie musisz kliknąć okno, które chcesz przewinąć. Po przejściu do następnej części zrzutu ekranu kliknij prawym przyciskiem myszy, przewiń w dół, kliknij prawym przyciskiem myszy i tak dalej. Gdy skończysz, kliknij lewym przyciskiem myszy, a zostaną one zszyte. Upewnij się, że na każdym zrzucie widać zakładkę, aby proces szycia działał lepiej.

— garethb
źródło
1

Istnieje rozszerzenie o nazwie Nimbus Screen Capture, które doskonale nadaje się do tego zadania.

Masz możliwość przechwycenia:

  • widoczna część strony (przydatne, aby nie uwzględniać elementów przeglądarki w przeciwieństwie do alt+ Print Scrn)
  • fragment strony (w którym można najechać wskaźnikiem myszy na regiony na ekranie, aby znaleźć żądany fragment - regiony te odpowiadają podstawowym elementom HTML)
  • wybrany obszar (ręcznie klikasz i przeciągasz w wybrane miejsce zrzutu ekranu, obsługuje przewijanie podczas przeciągania)
  • cała strona

chmura

— Keith Hall
źródło
Dziękuję za odpowiedź, doceniam to. Niestety nie wygląda na to, że Nimbus Screen Capture może przechwycić całą zawartość przewijanego elementu na stronie. Jeśli się mylę, czy możesz podać więcej szczegółów na temat tego, jak to osiągnąć za pomocą tego narzędzia?
— RockPaperLizard
@RockPaperLizard masz rację, wydaje się, że to nie obsługuje - myślałem, że tryb fragmentu będzie obejmował przewijanie elementów lub że wybrany tryb obszaru będzie działał, ale chociaż okno można przewijać w tym trybie, wydaje się, że przewijane elementy nie mogą.
— Keith Hall,
Dzięki za potwierdzenie, że po prostu tego nie widziałem. Może dodadzą tę funkcjonalność do przyszłej wersji.
— RockPaperLizard
0

Opcje dopasowania wszystkiego na jednej stronie:

  • Użyj, <Ctrl>-aby zmieścić wszystko na jednej stronie
  • Obróć ekran do trybu pionowego
  • Użyj drugiego ekranu w trybie pionowym i znajdź go poniżej pierwszego
  • Połącz wszystkie powyższe

Inną opcją jest zrobienie zrzutu ekranu z górnej części tego, co chcesz uchwycić. Przewiń w dół, zrób następny zrzut ekranu. Powtarzaj to, dopóki nie uchwycisz wszystkiego.
Opcjonalnie: połącz zrzuty ekranu w jeden duży obraz za pomocą edytora obrazów (np. Gimp).

— NZD
źródło
1
Aż dotarłem do punktu # 4, myślałem, że tylko sugeruje, aby połączyć wszystkie elementy! Wyobraziłem sobie, że mam 20 ekranów i układam je jeden na drugim ... LOL. Potem dotarłem do # 4 i dowiedziałem się, że masz na myśli przedmioty, które mają być używane pojedynczo lub łącznie.
— RockPaperLizard,
Ale jeśli pomniejszysz stronę, nie będzie możliwości skalowania jej bez zniekształceń.
— NiCk Newman
0

Aby robić zrzuty ekranu, możesz dodać rozszerzenie takie jak łatwy zrzut ekranu. Dzięki temu robienie zrzutów ekranu będzie znacznie łatwiejsze.

— użytkownik606374
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.