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

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

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

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

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

  1. открыть браузер через командную строку
  2. переключить фокус на окно браузера через командную строку
  3. сделать скриншот (screencapture on mac, scrot на Linux)через командную строку

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

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

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

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

дополнение:

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

7 ответов


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

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


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

вы можете смешать это с программой типа макроса / языком сценариев, таким как Горячие Клавиши, Автоматическое. Вы можете или не можете найти его проще, чем с помощью командной строки. Полагаю, это зависит от того, что вы пытаетесь сделать.


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

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

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


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

  1. создайте плагин для Firefox или Chrome

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

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

в первую очередь нет пользовательского интерфейса браузера.


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

Это предоставит вам более безопасный способ сохранения скриншотов непосредственно на ваш google Диск и вместе со скриншотами он также позволяет пользователям сохранять фотографии или другие документы на google Диск.

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

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

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

третье лучшее решение - Захват Экрана Полной Страницы .

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

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


многие комбинации браузера, версии и платформы ОС

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

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

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

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

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

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

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

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

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

инженеры фокусируют на решении как требование...

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


Мне повезло в прошлом с xulrunner, с

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

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