У меня нет приглашения, но оно было использовано на TWIG. Он работает следующим образом:
Вы можете выбрать детали для выделения, части для затемнения. На следующем шаге создается скриншот (??), и вы можете просмотреть, какую информацию передают другие браузеры.
Итак, как Google создает этот скриншот? отправляет ли он полный модифицированный DOM для обработки на стороне сервера? или какая другая черная магия здесь задействована?
Основные моменты и черные выходы - это всего лишь HTML divs. Снимок экрана - это холст.
Я использовал инструменты разработчика Chrome, чтобы подтвердить это. Он работает даже в Firefox и Internet Explorer, поэтому это определенно не просто вещь Chrome.
Вот скриншот инструментов разработчика с одним из выделенных элементов, который показывает, что это div:
Существует один холст:
Когда диалог говорит об этом:
Подождите, пока мы сделаем снимок страницы, чтобы вы могли выделить соответствующие области.
Кажется, что вы показываете скриншот страницы на сервере (так как на вкладке "Сеть" есть запрос и он связан с моментальным снимком и обратной связью в соответствии с переменными в URL-адресе запроса), а затем он помещает скриншот на странице.
После того, как вы нажмете "Далее", откроется еще одно диалоговое окно со всей информацией и отобразит окончательный скриншот с вашими бликами и черными выходами.
Я не уверен, как они сделали часть с выделенным текстом.
не знаю эту функцию, но как ее описывают; это не кроссплатформенная функция, а не спецификация. Ваш поиск drawWindow элемента canvas. Затем они base64/urlencode на холсте и отправляют его на сервер. Можете представить, что они поддерживают его с помощью серверной черной магии для поддержки IE6.. или они делают google + только для браузера html5.
Он может просто отправить все дерево DOM на сервер и отобразить на другом конце.