Javascript 获取DOM元素的图像数据

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

我想到的用法是：

• 创建屏幕外的DOM元素
• 动态填充一些CSS样式的内容
• 获取其图像数据
• 以某种方式使用图像数据：
  • 作为背景（装饰性重复文本）
  • 作为项目符号图像（unicode项目符号）
  • 作为WebGL纹理（神奇！）

---

这能做到吗？有没有这样的建议？

我能想到的唯一方法是将元素渲染到HTML5画布对象。这一点很难说。我通过快速谷歌搜索找到的一个这样的渲染引擎可以在以下位置找到：

其他明显存在的问题包括：

绘制到画布后，可以检索数据url，该url可用于设置图像和css的

src

属性，最有可能的是使用以下方法设置WebGL纹理

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

另外，如果你是专门针对Firefox的，他们有一个专有的功能，这正是你想要的。

---

用于获取画布上的元素，然后将其转换为“数据：”URL。

您可能需要查看库以了解计划中的图像生成部分

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

var parent=document.getElementById（'my-node-parent'）；
var node=document.getElementById（'my-node'）；
toPng（节点）.then（函数（pngdataur）{
parent.removeChild（节点）；
对于（变量i=0；i<10；i++）{
var img=新图像（）；
img.src=pngdataul；
父母、子女（img）；
}
});

---

这里是

你的意思是获取该内容的“屏幕截图”，并以编程方式将该屏幕截图用作图像？@Tejs是的，但我通常不希望用户在屏幕上看到该内容（除非我在其他地方展示）。别忘了IE的excanvas