使用Javascript获取单页应用的屏幕截图

时间:2013-03-14 18:02:05

标签: javascript html screenshot webpage-screenshot

背景

我通过使用JS模拟用户输入来对我正在处理的应用程序运行UI测试。 JS在iframe上依次运行一堆鼠标和键盘触发器,测试的应用程序正在运行中,我可以观察休息时间。我想设置它,以便它可以定期截取当前状态的屏幕截图。

已经考虑

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

我看了http://html2canvas.hertzen.com/来截取屏幕截图,虽然它在大多数情况下都有用,但是当有很多CSS3和webfonts使用时它似乎有问题。

我也不能自由地使用服务器端方法,因为我正在处理单页骨干应用程序,并且它不存储基于URL的状态(大多数情况下)。

我甚至看过mozilla特定的background:-moz-element()属性,但是当您想要的页面位于iframe中时,这不起作用。

我认为最接近我需要的是phantomJS,它允许你操纵页面并截取屏幕截图。我想避免这种情况,因为我会使用该功能来查看测试,否则我正在运行它。

那么,有没有人知道我在这里可以使用的任何东西?它甚至可以是一个浏览器(Firefox或Chrome)专用,只要它在Windows上运行即可。它不需要在我的所有客户端上运行,所以即使我必须设置一个特殊的环境,只要屏幕截图可以通过JS保存(仅在Firefox或Chrome上,所以没有ActiveX)。

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

3 个答案:

答案 0 :(得分:4)

看起来你需要我们开发的产品。我们可以从单页应用程序(包括州)创建完全准确的屏幕截图。

查看http://usersnap.com

完全披露:我是Usersnap的联合创始人。

答案 1 :(得分:3)

最后和phantomJS一起去了。虽然html2canvas非常适合基本用法,但是当你有很多CSS3和webfonts时,它并不是很好。

phantomJS的稳定版本虽然有一些文档存在的webfonts问题 - https://code.google.com/p/phantomjs/issues/detail?id=592

幸运的是,该用户已经构建了一个支持字体的版本,开箱即用 - http://arunoda.me/blog/phantomjs-webfonts-build.html

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

答案 2 :(得分:1)

由于您可以使用需要特定浏览器的解决方案,因此您可以制作Chrome扩展程序,并使用Tab APIcaptureVisibleTab方法。

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