用Javascript截取一个单页应用程序的屏幕截图

Taking a screenshot of a single page app in with Javascript

本文关键字：单页 一个 应用程序 屏幕截图 Javascript 截取      更新时间：2023-09-26

背景

我通过使用JS模拟用户输入，在我工作的应用程序上运行UI测试。JS在一个iframe上按顺序运行一堆鼠标和键盘触发器，在这个iframe中运行测试的应用程序，我可以观察休息时间。我想设置它，以便它可以定期拍摄当前状态的屏幕截图。

已考虑

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

我看过http://html2canvas.hertzen.com/截图，虽然它在大多数情况下都能工作，但当有很多CSS3和webfont使用时，它似乎会遇到麻烦。

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

我甚至查看了mozilla特定的background:-moz-element()属性，但当您想要的页面位于iframe中时，它就不起作用了。

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

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

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

最终使用了phantomJS。虽然html2canvas非常适合基本使用，但当你有很多CSS3和网络字体时，它就不会很好地使用了。

稳定版本的phantomJS在网络字体方面存在一些记录在案的问题https://code.google.com/p/phantomjs/issues/detail?id=592

值得庆幸的是，尽管这位用户已经构建了一个开箱即用的支持字体的版本——http://arunoda.me/blog/phantomjs-webfonts-build.html

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

由于您可以使用需要特定浏览器的解决方案，因此您可以进行Chrome扩展，并使用Tab API的captureVisibleTab方法。

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

来源：https://stackoverflow.com/a/4574782/2972

看看这个答案，了解如何从JavaScript调用扩展的信息：https://stackoverflow.com/a/8713547/2972

相关文章：