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

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

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

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

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

Спасибо

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

http://html2canvas.hertzen.com/

Ответ 4

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

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