Javascript 如何比较两个iFrame并从视觉上获得差异？

案例：

我有两个iFrame，都有很多div和其他控件，所以两个iFrame都像HTML网站的中等大小。我想比较两者，找出不同之处

我认为这里有不同的选择：

解决方案1:拍摄2个iFrame的完整屏幕截图，并使用Python的pillow库比较两个屏幕截图，该库在屏幕截图中的不匹配区域绘制网格。但这里的问题是，我在互联网上找不到任何可以拍摄完整iframe屏幕截图的代码（我有一个带有滚动条的长iframe）。我尝试了几乎所有的答案，但都适用于普通页面，但不适用于iframe

参考：

解决方案2:以某种方式从两个iframe获取所有HTML代码并进行比较，但这并不容易分析结果，因为它会发现一些HTML代码不同或在两个iframe中不匹配。这更像是文本比较，我相信这不是一个好的解决方案

因此，我正在寻找可以使用Python或Javascript拍摄iframe完整屏幕截图的代码，或者可以比较2个iframe并找出差异的更好选项

我尝试了谷歌找到的几乎所有答案，如下所示：

这里给出了示例Iframe，其中整个html都在Iframe中：，如果一些代码可以获取此Iframe的完整屏幕截图，那么对我来说比较起来就很容易了。

正如我们在中发现的，讨论中的Iframe是用javascript生成的，而不是从URL加载的

这给自动抓取iframe屏幕带来了困难，但是可以手动进行：

在Firefox中，右键单击iframe并在弹出菜单中选择“此框架”，然后选择“将框架另存为…”

---

一旦框架被保存，一些下载的CSS将需要修改以使背景URL指向正确的位置。完成此操作后，在本地打开html文件，您将能够使用当前用于普通网页的方法进行屏幕截图。

您可以将pillow与pyautogui结合使用，也可以单独使用pyautogui

一些伪代码：

只要滚动条不接触底部： -截图 -将屏幕截图名称保存在列表中 -向下滚动，继续此循环

对第二个iframe再次执行上述循环

比较您生成的两个屏幕截图列表中的所有屏幕截图

好吧，我会这样做的。不过，可能还有更好的方法。

抓住屏幕的一部分 您可以手动或自动抓取它。如果没有太多的iFrame可供比较，则可以选择手动进行比较，您只需执行包含内容的屏幕截图，并在必要时裁剪图像。这种方法的困难在于裁剪时需要非常精确

您也可以自动执行此操作，例如，将DOM的一部分加载到画布中，并为其制作图片，如下所示：

此外，您可以临时修改内容，以确保整个页面是您感兴趣的内容，然后进行屏幕截图，如下所述：

比较两幅图像 您可以通过循环所有图像的像素并进行比较来比较两个图像

显示结果

---

您的程序应该将两个图像作为输入，并创建一个大小类似的新图像作为输出。我建议目标图像应显示其中一幅图像的像素进行比较，并在每个差异的边界处画一条红线。为此，您需要将差异区域划分为矩形。通过这种方式，您可以看到不同之处以及不同的内容。

使用html2canvas拍摄屏幕截图

html2canvas(document.getElementById("img_dots")).then(
  function (canvas2) {
    var img_data2 = canvas2.toDataURL('image/png');
    var im_data2 = img_data2.replace('data:image/png;base64,', '');
    $.ajax({
      type: "POST",
      url: "send_image_to_backend",
      data: {
        "base64data": im_data2,
        // "filename": filename.split(".")[0]
        "filename": new_filename + ".png"
      }, success: function () {
         //send second image and compare
      }
    });
  }
);

这将使您能够将图像发送到后端

使用线程调整html2canvas以获取整个图像

一旦你有了两个图像，你就可以使用openCV来找出两个图像之间的差异 你可参考以下资料—

我有两个iFrame，都有很多div和其他控件，所以两个iFrame都像HTML网站的中等大小。我想比较两者，找出不同之处

你想要什么？CSS规则/属性差异？数据/文本差异？还是视觉渲染

---

比较视觉渲染

---

您可以提取iframe URL并使用加载到加载页面。还有firefox扩展。

下面的所有iFrame都是普通的html页面。您是否特别希望看到它们作为iFrame是什么样子的？是的，所有都在html页面下。我的目标是确保两个iframe在视觉上看起来是一样的。那么打开iframe显示为顶级页面的页面和屏幕截图是否可以接受？我想可以，但这是怎么可能的，因为我尝试过的所有屏幕截图代码都可以截取任何页面的完整屏幕截图，但是当涉及到iframe时，它只截图的一部分是可见的，没有滚动。你有iframe URL，所以你可以打开它们作为顶级页面。问题是我只有一个iframe，但它是长的垂直，没有工具可以采取它的完整截图。你不需要一个长的截图。几个截图也会很好。只要你总是向下滚动相同的数量。所以基本上，你让你的iframe获得焦点。然后你按下向下箭头5次（或任何你需要的）并截图。你的截图中是否有一些双重内容并不重要。对于另一个iframe，您也可以这样做。谢谢您的回答。我是否有可能将Html2Canvas与python结合使用，因为我需要python或javascript中的一些东西，这些东西可以拍摄iframe的完整屏幕截图。@HelpingHands Html2Canvas是一个javascript工具，因此您可以通过javascript使用它（请参阅：）。在搜索HTML2Canvas的Python用法时，我发现了一个Python代理。我没有试过，但我希望能有帮助。给你