javascript - 如何将 iframe 捕获为图像

Question

我的网页中有一个 iframe，我可以在其中动态加载网站。有没有办法只捕获 iframe 并将其保存为图像？如果不可能的话，是否可以使用JavaScript截取整个页面的屏幕截图？

Answer 1

由于其本质，网页并不是“截屏”的最佳选择；它们可以包含异步元素、框架或类似的东西，它们通常是响应式的等等......

就您的目的而言，最好的方法是使用外部 api 或外部服务，我认为尝试使用 JS 来实现这一点并不是一个好主意。

你应该尝试url2png

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

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

它也非常容易使用。这是一个例子:

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

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

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