Как работает часть Скриншота системы обратной связи Google+?

У меня нет приглашения, но оно было использовано на TWIG. Он работает следующим образом:

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

Итак, как Google создает этот скриншот? отправляет ли он полный модифицированный DOM для обработки на стороне сервера? или какая другая черная магия здесь задействована?

Ответы

Ответ 1

Основные моменты и черные выходы - это всего лишь HTML divs. Снимок экрана - это холст.

Я использовал инструменты разработчика Chrome, чтобы подтвердить это. Он работает даже в Firefox и Internet Explorer, поэтому это определенно не просто вещь Chrome.

Вот скриншот инструментов разработчика с одним из выделенных элементов, который показывает, что это div:

Google Chrome Developer Tools - Feedback Tool

Существует один холст:

Canvas

Когда диалог говорит об этом:

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

Кажется, что вы показываете скриншот страницы на сервере (так как на вкладке "Сеть" есть запрос и он связан с моментальным снимком и обратной связью в соответствии с переменными в URL-адресе запроса), а затем он помещает скриншот на странице.

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

Final dialog

Я не уверен, как они сделали часть с выделенным текстом.

Ответ 2

не знаю эту функцию, но как ее описывают; это не кроссплатформенная функция, а не спецификация. Ваш поиск drawWindow элемента canvas. Затем они base64/urlencode на холсте и отправляют его на сервер. Можете представить, что они поддерживают его с помощью серверной черной магии для поддержки IE6.. или они делают google + только для браузера html5.

Ответ 3

Он может просто отправить все дерево DOM на сервер и отобразить на другом конце.