是否可以在网页中截取iframe的屏幕截图

Question

>我正在尝试在网页中截取iframe的屏幕截图。在我的特殊情况下，iframe 包含我的一个客户商店的街景。据我搜索和阅读，我没有找到任何解决方案。

我知道有像Html2Canvas和Canvas2Image这样的JavaScript库，但它们无法捕获iframe。

这是我正在研究的小提琴。

这些库与除 iframe 之外的每个 HTML 元素都能正常工作。

这是小提琴的JavaScript：

$(function() { 
        $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                var context=canvas.getContext("2d"); // returns the 2d context object
                // Convert and download as image 
                theCanvas = canvas;
                document.body.appendChild(canvas);
                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
});

是否存在捕获 iframe 的其他方法？是否有任何付费的第三方服务可以做到这一点？

如果没有什么可以与iframe一起使用，那么是否有任何替代方案可以实现我想要做的事情？

如果需要更多信息，请告诉我。

任何帮助将不胜感激。

提前致谢

Answer 1

如果您需要以编程的方式进行捕获，您可以选择将nodejs与puppeteer一起使用，puppeteer是一个使用chromium来模拟Web浏览器的库。我给你一个例子来捕捉屏幕：

const puppeteer = require('puppeteer');
async function run() {
    let browser = await puppeteer.launch({ headless: false });
    let page = await browser.newPage();
    await page.goto('https://www.scrapehero.com/');
    await page.screenshot({ path: './image.jpg', type: 'jpeg' });
    await page.close();
    await browser.close();
}
run();

这是我从中得到它的来源：https://www.scrapehero.com/how-to-take-screenshots-of-a-web-page-using-puppeteer/

Answer 2

有一个解决方案，当你使用html2canvas时，输入变量必须是HTMLElement，然后它将创建屏幕截图。旧浏览器(如IE9(也支持它，请查看文档：https://html2canvas.hertzen.com/documentation.html

import html2canvas from 'html2canvas';
screenShot() {
  const iframe = document.getElementsByTagName('iframe');
  const screen = iframe[0]?.contentDocument?.body;
  html2canvas(screen)
    .then((canvas) => {
      const base64image = canvas.toDataURL('image/png');
     // Do something with the image
  });
}

Answer 3

如果您只想截取屏幕截图，只需使用截图工具即可(但我想这不是您的情况(。

从编程的角度来看：

考虑到 iframe 在您的网站中加载了一个外部页面，您无法控制这一点。加载的页面代码不是源代码的一部分，并且您几乎无法控制它以进行编程方式进行广泛的编辑/功能。

如此处所述，您可以在 FF 中使用 iframe 的getScreenshot方法。这可能对您有用，但我想这对于一个简单的场景可能很有用，并且不能被视为用作功能的完整跨浏览器可分割性解决方案。

Answer 4

你不能，因为它们是单独的文档。实现这一目标的唯一方法是在打印之前操作页面的代码，以使iframe更大，但这必须手动完成，因为iframe的宽度和高度可能不是实际限制其大小的唯一页面元素。例如，iframe 可能位于其他几个具有固定大小的div 标签中。您还需要知道 iframe 中显示的内容的高度和宽度，以便知道将 iframe 的新大小调整为多大。

Answer 5

在浏览器中，使用与ugyanakkor解释的相同方法，dom-to-image-more现在支持同源和blob iframe支持(由我实现(。不过，它可能没有被放入 npm 注册表;如果是这样，那么将 dom-to-image-more.js 添加到您的代码中。