将子元素绑定到父元素

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 project是您可能想要查看的内容，因为它实现了这种技术并可能会帮助您。

祝你好运！