Question

我正在尝试拍摄网页中iframe的屏幕截图。在我的特定情况下，iframe包含我的客户商店之一的街景视图。就我搜索和阅读而言，我没有找到任何解决方案。

我知道有Html2Canvas和Canvas2Image之类的JavaScript库，但是它们无法捕获iframe。

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

除了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

在Firefox中，您只需右键单击iframe，然后在上下文菜单中查找“仅显示此框架”之类的内容。这样只会为您提供Iframe的上下文，然后您可以轻松提取屏幕截图。否则，您只需要一些绘图程序即可仅选择所需的内容，例如“剪裁工具”。

Answer 2

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

从编程的角度来看：

请考虑iframe在您的网站内加载外部页面，您对此无能为力。加载的页面代码不是源代码的一部分，并且几乎没有控制权，无法以编程方式对其进行广泛的编辑/功能。

如here所述，您可以在FF中使用iframe的getScreenshot方法。这可能对您有用，但我想这可能对简单的情况很有用，不能视为功能完整的跨浏览器兼容性解决方案。

Answer 3

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

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 4

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

Answer 5

有一个解决方案，当你使用html2canvas时，输入变量必须是一个HTMLElement，然后它会创建截图。旧浏览器（如 IE9）也支持它，请查看文档：{{3}}

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
  });
}

是否可以在网页中拍摄iframe的屏幕截图？

5 个答案: