Jak mogę robić zrzuty ekranu przeglądarki w wyższej rozdzielczości niż obsługiwana przez moją przeglądarkę?

97

Muszę zrobić zrzut ekranu ze strony internetowej, tak jak na monitorze o bardzo wysokiej rozdzielczości ... powiedzmy 4000x3000 pikseli. Ekran mojego laptopa ma natywną rozdzielczość 1400 x 768. Zasadniczo muszę zasymulować posiadanie rozdzielczości monitora znacznie wyższej niż w rzeczywistości obsługiwana przez mój monitor i kartę graficzną. Chcę, aby zrzut ekranu witryny wyglądał mniej więcej tak, jak po naciśnięciu CTRL MINUS (pomniejszenie) w Firefoksie, ale bez utraty pikseli z powodu skalowania. Jak mogę to zrobić? Czy jest jakiś sposób na wykorzystanie oprogramowania maszyny wirtualnej do symulacji wyświetlania w wysokiej rozdzielczości? Jeśli nie, to czy jest jakiś sposób, aby otworzyć okno przeglądarki większe niż ekran, a następnie jakoś uchwycić jego zawartość jako PNG? Coś jeszcze, co może działać?

browser virtual-machine resolution screenshot screen-capture Joshua Carmody
źródło
Możesz spróbować zmienić ustawienie dpi systemu operacyjnego. Wierzę, że w Windows 8 wymaga zmiany wartości rejestru. Chociaż daje to gigantyczny pulpit, czcionki oczywiście również skalują się, więc musisz bardziej męczyć oczy, aby czytać tekst.
jiggunjer

Odpowiedzi:

104

Możesz to zrobić za pomocą przeglądarki Firefox i 2 rozszerzeń: Web Developer i FireShot .

Po zainstalowaniu obu rozszerzeń przejdź do Narzędzia - Web Developer - Zmień rozmiar - Edytuj rozmiar Zmień wymiary ...

Dodaj nowy rozmiar, 4000 x 3000. zaznacz „Zmień rozmiar rzutni”, jeśli chcesz, aby zawartość strony była tylko 4000 x 3000. Jeśli tego nie zaznaczysz, pełne okno przeglądarki Firefox (z paskami narzędzi, menu, ...) zostanie ustawione na ten wymiar.

alternatywny tekst

Po uzyskaniu właściwego rozmiaru przejdź do Narzędzia - FireShot - Przechwyć całą stronę i ... Wybierz akcję, na przykład Zapisz. Zapisze zawartość strony ustawioną przez Web Developer do pożądanego rozmiaru.

alternatywny tekst

Snark
źródło
@snark - Cóż, to prawie działało. Ale wygląda na to, że rozszerzenie Web Developer nie pozwala mi powiększać okienka ekranu niż mój ekran ...?
Joshua Carmody
@Joshua: działa dobrze dla mnie. Testowałem przed opublikowaniem mojej odpowiedzi. Zrobiłem nowy test, ale nie mogłem znaleźć miejsca na tak duży obraz
Snark
1
Aktualizacja: Problem niemożności wykonania okna większego niż ekran wydaje się ograniczeniem narzuconym przez sam system operacyjny Windows.
Joshua Carmody
@snark - Czy masz coś przeciwko, jeśli zapytam, jakiego systemu operacyjnego używasz?
Joshua Carmody
2
@snark - Ah. Może to kwestia Windows XP (właśnie z tym utknąłem). W każdym razie mogę go obejść, używając FireBug do wstawienia DIV ze stylem = "szerokość: 4000px; wysokość: 3000px;" do kodu HTML, a następnie za pomocą FireShot, więc nadal jestem dobry. Dzięki za zwrócenie uwagi na FireShot. To znacznie ułatwia mi życie. Przewijałem się i robiłem zrzuty ekranu, niż ręcznie je tworzyłem. To był MAŁY BÓL.
Joshua Carmody
19

Tymczasem (przez co najmniej rok lub dwa - od wersji 15, jeśli się nie mylę), Firefox obsługuje to bezpośrednio poprzez zintegrowane narzędzia programistyczne.

Uderz CtrlShift Mlub wybierz Widok responsywnego projektu z ikony Narzędzi programisty w menu paska.

Spowoduje to wyświetlenie tego widoku, który pozwoli ci wybrać jeden z zestawów ustawień, a także wprowadzić dowolną rozdzielczość i bezpośrednio zapisać zrzut ekranu w formacie PNG na dysk za pomocą jednego kliknięcia:

wprowadź opis zdjęcia tutaj

Damon
źródło
1
Przycisk zrzutu ekranu może nie działać poprawnie podczas symulacji obrazów w wysokiej rozdzielczości poprzez powiększenie. W takim przypadku otwórz pasek narzędzi programisty Shift+ F2i wklej screenshot --clipboard --fullpagego w „konsoli”. Różni się to od zwykłej konsoli JS.
ostrze
Działa to również w trybie testowania urządzeń w konsoli programisty chrome. Opcja zrzutu ekranu znajduje się w menu rozwijanym w prawym górnym rogu.
Tully,
Niestety nie działa to w Chrome; Właśnie próbowałem zrobić zrzut ekranu z pełnym widokiem w przeglądarce Microsoft Flow (ponieważ Flow nie wyświetla się poprawnie w Firefoksie, mimo że metoda zrzutu ekranu z pełnego widoku Firefox działa) i wystarczyło zrzut ekranu z aktualnie oglądanego miejsca ... innymi słowy, nie było różnicy między opcjami „przechwytywania zrzutu ekranu” Chrome i „przechwytywania zrzutu ekranu w pełnym rozmiarze”… bummer.
TylerH
6

Korzystam z dodatku FireFox o nazwie Abduction, aby utworzyć ujęcie .png strony internetowej w całości. Niestety ten dodatek nie został jeszcze zaktualizowany, aby był zgodny z FireFox 3.6.

Wygląda na to, że ScreenGrab zrobi to samo.

Zooks64
źródło
5

Firefox 16 i nowszy ma teraz możliwość kontrolowania rozmiaru rzutni za pomocą konsoli programisty:

Otwórz Narzędzia ... Web Developer ... Pasek narzędzi dla programistów

Zmień rozmiar rzutni za pomocą tego polecenia:

resize to 5000 5000

Zrzut ekranu za pomocą tego polecenia:

screenshot output.png
Wayne Piekarski
źródło
4

Cóż, dzięki systemowi Linux (lub X Window System o dowolnym smaku) możesz ustawić wirtualny pulpit, który jest większy niż monitor. Przewijasz się w nim, ale wydaje mi się, że możesz zmaksymalizować przeglądarkę i zrobić zrzut ekranu.

Nie wiem, czy można to zrobić w systemie Windows lub OS X.

Ronald Pottol
źródło
3

Uważam, że korzystanie z usług online, takich jak thumbalizr, jest łatwiejsze niż instalowanie wtyczek do przeglądarek, jeśli nie trzeba tego robić często.

svick
źródło
1

W Chrome dostępne są rozszerzenia takie jak:

Jest inny zrzut ekranu strony internetowej, ale nie mam wystarczającej reputacji, aby opublikować więcej niż dwa linki

titusfx
źródło