Question

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

我想的用法如下：

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

可以这样做吗？有没有这样的建议？

Answer 1

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

找到

其他显然存在，包括：

一旦绘制到画布，您就可以检索一个数据网址，该网址可用于设置图像和css的src属性，并且很可能使用以下方法设置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/将其转换为“data：”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

获取DOM元素的图像数据

3 个答案: