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

68740
RockPaperLizard

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

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

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

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

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

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

67
Вы когда-нибудь задумывались о сохранении страницы в формате PDF? Преимущество этого метода в том, что некоторые веб-сайты имеют «вид печати», который содержит PDF, но в некоторых случаях этот метод может работать. JakeGould 7 лет назад 2
@JakeGould Спасибо, Джейк. Будет ли это работать для прокрутки и элемента на странице? RockPaperLizard 7 лет назад 0
Welp, пропустил часть о элементе прокрутки. Это слишком специфично для меня, чтобы комментировать, поэтому все, что я могу сказать, так это то, что теперь я не могу быть уверен, что метод печати PDF будет работать. Желаем удачи с другими идеями, представленными здесь. JakeGould 7 лет назад 0
Возможно, полезно: [Плагин Firefox для сохранения полной отрисованной страницы в виде изображения] (https://softwarerecs.stackexchange.com/q/4448/1813) на [softwarerecs.se]. a CVn 7 лет назад 0
Если я правильно понимаю, рассматриваемый элемент прокрутки, вероятно, вынужден быть меньше его полной высоты. Установка атрибута стиля высоты на auto для этого элемента может помочь. tehwalris 7 лет назад 0
Есть инструмент, который мы используем в моей работе, который называется SnagIt, который будет делать это (я верю). Steve 7 лет назад 0
@tehwalris Это отличная идея. Спасибо! Я тоже попробую. Я мог бы даже создать наложение CSS, чтобы сделать это автоматически. RockPaperLizard 7 лет назад 0

8 ответов на вопрос

84
pun

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

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

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

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

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

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

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

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

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

Большое спасибо за ваш ответ (и отличный образ!), Но, к сожалению, это не отвечает на вопрос. Мне нужно сделать скриншот всей страницы, включая элемент, а не только сам элемент. RockPaperLizard 7 лет назад 0
@RockPaperLizard на самом деле @ ответ каламбура ОТВЕЧАЕТ на ваш вопрос ... он просто не применил его к вашему варианту использования. Вы можете следить за его ответом, но выберите элемент ``, и он даст вам нужный скриншот. Digital Chris 7 лет назад 5
Если вы редактируете высоту элемента DOM, чтобы не было внутренних полос прокрутки, используйте FireShot для захвата всей страницы, это должно работать. 7 лет назад 2
Мне удалось получить один такой снимок экрана, но не более. Он по-прежнему производит звук затвора камеры, просто ничего не помещает в буфер обмена. То же самое касается команды на панели инструментов разработчика, файл не создается. MrFox 6 лет назад 0
24
topher

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

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

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

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

screenshot --selector #hot-network-questions 

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

@RockPaperLizard Я нашел [другой пост] (http://softwarerecs.stackexchange.com/a/10331) с тем же ответом, и OP был отредактирован вами. pun 7 лет назад 4
@ Pun Спасибо. Но мне нужно сделать скриншот всей страницы с расширенным элементом, а не только самого элемента. RockPaperLizard 7 лет назад 0
Мне удалось получить один такой снимок экрана, но не более. Он по-прежнему производит звук затвора камеры, но не файл. То же самое касается щелчка правой кнопкой мыши на элементе в режиме разработчика и копирования его таким образом. Ни одно изображение не отправляется в буфер обмена. MrFox 6 лет назад 0
8
Ouroborus

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

4
Gurumurthy.G

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

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

* если вы найдете это как ответ, отметьте его и оставьте в комментарии * Что это значит? A.L 7 лет назад 0
@AL [У этого пользователя недостаточно репутации для комментария, поэтому он предоставил ответ в надежде, что модератор преобразует его в комментарий.] (Http://i.stack.imgur.com/dD0os.png) MonkeyZeus 7 лет назад 3
Я использовал SnagIt в течение многих лет. Это очень полезная часть программного обеспечения. Roy Tinker 7 лет назад 0
2
garethb

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

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

1
Keith Hall

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

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

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

nimbus

Спасибо за ваш ответ, я ценю это. К сожалению, не похоже, что Nimbus Screen Capture может захватить все содержимое элемента * прокрутки * на странице. Если я ошибаюсь, не могли бы вы рассказать подробнее о том, как этого добиться с помощью этого инструмента? RockPaperLizard 7 лет назад 0
@RockPaperLizard Вы правы, похоже, это не поддерживается - я думал, что режим фрагмента будет охватывать элементы прокрутки или что выбранный режим области будет работать, но, хотя окно можно прокручивать в этом режиме, кажется, что элементы прокрутки не могут. Keith Hall 7 лет назад 0
Спасибо за подтверждение, что я просто не видел его. Возможно, они добавят эту функциональность в будущую версию. RockPaperLizard 7 лет назад 0
0
NZD

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

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

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

Пока я не добрался до пункта № 4, я думал, что вы * только * предлагаете объединить все элементы! Я представлял себе, что у меня 20 экранов, и они складывают их друг на друга ... LOL. Затем я добрался до # 4 и узнал, что вы имеете в виду предметы, которые будут использоваться индивидуально * или * вместе. RockPaperLizard 7 лет назад 0
Но если вы уменьшите страницу, вы не сможете уменьшить ее без искажений. NiCk Newman 7 лет назад 0
0
user606374

To take screenshots you can add an Extension like easy screenshot. Then It will be much easier for you to take screen shots.