恩惠

Question

我试过了：

节点webshot
phantomjs

我可以在本地进行，但我无法截取基于angularjs的其他网站的截图。

恩惠

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

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

一个随机服务器（或任何应该能够访问异地网站并截取它的屏幕截图。）

它只需要一个不可避免地拥有angularjs应用程序的URL并输出您希望在浏览器中看到的内容。

不需要是phantomjs或node-webshot。

更新1

截至昨晚，我正是这样做的。

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

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

enter image description here

更新2

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

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

更新3

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

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

Answer 1

你试过wkhtmltopdf吗？它附带了一个名为 wkhtmltoimage 的工具。它使用QtWebKit（WebKit渲染引擎的Qt端口）来呈现网页，并将结果转换为您选择的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: <uuf6429@gmail.com>

Answer 2

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

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

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

Answer 3

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

您需要一个heroku免费套餐服务来运行它。

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

Answer 4

Node-Webshot使用PhantomJS，而PhantomJS又使用了与AngularJS无法合作的QtWebkit。

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

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

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

特别严格的铃声是：

- 忽略-SSL-错误=真

- 本地至远程URL的访问=真

- 网络安全=假

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

恩惠

更新1

更新2

更新3

4 个答案: