Использовать HTML5 Canvas для захвата части веб-страницы?

Question

Я знаю, что вы можете захватывать изображения из видеопотока HTML5 с помощью canvas и отображать их на странице.Что меня интересует, так это то, что вы можете использовать объект canvas для создания наложения поверх веб-страницы, а затем сделать снимок PNG этой страницы или ее части.инструменты путем добавления снимка экрана (на странице браузера), который затем может быть отправлен на удаленный сервер.

YouTrack делает это с помощью Java-апплета, но возможно ли это с современными методами HTML5?

Любые другие предложенные решения этой проблемы также приветствуются.

Answer 1

Вы можете «эмулировать» вид экрана, читая DOM и создавая изображение холста с использованием JavaScript.Взгляните на http://hertzen.com/experiments/jsfeedback/ и базовый сценарий html2canvas, чтобы получить представление о том, как вы можете сделать это с помощью исключительно Javascript (без плагинов или взаимодействия с сервером).

Answer 2

Об этом часто спрашивают.Краткий ответ: это невозможно сделать из соображений безопасности.

Более длинные ответы включают упоминание о функции drawWindow, которая есть только в FireFox, которая работает только локально (опять же, из соображений безопасности).В будущем это может работать, как только пользователь даст разрешение, как в случае современных Java-апплетов.В будущем это может быть даже частью спецификации, а не разовым делом, выполненным Mozilla.

Если вы чувствуете себя сумасшедшим, вы можете попытаться сделать весь HTML-рендеринг, возьмите дерево DOMдля страницы, и попытайтесь отрендерить его в Canvas.Это дурацкое поручение.

Answer 3

Этот скрипт позволяет делать «скриншоты» веб-страниц или их частей прямо в браузере пользователя.Снимок экрана основан на DOM и, как таковой, может не быть на 100% точным к реальному представлению, поскольку он не создает фактического снимка экрана, а создает снимок экрана на основе информации, доступной на странице.

http://html2canvas.hertzen.com/

Answer 4

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

Этот метод документирован и продемонстрирован на MDN .