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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

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

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

Читайте ниже с https://en.wikipedia.org/wiki/Screenshot

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

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

Answer 2

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

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

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

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

screenshot --selector #hot-network-questions

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

Answer 3

Используйте режим адаптивного дизайна Firefox, установите для ширины нечто нормальное и высоту, достаточную для охвата всей страницы, нажмите кнопку «Снимок экрана» (значок камеры).

Answer 4

Существует программное обеспечение под названием Snagit, которое может решить вашу проблему. Это программное обеспечение может делать снимки экрана разных типов, например, окно прокрутки, а также записывать видео.

Это платное приложение, но также имеется пробная версия.

Answer 5

Существует расширение Nimbus Screen Capture, которое идеально подходит для этой задачи.

У вас есть возможность захватить:

• видимая часть страницы (полезно, чтобы не включать элементы браузера, в отличие от alt+Print Scrn)
• фрагмент страницы (посредством которого вы можете навести курсор на области на экране, чтобы найти нужный фрагмент - эти области соответствуют лежащим в их основе элементам HTML)
• выделенная область (вы вручную нажимаете и перетаскиваете туда, где хотите скриншот, поддерживает прокрутку при перетаскивании)
• вся страница

Answer 6

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

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

Answer 7

Варианты разместить все на одной странице:

• Используйте <Ctrl>- чтобы разместить все на одной странице
• Поверните экран в портретный режим
• Используйте второй экран в портретном режиме и найдите его под первым
• Объедините все вышеперечисленное

Другой вариант - сделать снимок верхней части того, что вы хотите сделать. Прокрутите вниз, сделайте следующий снимок экрана. Повторите это, пока вы не захватили все.
Дополнительно: объедините снимки экрана в одно большое изображение с помощью графического редактора (например, GIMP).

Answer 8

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

Answer 9

Для программ DESKTOP с окном прокрутки захват ApowerSoft сделал работу за меня.