javascript - 获取 DOM 元素的图像数据

Question

是否有可能（通过标准 JS 或某些浏览器扩展）获取 DOM 元素的图像数据？

我正在考虑这样的用法：

• 创建一个离屏 DOM 元素
• 用一些 CSS 样式的内容动态填充它
• 获取其图像数据
• 以某种方式使用图像数据：
  • 作为背景（装饰性重复文字）
  • 作为子弹图像（unicode 子弹）
  • 作为 WebGL 纹理（神奇！）
  • ...

这可以做到吗？有过这样的提议吗？

Answer 1

我能想到的唯一方法是将元素渲染到 HTML5 画布对象。至少很难说。我通过快速谷歌搜索找到的一个这样的渲染引擎可以在以下位置找到：http ://www.isogenicengine.com/2011/08/19/rendering-html-css-to-canvas/

其他显然存在，包括：

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

绘制到画布后，您可以使用以下方法检索可用于设置src图像和 css 的属性的数据 url，并且很可能是 WebGL 纹理。

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

Answer 2

使用http://html2canvas.hertzen.com/获取画布上的元素，然后使用http://www.nihilogic.dk/labs/canvas2image/将其转换为“数据：” URL。

Answer 3

您可能想查看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