Сделать снимок экрана сайта с помощью JavaScript

Question

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

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

Почему я хочу это сделать: у меня есть некоторый код, который идентифицирует места на странице, где мышь пользователя зависает в течение значительного промежутка времени (ppl, как правило, перемещает мышь в области интереса). Я также записываю места щелчков. Они записываются как X / Y-координаты. относительно верхнего левого края страницы

Примечание: это делается только для пользователей, которые проводят юзабилити-тестирование.

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

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

Вариант 1 (который кажется немного неприятным): будет ходить по DOM, сериализовать его и отправлять обратно на сервер. Затем я бы открыл соответствующий браузер и десериализовал DOM. Это должно работать, но звучит сложно автоматизировать. Я подозреваю, что также будут проблемы с относительными URL-адресами и т. Д.

Вариант 2: Как только страница закончит загрузку, сделайте снимок клиентской области (в идеале я хотел бы захватить всю длину страницы, но подозреваю, что это будет еще сложнее). Большинство страниц не требуют прокрутки, поэтому это не должно быть крупной проблемой - что-то, что можно улучшить для версии 2. Затем я загружу это изображение на сервер через AJAX.

Примечание: я не хочу видеть ничего, кроме содержимого моей собственной страницы (хром, адресная строка, что угодно)

Я бы предпочел иметь возможность делать это без установки чего-либо на ПК конечного пользователя (отсюда и JavaScript). Если единственной возможностью является приложение на стороне клиента, мы можем это сделать, но это будет означать больше хлопот при привлечении случайных пользователей к тесту юзабилити (в настоящее время мы просто отправляем по электронной почте друзьям / семье / морским свинкам другой URL-адрес)

Answer 1

Одним из альтернативных решений было бы «записать» позиции и размеры основных структурных элементов на странице:

(используя jQuery)

var pageStructure = {};

$("#header, #navigation, #sidebar, #article, #ad, #footer").each(function() {
    var elem = $(this);
    var offset = elem.offset();
    var width = elem.outerWidth();
    var height = elem.outerHeight();
    pageStructure[this.id] = [offset.left, offset.top, width, height];
});

Затем вы отправляете сериализованный pageStructure вместе с данными мыши, и на основе этих данных вы можете восстановить макет данной страницы.

Answer 2

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

Простой, быстрый поиск в Google нашел это: http://www.trymyui.com/ Вероятно, он не идеален, но он указывает на тот факт, что такие решения, какэто там и уже работает / проверено.Или вы можете загрузить скрипт, такой как this heatmap Очевидно, вам нужно будет добавить немного, чтобы позволить вам заново создать то, что было на экране во время создания карты.

Удачи.

Answer 3

ИМО, изобретать велосипед не стоит.Просто купите существующее решение, например ClickTale.

http://www.clicktale.com/