將子元素綁定到父元素

Question

我正在為HTML5畫布對象編寫一個簡單的導出函數。 我創建了包含實際圖形的id ='infovis-canvaswidget'。 子元素是該圖形的所有標簽。 我可以使用以下內容來獲取canvas元素：

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

但是，這不會輸出標簽元素。 請查看附件的屏幕截圖，以了解DOM的組織。 有什么方法可以將子元素綁定到“ infovis-canvaswidget”，以便將它們也導出？

Answer 1

我很遺憾地說這，因為您似乎為此付出了很多努力，但您根本無法獲取純DOM元素的圖像數據，無論如何也無法直接獲取。

但這並不意味着您沒有選擇余地。 據我所知，您有兩個選擇，盡管兩者都涉及將標簽貼到畫布上，所以它們實際上只是目標相同的兩種方法。

您的第一個選擇是更改項目的功能（可能從根本上更改，因此可能很麻煩），以便將標簽直接呈現在畫布上。 這樣，當您從畫布上獲取圖像數據時，您的標簽將已經存在。

您的第二個選擇是，當您要獲取圖像數據時，以某種方式將DOM元素轉換為對象以在畫布上繪制。 html2canvas項目是您可能想要研究的項目，因為它實現了此技術，並且可能對您有所幫助。

祝好運！