Как сделать скриншот сайта на стороне клиента JavaScript / как это сделал Google? (нет необходимости обращаться к жесткому диску)

Я работаю над веб-приложением, которое должно отображать страницу и делать снимок экрана на стороне клиента (браузера).

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

Я исследовал:

  1. BrowserShots похожи на сервисы ...
  2. Механизированные браузеры ...
  3. wkhtmltoimage ...
  4. Python WebKit2PNG ...

Но ни один из них не дает мне всего, что мне нужно, а именно:

  1. Обработка на стороне браузера (создание скриншота страницы). Не нужно сохранять на HDD! Просто...
  2. ... отправить изображение на Сервер для дальнейшей обработки.
  3. Захват всей страницы (не только видимой части)

В конце концов я наткнулся на инструмент обратной связи Google (нажмите «Отзыв» в нижнем колонтитуле YouTube, чтобы увидеть это). Он содержит JavaScript для Кодировка JPG и два других огромных скрипта, которые я не могу определить, что именно они делают ...

Но он обрабатывается на стороне Клиента - иначе не было бы смысла вставлять в код этот огромный кодировщик JPEG!

Кто-нибудь знает, как они это сделали / как я могу это сделать?

Вот пример отзыва (сообщите об ошибке на некоторых экранах)

Отзыв / пример сообщения об ошибке


javascript screenshot google-search capture
person Paweł Szymański    schedule 11.04.2011    source источник
comment
Этот вопрос SO может помочь stackoverflow.com/questions/60455/   -  person Jim Blackler    schedule 11.04.2011
comment
@ZachSaucier спасибо, но, как описано в другом ответе: не может быть на 100% точным для реального представления, поскольку он не делает фактический снимок экрана   -  person Paweł Szymański    schedule 12.09.2016
comment
@ Michał Perłakowski В этом вопросе обсуждается гораздо больше глубины и решений, чем в том, что он помечен как дубликат. Если любой, то другой должен быть помечен как дубликат.   -  person Paweł Szymański    schedule 19.06.2017
comment
См. Также stackoverflow.com/a/32776834/207981   -  person bszom    schedule 26.03.2018
comment
Создание правильного снимка экрана позволит обойти защиту XSS, так как вы сможете увидеть междоменные фреймы iframe, к которым у вас не должно быть доступа. По этой причине я не думаю, что это возможно и не будет реализовано. Например, используя виджет социальной сети Facebook и сделав снимок экрана страницы, вы сможете увидеть имя любого из ваших посетителей, вошедших в Facebook.   -  person Rolf    schedule 05.04.2018

Ответы (2)


arrow_upward
84
arrow_downward

Это ответ на вашу проблему.

Вы можете использовать JavaScript / Canvas для выполнения этой работы, но это все еще экспериментально.

Обновление:

Теперь для этого есть библиотека https://html2canvas.hertzen.com/

person Vaibhav Garg    schedule 02.08.2011
comment
Спасибо, но это цитата: может не быть на 100% точным для реального представления, поскольку это не делает фактический снимок экрана. Не для меня :(. - person Paweł Szymański; 04.08.2011
comment
тогда я считаю, что flash для вас coldfusion.se/devnet/air/flex /articles/air_screenrecording.html, но я сомневаюсь, что это позволит без труда это сделать на веб-странице, поскольку такой захват экрана может быть использован для злонамеренных действий и вторжения в частную жизнь. - person Vaibhav Garg; 05.08.2011
comment
@Pawel Szymański Google Feedback тоже не на 100% точен. Попробуйте добавить некоторые элементы списка (со значками по умолчанию), попробуйте подчеркивание текста в разных браузерах (например, FF по сравнению с Chrome) с большим размером шрифта (для лучшей видимости) или просто набором различных, более редких свойств CSS3. Вы обнаружите, что это тоже далеко не 100%, и если вы не хотите делать это изначально с помощью только Javascript, в настоящее время это единственный вариант. - person Niklas; 26.08.2011
comment
Для людей, приходящих сюда поздно ... теперь это можно сделать с помощью ... navigator.mediaDevices.getDisplayMedia({video: true}), затем const stream = await startCapture(); const track = stream.getVideoTracks()[0]; let imageCapture = new ImageCapture(track);, наконец, imageCapture.grabFrame(), и это возвращает обещание с растровым изображением. - person jscul; 28.04.2021

arrow_upward
15
arrow_downward

Мне нужно было сделать снимок div на странице (для написанного мной веб-приложения), который защищен JWT и очень интенсивно использует Angular.

Ни с одним из вышеперечисленных методов мне не повезло.

В итоге я взял внешний HTML нужного мне div, немного его почистил (*) и затем отправил на сервер, где я запустил wkhtmltopdf против него.

Это работает очень у меня.

(*) различные устройства ввода на моих страницах не отображались как проверенные или не имели своих текстовых значений при просмотре в pdf ... Поэтому я запускаю немного jQuery в html, прежде чем отправить его на рендеринг. пример: для элементов ввода текста - я копирую их .val () в атрибуты value, которые затем можно увидеть с помощью wkhtmlpdf

person Al Joslin    schedule 13.02.2016
comment
Вы можете использовать аналогичную технику, используя бесплатный HTML to Image JavaScipt API GrabzIt, вам просто нужно убедиться, что все ресурсы, CSS, Javascript, файлы изображений и т. д. на веб-странице HTML должны использовать абсолютные URL-адреса », тогда вы используете JavaScript, чтобы получить внешний HTML и передать его API GrabzIt. - person PHP Rocks; 11.05.2018