Geek asks and answers

Getting image data of a DOM element

Is it possible (with standard JS or some browser extensions) to get image data from a DOM element?

I am thinking about using, for example:

  • create an offscreen DOM element
  • dynamically populate it with CSS-style content
  • get your image data
  • use image data anyway:
    • as a background (decorative repeating text)
    • as a marker (unicode bullets)
    • like a webgl texture (magic!)
    • ...

Can this be done? Has there ever been a proposal for something like this?

+3
source share
3 answers

, , - 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

+4

You might want to check out the dom-to-image library for the part of creating an image of your plan.

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);
    }
});

Here is jsfiddle

+1
source

More articles:


All Articles