Как сделать снимки экрана браузера с более высоким разрешением, чем поддерживает мой браузер?


97

Мне нужно сделать снимок экрана веб-сайта, как он выглядит на мониторе с очень высоким разрешением ... скажем, 4000x3000 пикселей. Экран моего ноутбука имеет родное разрешение 1400x768. По сути, мне нужно имитировать разрешение монитора намного выше, чем на самом деле поддерживает мой монитор и видеокарта. Я хочу, чтобы скриншот сайта выглядел почти так же, как и при повторном нажатии CTRL MINUS (уменьшение) в Firefox, но без потери пикселей из-за масштабирования. Как я могу это сделать? Есть ли какой-нибудь способ использовать программное обеспечение виртуальной машины для имитации дисплея со сверхвысоким разрешением? Если нет, есть ли какой-нибудь способ открыть окно браузера больше экрана, а затем каким-то образом захватить его содержимое в формате PNG? Что-нибудь еще, что могло бы работать?


Вы можете попытаться изменить настройку dpi вашей ОС. Я считаю, что в Windows 8 это требует изменения значения реестра. Хотя это дает вам гигантский рабочий стол, шрифты, конечно же, также масштабируются, поэтому вам придется больше напрягать глаза, чтобы читать текст.
jiggunjer

Ответы:


104

Вы можете сделать это с помощью Firefox и двух расширений: Web Developer и FireShot .

После установки обоих расширений перейдите в Инструменты - Веб-разработчик - Изменить размер - Изменить размеры изменения ....

Добавьте новый размер 4000 x 3000. установите флажок «Изменить размер области просмотра», если вы хотите, чтобы только содержимое страницы было 4000x3000. Если вы не проверяете это, полное окно Firefox (с панелями инструментов, меню, ...) будет установлено в это измерение.

альтернативный текст

Достигнув нужного размера, перейдите в Инструменты - FireShot - Захватить всю страницу и .... Выберите действие, например «Сохранить». Это позволит сохранить содержимое страницы, установленное веб-разработчиком, до желаемого размера.

альтернативный текст


@Snark - Ну, это почти сработало. Но похоже, что расширение для веб-разработчиков не позволит мне сделать область просмотра больше, чем мой экран ...?
Джошуа Кармоди

@ Джошуа: у меня все работает нормально. Я проверил, прежде чем опубликовать свой ответ. Я сделал новый тест, но не смог найти, где разместить такое большое изображение
Snark

1
Обновление: проблема «не могу сделать окно больше экрана» является ограничением самой ОС Windows.
Джошуа Кармоди

@snark - Вы не возражаете, если я спрошу, какую ОС вы используете?
Джошуа Кармоди

2
@ Snark - Ах. Может быть, это Windows XP (вот что я застрял здесь). В любом случае, я могу обойти это, используя FireBug для вставки DIV с style = "width: 4000px; height: 3000px;" в HTML-код, а затем с помощью FireShot, так что я все еще в порядке. Спасибо за указание FireShot. Это делает мою жизнь намного проще. Я прокручивал и делал скриншоты, а потом сочинял их вручную. Это была БОЛЬШАЯ БОЛЬ.
Джошуа Кармоди

19

Между тем (по крайней мере, год или два - начиная с версии 15, если я не ошибаюсь), Firefox поддерживает это напрямую с помощью встроенных инструментов разработчика.

Либо нажмите, CtrlShift Mлибо выберите « Адаптивное представление дизайна» на значке « Инструменты разработчика» в меню полосы.

Это откроет это представление, которое позволит вам выбрать из набора предустановок, а также ввести любое желаемое разрешение и напрямую сохранить снимок экрана в формате PNG на диск одним щелчком мыши:

введите описание изображения здесь


1
Кнопка скриншота может не работать должным образом, когда вы моделируете изображения с высоким разрешением при увеличении. В этом случае откройте панель инструментов разработчика Shift+ F2и вставьте ее screenshot --clipboard --fullpageв «консоль». Это отличается от обычной консоли JS.
клинок

Это также работает с режимом тестирования устройства консоли разработчика Chrome. Снимок экрана находится в выпадающем меню в правом верхнем углу.
Талли

К сожалению, это не работает в Chrome; Я просто попытался сделать снимок экрана с полным окном просмотра в Chrome Microsoft Flow (поскольку поток не будет отображаться должным образом в Firefox, даже если метод скриншота с полным окном просмотра Firefox работает), и он сделал только скриншот текущего просматриваемого пространства ... другими словами, не было никакой разницы между параметрами Chrome "захватить скриншот" и "захватить полноразмерный скриншот" ... облом.
TylerH

8

На Mac папарацци может помочь, используя либо графический интерфейс, либо используя синтаксис URL, например:

папарацци: (ширина = 4000, высота = 3000, maxheight = 3000) Как сделать снимки экрана браузера с более высоким разрешением, чем поддерживает мой браузер?

введите описание изображения здесь

Синтаксис URL можно легко превратить в букмарклет . Папарацци использует движок рендеринга WebKit.


6

Я использую дополнение FireFox под названием Abduction для создания .png снимка веб-страницы в полном объеме. К сожалению, это дополнение еще не было обновлено для совместимости с FireFox 3.6.

Похоже, ScreenGrab сделает то же самое.


5

Firefox 16 и более поздних версий теперь имеет возможность контролировать размер области просмотра с помощью консоли разработчика:

Откройте Инструменты ... Веб-разработчик ... Панель инструментов разработчика

Измените размер окна просмотра с помощью этой команды:

resize to 5000 5000

Снимок экрана с помощью этой команды:

screenshot output.png

4

Что ж, с Linux (или установкой X Window System любого типа) вы можете установить виртуальный рабочий стол, который больше вашего монитора. Вы прокручиваете его, но я думаю, что вы можете развернуть свой браузер и сделать снимок экрана.

Я не знаю, есть ли способ сделать это в Windows или OS X.


3

Я считаю, что использовать онлайн-сервисы типа thumbalizr проще, чем устанавливать плагины для браузера, если вам не нужно делать это часто.


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.