你如何截取一个angularjs应用程序的截图？

我试过了：

• 节点webshot
• phantomjs

我可以在本地做，但我不能截取基于angularjs的其他网站的截图。

赏金

能够截取页面上包含jquery和angular的任何angularjs应用程序的截图。 这里的每一个网站： http : //builtwith.angularjs.org/应该看起来像我在我的浏览器中加载它。

必须能够通过terminal获取屏幕截图，以便可以像工作人员或其他人一样在后台进程中运行。

一个随机的服务器（或任何应该能够去异地的网站，并截图。）

它只需要一个URL，将不可避免地托pipe一个angularjs应用程序，并输出你期望在浏览器中看到的。

不需要是phantomjs或node-webshot。

更新1

截至昨晚，这是我如何做到这一点。

• node-webkit（铬中的nodejs）编译成linux-32
• 随机的笔记本电脑上打开
• 当它检测到截图需要采取（通过火力点暂时）它打开一个iframe与该url
• 等待10秒（合理时间加载网站/应用程序）
• 使用node-webkit api来自己截图

我有一些工作要做这个解决scheme。

更新2

这似乎是一个潜在的解决scheme，但我发现这些解决scheme大多需要打开一个浏览器，并采取屏幕截图像​​一个像phantomjs的无头浏览器。

• http://browsershots.org/documentation#HowToCreateANewScreenshotFactory
• Browserstack.com

更新3

我正在继续在github上为这个产品准备好的解决scheme进行开发。 https://github.com/clouddueling/angular-snapshot

如果您使用此代码并使用node-webkit.app构build它，则可以运行截图服务器。

Answer 1

使用浏览器在所有浏览器中testing您的应用程序，而无需安装每个浏览器，包括移动浏览器，不同的手机，平板电脑等。

有对Selenium自动化testing和截图的支持 。 支持本地testing ，不需要公共URL。

屏幕截图API可用于configuration您需要的屏幕截图， Screenshooter是从命令行生成BrowserStack屏幕截图的工具。

这是一个试用期，因为这是一个商业产品，但它制作得很好，值得每一分钱。 您只能订阅一个月。 我个人使用，我强烈推荐它。

Answer 2

你有没有尝试过wkhtmltopdf ？ 它带有一个名为wkhtmltoimage的工具。 它使用QtWebKit（WebKit渲染引擎的Qt端口）来渲染网页，并将结果转换为您select的PDF或图像格式，全部在服务器端完成。

因为它使用WebKit，它就像现代浏览器一样呈现一切（图像，CSS，甚至JavaScript）。 您可以微调参数，例如调整JavaScript执行宽限期。

在我的用例中，结果非常令人满意，几乎与浏览器渲染的结果完全相同。

这是一个命令选项列表：

Name: wkhtmltoimage 0.11.0 rc2 Synopsis: wkhtmltoimage [OPTIONS]... <input file> <output file> Description: Converts an HTML page into an image, General Options: --allow <path> Allow the file or files from the specified folder to be loaded (repeatable) --checkbox-checked-svg <path> Use this SVG file when rendering checked checkboxes --checkbox-svg <path> Use this SVG file when rendering unchecked checkboxes --cookie <name> <value> Set an additional cookie (repeatable) --cookie-jar <path> Read and write cookies from and to the supplied cookie jar file --crop-h <int> Set height for croping --crop-w <int> Set width for croping --crop-x <int> Set x coordinate for croping --crop-y <int> Set y coordinate for croping --custom-header <name> <value> Set an additional HTTP header (repeatable) --custom-header-propagation Add HTTP headers specified by --custom-header for each resource request. --no-custom-header-propagation Do not add HTTP headers specified by --custom-header for each resource request. --debug-javascript Show javascript debugging output --no-debug-javascript Do not show javascript debugging output (default) --encoding <encoding> Set the default text encoding, for input -H, --extended-help Display more extensive help, detailing less common command switches -f, --format <format> Output file format --height <int> Set screen height (default is calculated from page content) (default 0) -h, --help Display help --htmldoc Output program html help --images Do load or print images (default) --no-images Do not load or print images -n, --disable-javascript Do not allow web pages to run javascript --enable-javascript Do allow web pages to run javascript (default) --javascript-delay <msec> Wait some milliseconds for javascript finish (default 200) --load-error-handling <handler> Specify how to handle pages that fail to load: abort, ignore or skip (default abort) --disable-local-file-access Do not allowed conversion of a local file to read in other local files, unless explecitily allowed with --allow --enable-local-file-access Allowed conversion of a local file to read in other local files. (default) --manpage Output program man page --minimum-font-size <int> Minimum font size --password <password> HTTP Authentication password --disable-plugins Disable installed plugins (default) --enable-plugins Enable installed plugins (plugins will likely not work) --post <name> <value> Add an additional post field (repeatable) --post-file <name> <path> Post an additional file (repeatable) -p, --proxy <proxy> Use a proxy --quality <int> Output image quality (between 0 and 100) (default 94) --radiobutton-checked-svg <path> Use this SVG file when rendering checked radiobuttons --radiobutton-svg <path> Use this SVG file when rendering unchecked radiobuttons --readme Output program readme --run-script <js> Run this additional javascript after the page is done loading (repeatable) --disable-smart-width Use the specified width even if it is not large enough for the content --enable-smart-width Extend --width to fit unbreakable content (default) --stop-slow-scripts Stop slow running javascripts (default) --no-stop-slow-scripts Do not Stop slow running javascripts --transparent Make the background transparent in pngs --user-style-sheet <url> Specify a user style sheet, to load with every page --username <username> HTTP Authentication username -V, --version Output version information an exit --width <int> Set screen width, note that this is used only as a guide line. Use --disable-smart-width to make it strict. (default 1024) --window-status <windowStatus> Wait until window.status is equal to this string before rendering page --zoom <float> Use this zoom factor (default 1) Specifying A Proxy: By default proxy information will be read from the environment variables: proxy, all_proxy and http_proxy, proxy options can also by specified with the -p switch <type> := "http://" | "socks5://" <serif> := <username> (":" <password>)? "@" <proxy> := "None" | <type>? <sering>? <host> (":" <port>)? Here are some examples (In case you are unfamiliar with the BNF): http://user:password@myproxyserver:8080 socks5://myproxyserver None Contact: If you experience bugs or want to request new features please visit <http://code.google.com/p/wkhtmltopdf/issues/list>, if you have any problems or comments please feel free to contact me: <[e-mail]> 

Answer 3

虽然没有亲自尝试过，但是我看到服务部署在使用Selenium的Webdriver截图的生产环境中。

1. build立seleniumWebdriver https://code.google.com/p/selenium/
2. 使用RESTful API与服务器通信。 有特定的调用，您可以发出请求来获取网站，并截取当前的实例

一切都在后台完成，所以我认为它符合你的要求。

Answer 4

也许这将有助于https://bitbucket.org/vodolaz095/site-shooter这是nodejs + phantomjs应用程序，使网站截图

您需要一个heroku免费套餐服务来执行此操作。

顺便说一句，你可以尝试这个应用程序 – https://pageshooter.herokuapp.com我认为它可以使angularjs网站的截图

Answer 5

Node-Webshot使用PhantomJS，后者使用QtWebkit，而不能与AngularJS一起使用。

更多信息： https ： //github.com/angular/angular.js/issues/2985

build议。 确保Node-Webshot中绑定的PhantomJS绝对是最新版本。 如果没有，用最新的版本replacePhantomJS，猎物现在已经修好了。

如果你有权访问PhantomJS的命令行选项，你可以在这里尝试一些： https ： //github.com/ariya/phantomjs/wiki/API-Reference

特别是钟声的人是：

– 忽略SSL的错误=真

–local到远程-URL的访问=真

–web安全=假