Вопрос по html, rendering – Как сделать скриншот отображаемой HTML-страницы

9

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

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

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

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

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

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

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

Ваш Ответ

3   ответа
0

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

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

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

РЕДАКТИРОВАТЬ (Re Эндрю Мур):

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

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


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

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

Это работает до того дня, когда они кардинально изменят свой макет и свои CSS / изображения.
Логика выбора скриншотов поверх паутинной копии страницы, контента и т. Д. Заключается в том, что многие из отображаемых нами страниц содержат контент, загруженный Ajax и т. Д., И зависят от своих внутренних серверов для предоставления этого контента. Контент обновляется почти ежедневно, и, поскольку контент теряет актуальность, внутренние серверы его больше не предоставляют, поэтому невозможно получить точный снимок экрана, не запустив его через реальный движок браузера. (Возможно, это не самый лучший дизайн для этих страниц, но они сторонние, и мы застряли с этим) ryandenki
Учитывая ваше редактирование. Теперь у вас есть дополнительная проблема анализа файлов и исправления любых относительных / абсолютных путей, чтобы они отображались правильно. Маршрут изображения просто самый простой.
Это правильно, но это не так сложно. Я не понимаю, как сделать рендеринг страницы и сделать снимок действительно самым простым способом. В худшем случае вы можете хранить весь CSS с каждым сеансом пользователя, и просто убедитесь, что если вы меняете изображение, вы также меняете его имя. Или просто убедитесь, что вы используете все через относительный путь, что означает, что вам вообще не нужно менять путь в HTML, если вы правильно его обслуживаете. Мы сделали это здесь, и кроме некоторых начальных проблем с БД, это работает как шарм.
0

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

просто так

1

Статья о цифровом вдохновении указывает наCutyCapt который является кроссплатформенным и использует движок рендеринга Webkit, а такжеIECapt который использует существующий движок рендеринга IE и требует Windows, естественно. Ничего особенного, что использует движок рендеринга Gecko, Firefox.

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

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

Похожие вопросы