Как сделать снимок экрана, содержащий элемент прокрутки на веб-странице в Firefox?

Question

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

Это одностолбцовая таблица, имеющая полосу прокрутки из-за своей высоты. Это не IFRAME (который было бы просто загрузить в его собственной вкладке).

Столбец содержит форматированный текст и несколько небольших изображений.

Для длинных веб-страниц, которые прокручиваются, выполнить эту задачу тривиально. Но как это можно сделать, когда она содержит отдельный элемент внутри страницы, которая прокручивается?

Для ясности: мне нужно захватить всю страницу, а не только сам элемент.

Я хотел бы сделать это с помощью Firefox на Windows.

Answer 1

Я предлагаю использоватьВстроенная функция Firefoxкоторый позволяет делать снимки экрана отдельного элемента DOM.

Просто откройте инструменты разработчика → Найдите элемент → Щелкните правой кнопкой мыши и сделайте снимок экрана.

Это не сработало ни на одном из моих внутренних сайтов, поэтому не могу сказать, что сработает на всех.

Обновление после редактирования OP:

Если вы собираетесь записать всю страницу вместе со всем содержимым элемента DOM, как показано ниже, вам следует в реальном времени редактировать высоту элемента DOM.но...

Он выведет множество элементов DOM за пределы области просмотра, а скриншот или, насколько мне известно, любой другой инструмент не сможет это сделать, что, по-моему, не соответствует вашей цели.

Читайте ниже отhttps://en.wikipedia.org/wiki/Скриншот

Скриншот, снимок экрана, скриншот, дамп экрана или скриншот — это изображение, сделанное человеком для фиксации видимых элементов, отображаемых на мониторе, телевизоре или другом используемом устройстве визуального вывода.

Если бы мне действительно пришлось сделать это по-вашему, я бы либо создал GIF-файл, либо сделал два снимка экрана — один полной страницы, а другой только элемента DOM, чтобы объединить их в один.

Answer 2

2021 Редактировать

Панель инструментов была удалена из FF. Но вы все еще можете получить доступ к командам, введя их в консоли с префиксом :. Так что для скриншотов используйте

:screenshot --fullpage fullpage.png

или

:screenshot --selector #hot-network-questions fullpage.png

Старый ответ

Вы можете использовать команду создания снимка экрана из панели инструментов разработчика:

1. Нажмите Shift+ F2, чтобы открыть панель инструментов, или выберите ее в меню «Инструменты веб-разработчика».

2. На панели инструментов введите команду screenshot --fullpage fullpage.png.

Чтобы захватить один элемент, вы можете использовать его css-селектор с флагом --selector, например:

screenshot --selector #hot-network-questions

вы получите изображение ниже

Answer 3

Использование FirefoxРежим адаптивного дизайна, установите ширину на что-то нормальное и высоту так, чтобы она охватывала всю страницу. Затем нажмите кнопку скриншота (значок камеры).

Answer 4

я используюScreenpresso. Он позволяет вам делать прокручивающийся скриншот. По сути, вы делаете скриншот, прокручиваете вниз и делаете еще один и так далее, затем Screenpresso сшивает их вместе. Screenpresso также бесплатен.

FYI, сочетание клавиш для прокрутки скриншота — WindowsKey+Shift+PrintScreen. Затем вам нужно щелкнуть окно, которое вы хотите прокрутить. Когда вы дойдете до следующей части для скриншота, щелкните правой кнопкой мыши, прокрутите вниз, щелкните правой кнопкой мыши и так далее. Когда вы закончите, щелкните левой кнопкой мыши, и они будут сшиты вместе. Убедитесь, что на каждом скриншоте есть некоторое перекрытие, чтобы процесс сшивания работал лучше.