如何将iframe捕获为图像

Question

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

Answer 1

网页由于其性质而不是最好的“截屏”内容。它们可以包括异步元素，框架或类似的东西，它们通常是响应式的等等。

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

你应该尝试url2png

或者使用html canvas来做到这一点

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

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

html2canvas(document.body, {

  onrendered: function(canvas) {

    document.body.appendChild(canvas);

  }

});

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

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