获取DOM元素的图像数据

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

我想使用的一样：

创建一个屏幕外的DOM元素
一些CSS风格的内容填充动态
获取其图像数据
以某种方式使用的图像数据：
- 作为背景（装饰性重复文字）
- 作为子弹形象（unicode bullet S）
- 作为WebGL的质地（神奇！）
- ...

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

2012-04-13 Kos

你的意思是得到一个什么样的内容看起来像，并使用该屏幕截图作为编程图像“屏幕截图”？ – Tejs 2012-04-13 17:44:13

@Tejs是的，除了我通常不希望用户真正看到屏幕上的内容（直到我在其他地方展示它）。 – Kos 2012-04-14 06:26:01

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

其他存在明显的包括：

一旦吸引到画布上，你可以通过以下方法检索可用于设置图像和CSS以及最可能的WebGL纹理的src属性的数据url。另外，如果你专门针对Firefox，他们有一个专有功能，它完全符合你的需求。 https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

来源

2012-04-13 17:48:00

不要忘记用于IE <9兼容性的excanvas！无论如何，好的答案！ – jazzytomato 2012-04-13 18:27:57

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

来源

2012-04-13 17:49:57

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

来源

2015-10-02 14:41:14 tsayen

获取DOM元素的图像数据

回答

相关问题