获取DOM元素的图像数据

Question

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

我考虑的用途是：

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

这可以实现吗？曾经有过类似的提议吗？

- Kos

---

你的意思是获取那个内容的“屏幕截图”，并将该截图作为图像进行编程处理？ - Tejs

@Tejs 是的，除了通常情况下我不希望用户实际在屏幕上看到内容（直到我在其他地方呈现它）。 - Kos

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

一旦绘制到画布上，您可以检索数据URL，该URL可用于设置图像和CSS的src属性，并且很可能使用以下方法设置WebGL纹理。

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

另外，如果你想要针对Firefox浏览器进行开发，他们有一项专有功能可以完全满足你的需求。 https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

- Randy the Dev

---

不要忘记在IE<9兼容性中使用excanvas！无论如何都是一个好答案！！ - jazzytomato

Answer 2

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

- Oleg V. Volkov

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。

- tsayen

---

这个问题和我来到这里的原因是一样的。我有一个函数，它接受一个图像URL并返回DataURL，但是在从URL检索图像时遇到了“访问图像”CORS错误。但是浏览器已经加载了图像，我只想从DOM元素本身获取图像数据（这几乎是原文提出的问题）。然而，domtoimage生成了一个“访问XMLHttpRequest”CORS错误，所以它是从服务器获取图像数据，而不是客户端的DOM元素/缓存。 - Travis Bemrose