如何将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上下文中执行它。以下内容可以帮助您实现这一目标： inject a javascript function into an Iframe