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

70

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

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

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

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

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

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

— RockPaperLizard
источник

2

Вы когда-нибудь задумывались о сохранении страницы в формате PDF? Преимущество этого метода в том, что некоторые веб-сайты имеют «вид печати», который будет содержать PDF, но в некоторых случаях этот метод может работать.

— JakeGould

@JakeGould Спасибо, Джейк. Будет ли это работать для прокрутки и элемента на странице?

— RockPaperLizard

Welp, пропустил часть о элементе прокрутки. Это слишком специфично для меня, чтобы комментировать, поэтому все, что я могу сказать, так это то, что сейчас я не могу быть уверен, что метод печати PDF будет работать. Желаем удачи с другими идеями, представленными здесь.

— JakeGould

Возможно, полезно: плагин Firefox для сохранения полной отрисованной страницы в виде изображения в Рекомендациях по программному обеспечению .

— CVn

Если я правильно понимаю, рассматриваемый элемент прокрутки, вероятно, вынужден быть меньше его полной высоты. Установка атрибута стиля высоты на auto для этого элемента может помочь.

— tehwalris

86

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

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

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

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

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

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

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

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

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

— каламбур
источник

Большое спасибо за ваш ответ (и отличный образ!), Но, к сожалению, это не отвечает на вопрос. Мне нужно сделать скриншот всей страницы, включая элемент, а не только сам элемент.

— RockPaperLizard

5

@RockPaperLizard на самом деле ответ @ pun отвечает на ваш вопрос ... он просто не применил его к вашему варианту использования. Вы можете следить за его ответом, но выбрать <body>элемент, и он даст вам нужный скриншот.

— Digital Chris

2

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

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

— MrFox

@MrFox Файл png создается в папке «Загрузки».

— AxiomaticNexus

24

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

Нажмите Shift+, F2чтобы открыть панель инструментов или выберите ее в меню Инструменты для веб-разработчиков.
На панели инструментов введите команду screenshot --fullpage fullpage.png.

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

screenshot --selector #hot-network-questions

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

— Тофер
источник

4

@RockPaperLizard Я нашел еще одно сообщение с тем же ответом, и OP был отредактирован вами.

— каламбур

@pun Спасибо. Но мне нужно сделать скриншот всей страницы с расширенным элементом, а не только самого элемента.

— RockPaperLizard

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

— MrFox

8

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

— Ouroborus
источник

4

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

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

— Gurumurthy.G
источник

если вы найдете это в качестве ответа, отметьте его и оставьте в комментарии. Что это значит?

— AL

3

@AL У этого пользователя недостаточно репутации для комментария, поэтому он предоставил ответ в надежде на то, что модератор преобразует его в комментарий.

— MonkeyZeus

Я использовал SnagIt в течение многих лет. Это очень полезная часть программного обеспечения.

— Рой Тинкер

2

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

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

— garethb
источник

1

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

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

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

— Кит Холл
источник

Спасибо за ваш ответ, я ценю это. К сожалению, не похоже, что Nimbus Screen Capture может захватывать все содержимое элемента прокрутки на странице. Если я ошибаюсь, не могли бы вы рассказать подробнее о том, как этого добиться с помощью этого инструмента?

— RockPaperLizard,

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

— Кит Холл

Спасибо за подтверждение, что я просто не видел его. Возможно, они добавят эту функциональность в будущую версию.

— RockPaperLizard

0

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

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

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

— NZD
источник

1

Пока я не добрался до пункта № 4, я думал, что вы предлагаете только объединить все элементы! Я представлял себе 20 экранов и складывающих их один на другой ... LOL. Затем я добрался до # 4 и узнал, что вы имеете в виду предметы, которые будут использоваться по отдельности или в сочетании.

— RockPaperLizard

Но если вы уменьшите страницу, вы не сможете уменьшить ее без искажений.

— NiCk Ньюман

0

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

— user606374
источник

0

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

— T.Todua
источник