Get image data of a DOM element

dom, html, javascript

Solution

The only method I can think of would be rendering the elements to a HTML5 canvas object. Which is difficult to say the least. One such rendering engine I found with a quick google search can be found at: http://www.isogenicengine.com/2011/08/19/rendering-html-css-to-canvas/

Others obviously exist including:

- http://html2canvas.hertzen.com/

- http://ajaxian.com/archives/crazy-times-rendering-html-in-canvas

Once drawn to the canvas, you can retrieve a data url which can be used to set the `src` attribute of images and css, and most likely WebGL Textures with the following method.

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

Also, if you are targeting Firefox specifically they have a proprietary feature which does exactly what you want. https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

Problem

Is it possible (by standard JS or some browser extensions) to get the image data of a DOM element? I'm thinking of usage like: - create an offscreen DOM element - fill it with some CSS-styled content dynamically - get its image data - use the image data somehow: - as a background (decorative repeated text) - as a bullet-image (unicode bullets) - as a WebGL texture (magic!) - ... Can this be done? Was there ever a proposal for something like this?

Original source