Как сделать снимок экрана с отображаемой HTML-страницей

Наш пакет веб-аналитики содержит подробную информацию о деятельности пользователя на странице, и мы показываем визуализацию (щелчок/прокрутка/взаимодействие) в наложении поверх веб-страницы. В настоящее время это IFrame, содержащий живое отображение страницы.Как сделать снимок экрана с отображаемой HTML-страницей

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

У нас есть рабочая реализация этого (Linux), но процесс моментального снимка - отвратительный взлом Python/JavaScript/HTML, который открывает окно Firefox, скриншоты и прокрутку и слияние и сохранение в файл. Это требует от нас установки X-стека на наших обычных безгласных серверах и занимает минуту на странице.

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

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

Предложения?

источник

2009-08-10 ryandenki

Я использую [wkhtmltopdf] (http://code.google.com/p/wkhtmltopdf/) для этого. Ему нужен сервер X, но достаточно Xvfb, поэтому он технически безголовый. – jrockway

An article on Digital Inspiration точки в направлении CutyCapt, который является кросс-платформенным и использует Webkit рендеринг, а также IECapt, который использует настоящий IE рендеринг и требует Windows, спичечные. Ничего от меня в голове, которое использует Gecko, движок рендеринга Firefox.

Сомневаюсь, что вам удастся уйти от X. Поскольку CutyCapt требует Qt, для этого требуется либо X, либо установка Windows. И, аналогично, для IECapt потребуется Windows (или Wine, если вы хотите попробовать запустить ее под Linux, а затем вы снова нуждаетесь в X). Я сомневаюсь, что вы сможете найти механизм рендеринга, который не требует Qt, Gtk, GDI или Cocoa и поэтому требует полной установки библиотек.

источник

2009-08-10 04:34:33

Работает с Xvfb. – jrockway

@jrockway: Я не уверен, что такое ваш антецедент, но я думаю, что вам может не хватать смысла. Возражение здесь заключается не в том, что требуется физический экран (это не так), но больше того, что установлено огромное количество дополнительных библиотек, которые поддерживают графические интерфейсы на машине, которая в противном случае используется только для терминальных служб. –

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

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

В качестве преимущества вам не нужен стек X, не нужно выполнять сканирование или хранение изображений.

EDIT (Re Andrew Moore):

Здесь вы сохранить текущие CSS/изображений под номером версии. Поместите легко анализируемый номер версии в комментарий в HTML. Если вы измените свои CSS/изображения и используете существующие имена, увеличьте номер версии в отправляемом HTML-файле.

Система, которая хранит HTML, будет знать, что ей необходимо захватить новую копию и сохранить ее под новым номером. При повторном воспроизведении он просто использует номер версии, чтобы определить, какой CSS/образ установлен для использования.

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

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

источник

2009-08-10 04:38:02

Это работает до тех пор, пока они не изменили свой макет и их css/изображения. –

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

Это правильно, но это не так сложно. Я не вижу, как рендеринг страницы и получение изображения, на самом деле самый простой способ. В худшем случае вы можете сохранить все CSS с каждым сеансом пользователя и просто убедиться, что если вы изменили изображение, вы также измените его имя. Или просто убедитесь, что вы используете все с помощью относительного пути в первую очередь, а это означает, что вам не нужно вообще изменять путь в HTML, если вы правильно его обслуживаете. Мы сделали это здесь и, помимо некоторых начальных проблем с db, работают как шарм. –

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

просто Thot

источник

2009-08-10 05:11:58

Как сделать снимок экрана с отображаемой HTML-страницей

ответ

Смежные вопросы