獲取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元素的圖像數據

回答

相關問題