Рендеринг HTML в Canvas/WebGL

Можно ли отображать HTML-элементы в Canvas или WebGL? (подобно тому, как можно нарисовать текстуру видеоэлемента в WebGL)

Ответ 1

Есть попытка, которая может сделать работу около 80%. Невозможно отобразить выпадающий список, кнопки и еще несколько, но в основном отображаются элементы страницы.

Смотрите и скачайте его здесь.

http://html2canvas.hertzen.com/

также

http://hertzen.com/experiments/jsfeedback/

Ответ 2

Нет, в настоящее время это невозможно, еще нет. Но планируется включить эту функциональность, как указано в видео из третьего лагеря WebGL (около 6:44).

Ответ 3

Вы также можете проверить http://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html

Это может вызвать ошибку безопасности в Chrome, но отлично работает в Firefox.

Ответ 4

Используйте эту библиотеку https://github.com/PixelsCommander/HTML-GL, так же просто, как обернуть свой контент тегом <html-gl>.

Ответ 5

Я просто подумал, что я бы добавил, почему.

Это та же проблема, что и грязные холсты и временная атака, которая была исправлена вскоре после отправки WebGL

С холстом 2d вы можете рисовать изображения в холсте с помощью ctx.drawImage(someImage, ...); Проблема связана с изображениями с перекрестными доменами. Обычно JavaScript не может читать пиксели внутри изображения. Он может читать пиксели внутри холста. Таким образом, чтобы получить пиксели от изображения, вы сначала рисуете изображение на холсте, затем читаете пиксели с холста ctx.getImageData(...)

Это проблема безопасности для междоменных образов (изображений из доменов, отличных от домена страницы).

Решение для холста 2d - это тот момент, когда вы рисуете изображение с перекрестным доменом в холст 2d, который может быть помечен как внутреннее, а оба ctx.getImageData и canvas.toDataURL будут вызывать ошибку безопасности.

Первоначально WebGL следовал тому же правилу. Если вы назовете gl.texImageXXX с изображением кросс-домена или грязным холстом, холст webgl будет помечен как грязный, а gl.readPixels, а также canvas.toDataURL не будет работать.

Умные люди отметили, что в случае с WebGL этого было недостаточно, потому что даже если бы вы не могли назвать gl.readPixels, вы могли бы создать шейдер, который занимает больше времени, основываясь на цветах текстур, к которым он обращается. Используя это, вы можете время, затрачиваемое на доступ к пикселям текстуры, и эффективное восстановление содержимого изображения.

Решение заключалось в том, что по умолчанию WebGL не разрешает перекрестные изображения. Вместо этого вы должны запросить разрешение CORS (перекрестный источник ресурса) с другого сервера. Только если он предоставляет разрешение, WebGL может использовать изображение.

Хорошо, ведь, надеюсь, вы можете понять, почему вы не можете отображать HTML в WebGL. Если вы можете отобразить HTML-холст, вы можете использовать приведенные выше методы для чтения содержимого этого HTML-кода, включая встроенные фреймы и т.д., Грязные холсты, изображения из других доменов и т.д.