1

我正在为 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”，这样它们也会被导出？截屏

4

1 回答 1

0

我很抱歉这么说，因为看起来您已经为此付出了相当多的努力，但是您根本无法获取纯 DOM 元素的图像数据，无论如何也不能直接获取。

但这并不意味着你没有选择。据我所知，您有两种选择，尽管两者都涉及将标签放到画布上，因此它们实际上只是具有相同目标的两种方法。

您的第一个选择是更改项目的功能——可能从根本上改变这可能会很痛苦——这样你的标签就会直接呈现在画布上。这样，当您从画布中获取图像数据时，您的标签就已经存在了。

您的第二个选择是以某种方式将您的 DOM 元素转换为对象以在您想要获取图像数据时在画布上绘制。html2canvas 项目是您可能想要查看的东西，因为它实现了这种技术并且可以帮助您。

祝你好运！

于 2012-04-23T18:24:08.583 回答