2012-04-23 219 views
1

我正在爲HTML5畫布對象編寫簡單的導出函數。我創建了包含實際繪圖的id ='infovis-canvaswidget'。子元素是該圖形的所有標籤。我可以通過以下方式獲取畫布元素:將子元素綁定到父元素

var ele = document.getElementById("infovis-canvas"); 
var dataUrl = ele.toDataURL("image/png"); 
window.open(dataUrl, "toDataURL() image", "width=500, height=500"); 

但是,那不會輸出標籤元素。請參閱附件截圖瞭解DOM組織。有沒有辦法將子元素綁定到'infovis-canvaswidget',以便這些元素也可以導出? screenshot

回答

0

我很抱歉地說,因爲看起來您已經付出了相當多的努力,但您無法直接獲取純DOM元素的圖像數據。

這並不意味着你沒有選擇。據我所見,你有兩個選擇,雖然都涉及到你的標籤到畫布上,所以他們實際上只是兩個具有相同目標的方法。

您的第一個選擇是從根本上更改您的項目—的功能,所以這可能很痛苦—,以便您的標籤直接呈現在畫布上。這樣,當您從畫布獲取圖像數據時,您的標籤已經存在。

您的第二個選擇是以某種方式將您的DOM元素轉換爲對象以在您想獲取圖像數據時在畫布上繪製。 html2canvas project是你可能想要看的東西,因爲它實現了這種技術,可能會幫助你。

祝你好運!