如何将iframe捕获为图像

Question

我的网页中有一个iframe ，可以动态加载网站。 有什么方法可以仅捕获iframe并将其另存为图像吗？ 如果不可能，是否可以使用JavaScript截取整个页面的屏幕截图？

Answer 1

由于网页的性质，它们并不是最好的“屏幕快照”； 它们可以包括异步元素，框架或类似的东西，它们通常是响应式的等等。

为了您的目的，最好的方法是使用外部api或外部服务，我认为尝试使用JS并不是一个好主意。

你应该尝试url2png

或者使用html canvas执行此操作

查看html2canvas项目。 他们的方法是在画布内创建页面的表示形式。 他们没有制作实际的屏幕截图，而是根据页面上的内容和加载的样式表进行构建。 它可以用于整个身体或仅用于特定元素。

它也真的很容易使用。 这是一个例子：

 html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); } }); 

您可以相对轻松地使其适应您的代码。

看看他们的演示。 单击任何按钮，然后滚动到页面底部。

Answer 2

为了能够在iframe中使用html2canvas，您可能需要将其注入，然后从iframe上下文内部执行它。 以下内容可以帮助您实现这一目标： 将JavaScript函数注入iframe