javascript 你如何截取 angularjs 应用程序的屏幕截图？

How do you take a screenshot of an angularjs app?

提问by Michael J. Calkins

I've tried:

我试过了：

• node-webshot
• phantomjs

• 节点网络截图
• 幻象

I could do it locally but I couldn't take screenshots of other websites that are based on angularjs.

我可以在本地完成，但我无法截取基于 angularjs 的其他网站的屏幕截图。

Bounty

赏金

Be able to take a screenshot of any angularjs app which includes jquery and angular on the page. Every single site here: http://builtwith.angularjs.org/should look as if I loaded it in my browser.

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

Must be able to get the screenshot via the terminal so it could be run in a background process like a worker or something.

必须能够通过终端获取屏幕截图，以便它可以在后台进程中运行，例如工作人员或其他东西。

One random server (or whatever should be able to go to an offsite website and take a screenshot of it.)

一个随机服务器（或任何应该能够访问异地网站并对其进行截图的服务器。）

It just needs to take an url that will inevitably host an angularjs app and output what you'd expect to see in your browser.

它只需要获取一个 url，该 url 将不可避免地托管一个 angularjs 应用程序并输出您希望在浏览器中看到的内容。

Does not need to be phantomjs or node-webshot.

不需要是 phantomjs 或 node-webshot。

Update 1

更新 1

As of last night this is how I'm doing it.

截至昨晚，这就是我的做法。

• node-webkit (nodejs inside of chromium) compiled to linux-32
• leave open on a random laptop
• when it detects a screenshot needs to be taken (via firebase temporarily) it opens a iframe with that url
• waits 10 seconds (reasonable time to load a site/app)
• uses node-webkit api to screenshot itself

• 编译为 linux-32 的 node-webkit（chrome 中的 nodejs）
• 在随机笔记本电脑上保持打开状态
• 当它检测到需要截取屏幕截图（暂时通过 firebase）时，它会打开一个带有该 url 的 iframe
• 等待 10 秒（加载站点/应用程序的合理时间）
• 使用 node-webkit api 自己截图

I have some work to do on this solution.

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

Update 2

更新 2

This appears to be a potential solution but I've found that most of these solutions require opening a browser and taking the screenshot versus a headless browser like phantomjs.

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

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

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

Update 3

更新 3

I'm continuing development on a production ready solution for this on github. https://github.com/clouddueling/angular-snapshot

我正在 github 上继续为此开发一个生产就绪的解决方案。 https://github.com/clouddueling/angular-snapshot

If you take this code and build it with node-webkit.app you will be able to run a screenshot server.

如果您使用此代码并使用 node-webkit.app 构建它，您将能够运行屏幕截图服务器。

采纳答案by Angular University

Use browserstackto test your application in all browsers without having to install each one, including mobile browsers, different phones, tablets, etc.

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

There is support for Selenium automated testing and screenshots. Local testingis supported, no public URL is needed.

支持 Selenium 自动化测试和截图。支持本地测试，不需要公共 URL。

The screenshots APIis available for configuring the screenshots you need, Screenshooteris a a tool for generating BrowserStack screenshots from the command line.

该截图API可用来配置你需要的截图，Screenshooter是在命令行中生成BrowserStack截图AA工具。

There is a trial period for this as it's a commercial product, but it's very well made and worth every penny. You can subscribe for only one month. I have used personally and I highly recommend it.

由于它是商业产品，因此有一个试用期，但它制作精良，值得每一分钱。您只能订阅一个月。我个人使用过，我强烈推荐它。

回答by Dan7

Have you tried wkhtmltopdf? It comes with a tool called wkhtmltoimage. It uses QtWebKit (A Qt port of the WebKit rendering engine) to render a web page, and converts the result to PDF or image format of your choice, all done at server side.

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

Because it uses WebKit, it renders everything (images, css and even javascript) just like a modern browser does. You can fine tune the parameters such as tweaking the JavaScript execution grace period.

因为它使用 WebKit，所以它可以像现代浏览器一样呈现所有内容（图像、css 甚至 javascript）。您可以微调参数，例如调整 JavaScript 执行宽限期。

In my use case, the results have been very satisfying and are almost identical to what browsers would render.

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

Here's a list of command options:

以下是命令选项列表：

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: <[email protected]>

回答by leorex

Although not personally tried it myself, I have seen service deployed in production that takes screenshots using Webdriver from Selenium.

虽然我自己没有亲自尝试过，但我已经看到部署在生产中的服务使用 Selenium 的 Webdriver 截取屏幕截图。

1. Build the selenium Webdriver https://code.google.com/p/selenium/
2. Use the RESTful APIto communicate with the server. There are specific calls where you can issue request to fetch a website, and take a screenshot of the current instance

1. 构建 selenium Webdriver https://code.google.com/p/selenium/
2. 使用RESTful API与服务器通信。有一些特定的调用，您可以在其中发出获取网站的请求，并截取当前实例的屏幕截图

everything is done in the background, so I think it fits your requirement.

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

回答by vodolaz095

Probably this will help https://bitbucket.org/vodolaz095/site-shooterThis is nodejs+phantomjs application to make site screenshots

可能这会有所帮助https://bitbucket.org/vodolaz095/site-shooter这是用于制作网站截图的 nodejs+phantomjs 应用程序

You need a heroku free tier service to run this.

你需要一个 heroku 免费层服务来运行它。

BTW, you can try this application - https://pageshooter.herokuapp.comi think it can make screenshots of angularjs sites

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

回答by Jani Hyyti?inen

Node-Webshot uses PhantomJS which in turn uses QtWebkit which doesn't work with AngularJS.

Node-Webshot 使用 PhantomJS，而 PhantomJS 又使用 QtWebkit，而 QtWebkit 不适用于 AngularJS。

More info: https://github.com/angular/angular.js/issues/2985

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

Suggestion. Make sure the PhantomJS you have bundled within Node-Webshot is absolutely the latest version. If not, replace the PhantomJS with the latest version and prey for them to have fixed it by now.

建议。确保您在 Node-Webshot 中捆绑的 PhantomJS 绝对是最新版本。如果没有，请将 PhantomJS 替换为最新版本，并让他们现在已经修复它。

If you have access to the command line options of PhantomJS, you could try a few of them in here: https://github.com/ariya/phantomjs/wiki/API-Reference

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

The ones particularly riging the bell are:

那些特别敲钟的是：

--ignore-ssl-errors=true

--ignore-ssl-errors=true

--local-to-remote-url-access=true

--local-to-remote-url-access=true

--web-security=false

--web-security=false