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

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

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

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

Теперь я делаю следующее:

Открыть браузер через командную строку
Переключить фокус в окно браузера с помощью командной строки
Сделать снимок экрана (screencapture на mac, scrot на Linux) через командную строку

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

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

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

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

Добавление

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

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

Создайте плагин для Firefox или Chrome

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

Повторно создайте браузер (PhantomJS, TrifleJS)

Вначале нет интерфейса браузера.

Ответ 5

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

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

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

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

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

Третье лучшее решение - Захват экрана полной страницы.

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

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

Ответ 6

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

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

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

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

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

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

Выполнение этого простого вызова и существующего API

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

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

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

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

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

Ответ 7

У меня была некоторая удача в прошлом с XULRunner

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

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