使用Javascript拍摄单页应用程序的屏幕截图

背景

我通过使用JS模拟用户输入，在我处理的应用程序上运行UI测试。JS在一个iframe上按顺序运行一系列鼠标和键盘触发器，在这个iframe中测试的应用程序正在运行，我可以观察是否有中断。我想对它进行设置，以便它可以定期拍摄当前状态的屏幕截图

已考虑

我知道这是一个重复的问题，我现在再次问这个问题，以防最近在这个领域有任何进展

我已经看过了截图，虽然它在大多数情况下都能正常工作，但当大量使用CSS3和webfonts时，它似乎遇到了问题

我也不能自由地使用服务器端方法，因为我正在开发一个单页主干应用程序，它不存储基于URL的状态（大部分情况下）

我甚至还查看了mozilla特有的

background:-moz-element（）

属性，但当您想要的页面位于iframe中时，该属性不起作用

我认为最接近我需要的是phantomJS，它允许你操作页面并截图。我希望避免这种情况，因为我会在运行测试时使用这种能力来查看它

那么，有人知道我在这里可以用什么吗？它甚至可以是一个浏览器（Firefox或Chrome）独有的，只要它运行在windows上。它不需要在所有客户机上运行，只需要在我的客户机上运行，所以即使我必须设置一个特殊的环境，只要屏幕截图可以通过JS保存就可以了（不过只在Firefox或Chrome上运行，所以没有ActiveX）

TL；DR

---

需要Javascript或HTML5API来保存在iframe中运行的应用程序的屏幕截图。请不要付费解决方案

既然您可以使用需要特定浏览器的解决方案，您可以制作一个Chrome扩展，并使用的方法

资料来源：

---

看看这个答案，了解如何从JavaScript调用扩展：

最后使用了phantomJS。虽然html2canvas对于基本用法来说很好，但是当你有很多CSS3和webfonts时，它就不能很好地使用了

phantomJS的稳定版本在webfonts方面有一些记录在案的问题-

谢天谢地，尽管该用户已经构建了一个具有字体支持的版本，但它是开箱即用的-

---

另外，值得注意的是，如果您从自己的服务器（本地）提供web字体，它可能仍然会失败。切换到谷歌托管的url通常会解决这个问题。可能与内容类型有关

看来您需要的正是我们开发的产品。我们可以从单个页面应用程序（包括状态）创建完全准确的屏幕截图

看看

---

全面披露：我是Usersnap的联合创始人。

问题中的

是否在同一个域中？是否有帮助？它看起来是可以编写脚本的，但我没有看到示例。@couzzi是的，两者都运行在同一个域上。必须这样才能绕过所有的JSsrestrictions@patrickmdnet谢谢，我已经看过了，但它看起来没有外部API。我自己可能更容易为chrome创建一个简单的扩展，将屏幕截图保存在触发器上。嗯，这可能是一种方法。我必须研究是否可以捕获选项卡内显示的iframe。谢谢，我确实查看了您的服务，但我需要一个免费的解决方案，我可以在自己的框中运行。和幻影一起去。

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // You can add that image HTML5 canvas, or Element.
});