Захватить скриншот содержимого браузера (веб-сайт)

Question

Моя цель - получить изображение веб-сайта (да, так просто). Я знаю, что есть такие инструменты, как html2canvas. Однако я не хочу, чтобы клиентский браузер отображал скриншот.

Одна из причин заключается в том, что я использую расширение Chrome с веб-представлением, которое по сути ведет себя подобно iFrame, По соображениям безопасности создание снимка экрана для веб-сайта, содержащего iFrame не работает.

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

Что я делаю сейчас:

1. Откройте браузер через командную строку
2. Переключить фокус на окно браузера через командную строку
3. Сделать скриншот (скриншот на Mac, Scrot на Linux) через командную строку

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

• Наихудшим решением было бы жестко закодировать позицию контента 0|0 относительно окна для каждого браузера. Это дерьмо (по понятным причинам).
• Еще одно решение, которое я придумала, это: сказать браузеру (я могу общаться с плагином через сокет) добавить что-то вроде QR-кода в x:0;y:0;, отправить скриншот на сервер обработки изображений. После этого удалите QR-код и снова отправьте скриншот. Тогда я знаю каждую точку относительно 0|0, но это тоже не так уж и элегантно.

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

Примером этого является плагин для Firefox или этот серверный инструмент или все эти инструменты, которые предоставляют скриншоты веб-сайтов с различными браузерами и ОС, как это. Интересно, как они избавляются от специфичных для браузера элементов GUI.

Дополнение:

Я не знаю, сделал ли я это достаточно ясно, но я хочу сделать снимок экрана с содержимым конкретного браузера, но без элементов графического интерфейса браузера. Это означает, что приложение с запущенным безголовым браузером будет бесполезно для меня. Потому что безголовый браузер имеет свой собственный движок. Я специально хочу сделать скриншот, например, Firefox версии x.

Answer 1

Вы знаете о селене? Это инструмент тестирования, который на самом деле открывает определенный браузер и запускает скриптовые тесты. Его также можно использовать для создания скриншотов.

Это может быть решением вашей проблемы.

Answer 2

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

Вы можете смешать это с программным языком и языком макросов типа Auto Hot Keys. Вы можете или не можете найти это проще, чем с помощью командной строки. Я полагаю, это зависит от того, что вы пытаетесь сделать.

Answer 3

Большинство серверных языков просто обслуживают HTML и никогда не отображают его. Некоторое время назад я столкнулся с проблемой индексации одностраничных приложений javascript, и одним из решений было phantomJS.

PhantomJS делает именно то, что вы хотите. Вы можете визуализировать HTML (на стороне подачи), а в Phantom также встроен холст, поэтому вы можете сделать снимок экрана с его помощью. Phantom - это webkit, поэтому он будет охватывать большинство популярных браузеров (Chrome, Safari, Opera). Если вы хотите посмотреть, как будет выглядеть веб-сайт в Firefox, вы можете попробовать SlimerJS (аналогично PhantomJs, но с движком Gecko).

Это будет охватывать все самые популярные браузеры (кроме IE). Это все еще безрезультатное решение, но вы сможете увидеть различные механизмы компоновки. Вам понадобится NodeJS, и это, возможно, немного усвоит, но у них обоих есть документация на скриншотах. Удачи!

• http://phantomjs.org/screen-capture.html
• http://docs.slimerjs.org/current/quick-start.html

Answer 4

Существуют различные инструменты с открытым исходным кодом, а также платные, чтобы сделать то же самое. Но, учитывая соображения безопасности. Я предлагаю вам использовать расширение "Сохранить на диск" от самого Google.

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

// Второе предложение //

Если вы не хотите использовать вышеупомянутое расширение, вы можете использовать Blipshot, это инструмент с открытым исходным кодом, также доступный на GitHub.

// Третье предложение //

Третье лучшее решение - захват всей страницы.

Эти три инструмента являются одними из лучших инструментов скриншотов для Google Chrome и других браузеров.

Я надеюсь, что это поможет вам!

Answer 5

Есть 2 способа сделать это:

1. Создать плагин для Firefox или Chrome

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

2. Пересоздать браузер (PhantomJS, TrifleJS)

Во-первых, нет пользовательского интерфейса браузера.

Answer 6

Множество комбинаций браузера, версии и платформы os

Для захвата скриншотов веб-страниц с определенным браузером и версией требуется платформа, которая может запускать, запускать и захватывать во всех этих браузерах. Кроме того, в вопросе не было указано, требуется ли это также для определенных платформ в сочетании с указанными браузерами и версиями, как, например, в OSX, Windows, Linux, Android и т. Д. Различные версии этих платформ еще больше увеличат возможные комбинации.

• Вам нужно будет настроить, поддерживать эти браузеры
• Найдите или создайте структуру, чтобы управлять ими, Selenium, вероятно, ваш лучший выбор
• Преодолеть недостаток поддержки в Selenium для определенных комбинаций браузер / ОС
• Инфраструктура, которая управляет этим и предоставляет как хороший API для использования

Однако для этого существует существующее или связанное решение, например:

Что касается получения снимков экрана в конкретном браузере, версии, платформе и т. Д.

http://browsershots.org/ бесплатен и имеет большой набор комбинаций браузеров, хотя не очень понятно, можно ли получить к нему программный доступ.

Чтобы сделать это, просто вызов и существующий API

crossbrowsertesting.com - это коммерческий сервис (бесплатная пробная версия), который соответствует всем требованиям.

Имеет технологию, которая может сделать это

http://usersnap.com/ поддерживает множество браузеров, как настольных, так и мобильных, и проделал большую работу, чтобы получить идеальный снимок экрана на серверах, идентичный тому, что пользователь увидит в своей среде.

Инженеры сосредоточены на решении как требование...

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

Answer 7

В прошлом мне повезло с XULRunner

Вы можете попробовать процедуру, изложенную здесь: https://blog.builtwith.com/2010/07/02/mozilla-automated-website-screen-grabber/

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