使用 Javascript 捕获呈现的 HTML 页面答案

【问题标题】：Capture rendered HTML page with Javascript使用 Javascript 捕获呈现的 HTML 页面
【发布时间】：2012-05-17 23:59:15
【问题描述】：

是否可以从 Javascript 中捕获呈现的 HTML 页面。

我希望能够创建 HTML 页面的“小地图”以便快速导航。

【问题讨论】：

你会比这更具体。可能有一种方法可以满足您的需求，但您必须先告诉我们您想要什么，然后我们才能提出建议……
@ElliotBonneville Grooveek 实际上设法回答了我的问题。但我基本上想要一个来自 js 的 HTML2image 函数

标签： javascript html bitmap capture

【解决方案1】：

wkhtmltoimage 仅用于静态 html 页面。如果您有用户选择或带有某些绘图的画布（第一次渲染时的默认值除外），wkhtmltoimage 将无济于事。

【讨论】：

【解决方案2】：

你可以使用：

document.body.innerHTML

这是整个“渲染”（即实时/DOM 完整）HTML，但我不确定这是您想要的。

您最好定义要创建地图的内容，例如标题等，然后您可以使用getElementsByTagName('h1')（例如）抓取页面上的所有 H1。

如果您谈论的是由浏览器呈现的实际图像，您可以查看 wkhtmltopdf 和它的 wkhtmltoimage 对应物，它将 HTML（或网址）作为输入并将其转换为到文本完整的 PDF 或静态图像。之前在大型项目中使用过这个简洁的应用程序，所以它绝对可靠，还使用 WebKit，因此与 CSS3/JS 兼容。

【讨论】：

我想要渲染，即像素。感谢您的回答。 :-)
@BentRasmussen 啊在这种情况下，wkhtmltoimage 绝对是你应该尝试的，如果你想要它当然是服务器端:)

【解决方案3】：

看看html2canvas 它做了一些好事，即使它并不完美

【讨论】：