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

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

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

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

  • Службы BrowserShots аналогичны...
  • Механизированные браузеры...
  • wkhtmltoimage...
  • Python WebKit2PNG...

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

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

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

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

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

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

Feedback/report bug example

ОТВЕТЫ

Ответ 2

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

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

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

Это работает очень хорошо для меня.

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

Ответ 3

SnapEngage предоставляет эту услугу с помощью Java-апплета. Вы можете использовать свой продукт Snapabug или воссоздать их функциональность, используя информацию . Вы также можете прочитать об этом здесь.