从 HTML 画布生成图像 +其他 HTML 元素

发布于 2024-11-08 04:39:05 字数 582 浏览 1 评论 0原文

我正在使用 JIT 库 中的 SpaceTree 插件。我正处于项目的最后阶段,使用 IE6 的可能性是一个死胡同,因此作为替代选项,将可视化转换为图像应该是可行的。

我使用了 canvas 的 toDataURL() 和新的 toBlob() 函数,但这只产生了一半的可视化效果 - 因为 SpaceTree 中的节点包含 HTML DOM 元素,例如 DIV、SPAN、IMG 等内容和样式。

我正在考虑使用 PHP 的 imagecopymerge 来叠加两个图像。第一个图像是画布内容(基本上是节点之间的连接线),第二个图像是 HTML 页面的捕获(内容通过 AJAX 和 JSON 动态加载)。

有谁知道如何生成动态加载的 HTML 页面图像,或者有其他建议吗?如果需要的话,我可以提供更多信息,例如屏幕截图和演示。

谢谢

I'm using the SpaceTree plugin from the JIT library. I'm in the final stages of a project and the possibility of using IE6 is a dead end, so as an alternative option, converting the visualisation to an image should be plausible.

I've used canvas's toDataURL() and the new toBlob() functions, but that only produces half of the visusalisation - as the nodes in the SpaceTree contain HTML DOM elements such as DIV, SPAN, IMG and so on for content and styling.

I'm thinking of using PHP's imagecopymerge to superimpose two images. One image being the canvas content (basically the connecting lines between nodes) and the second image being a capture of the HTML page (the content is dynamically loaded with AJAX & JSON).

Does anybody know how I can generate an image of a HTML page that has been dynamically loaded, or has any other suggestions? I can supply more information such as screenshots and a demo probably if need be.

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

瑶笙 2024-11-15 04:39:05

您无法生成 HTML 页面的图像。

事实上,该功能确实存在。仅在 FireFox 中,并且仅在离线时(即不在网页上)使用上下文的 drawWindow 方法。

此处的文档

从技术上讲还有其他方法:查看整个源代码并尝试根据您的期望自行渲染图像。但这并不容易。

You can't generate an image of an HTML page.

Actually the functionality does exist. Only in FireFox, and only when offline (ie not on a webpage) using the context's drawWindow method.

Documentation here

There are technically other ways: Look at the entire source and attempt to render an image on your own from what you'd expect it to look like. But that's not easy.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文