Получение данных изображения элемента DOM

Возможно ли (стандартным JS или некоторыми расширениями браузера) получать данные изображения из элемента DOM?

Я думаю об использовании, например:

  • создать внеэкранный элемент DOM
  • динамически заполнять его содержимым с CSS-стилем
  • получить свои данные изображения
  • используйте данные изображения так или иначе:
    • в качестве фона (декоративный повторяющийся текст)
    • как маркер (unicode bullets)
    • как текстура WebGL (магия!)
    • ...

Можно ли это сделать? Было ли когда-нибудь предложение о чем-то подобном?

3 ответа

Единственный метод, о котором я могу думать, - это рендеринг элементов в объект canvas HTML5. Это трудно сказать по меньшей мере. Один из таких механизмов рендеринга, который я нашел с быстрым поиском google, можно найти по адресу: http://www.isogenicengine.com/2011/08/19/rendering-html-css-to-canvas/

Другие, очевидно, существуют, включая:

После рисования на холсте вы можете получить URL-адрес данных, который можно использовать для установки атрибута src изображений и css, и, скорее всего, WebGL Textures со следующим методом.

var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");

Кроме того, если вы настроили таргетинг на Firefox, у них есть проприетарная функция, которая делает именно то, что вы хотите. https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas


Используйте http://html2canvas.hertzen.com/, чтобы получить элемент на холсте, а затем http://www.nihilogic.dk/labs/canvas2image/, чтобы преобразовать его в URL-адрес "data:".


Возможно, вы захотите ознакомиться с библиотекой dom-to-image для части создания изображения вашего плана.

var parent = document.getElementById('my-node-parent');
var node = document.getElementById('my-node');
domtoimage.toPng(node).then(function (pngDataUrl) {
 parent.removeChild(node);
 for (var i = 0; i < 10; i++) {
 var img = new Image();
 img.src = pngDataUrl;
 parent.appendChild(img);
 }
});

Вот jsfiddle

licensed under cc by-sa 3.0 with attribution.