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

Question

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

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

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

Answer 1

Светлые и черные области - это просто HTML divs. Скриншот страницы - это холст.

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

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

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

Когда в диалоговом окне говорится следующее:

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

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

После нажатия кнопки «Далее» открывается другое диалоговое окно со всемиинформацию и делает окончательный снимок экрана с вашими бликами и затемнениями.

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

Answer 2

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

Answer 3

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