Как сделать снимок экрана приложения angularjs?

Я пробовал:

  • node -webshot
  • phantomjs

Я мог бы сделать это локально, но я не мог делать скриншоты других сайтов, основанных на angularjs.

Bounty

Возможность сделать снимок экрана любого приложения angularjs, которое включает jquery и angular на странице. Каждый отдельный сайт здесь: http://builtwith.angularjs.org/ должен выглядеть так, как если бы я загрузил его в свой браузер.

Должна иметь возможность получить скриншот через терминал, чтобы он мог запускаться в фоновом режиме, например, у рабочего или что-то в этом роде.

Один случайный сервер (или что-то еще должно быть на удаленном веб-сайте и сделать снимок экрана).

Просто нужно взять URL-адрес, который неизбежно будет размещать приложение angularjs и выводит то, что вы ожидаете увидеть в своем браузере.

Не нужно быть фантомами или node -webshot.

Обновление 1

С прошлой ночи я так и делаю.

  • node -webkit (nodejs внутри хрома), скомпилированный в linux-32
  • оставить открытым на случайном ноутбуке
  • когда он обнаруживает, что скриншот необходимо сделать (через firebase временно), он открывает iframe с этим URL
  • ждет 10 секунд (разумное время для загрузки сайта/приложения)
  • использует node -webkit api для самого скриншота

У меня есть работа над этим решением.

enter image description here

Обновление 2

Это, по-видимому, потенциальное решение, но я обнаружил, что большинство из этих решений требуют открытия браузера и снятия скриншотов по сравнению с безголовым браузером, таким как phantomjs.

Обновление 3

Я продолжаю разработку готового к выпуску решения для этого на github. https://github.com/clouddueling/angular-snapshot

Если вы возьмете этот код и построите его с помощью node -webkit.app, вы сможете запустить сервер скриншотов.

Ответы

Ответ 1

Используйте browserstack, чтобы протестировать ваше приложение во всех браузерах без необходимости установки каждого из них, включая мобильные браузеры, разные телефоны, планшеты и т.д..

Существует поддержка автоматического тестирования Selenium и screenshots. Локальное тестирование поддерживается, не требуется публичный URL.

скриншоты API доступен для настройки скриншотов, которые вам нужны, Screenshooter - это инструмент для создания скриншотов BrowserStack из командной строки.

Существует пробный период для этого, поскольку это коммерческий продукт, но он очень хорошо сделан и стоит каждого пенни. Вы можете подписаться на один месяц. Я лично пользовался, и я очень рекомендую его.

Ответ 2

Вы пробовали wkhtmltopdf? Он поставляется с инструментом wkhtmltoimage. Он использует QtWebKit (порт Qt механизма визуализации WebKit) для рендеринга веб-страницы и преобразует результат в формат 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:[email protected]: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]>

Ответ 3

Хотя лично я не пробовал это самостоятельно, я видел, что служба развернута в производстве, которая делает скриншоты с помощью Webdriver из Selenium.

  • Создайте веб-сервер селена https://code.google.com/p/selenium/
  • Используйте RESTful API для связи с сервером. Существуют специальные вызовы, где вы можете отправить запрос на выборку веб-сайта и сделать снимок экрана текущего экземпляра

все сделано в фоновом режиме, поэтому я думаю, что это соответствует вашему требованию.

Ответ 4

Вероятно, это поможет https://bitbucket.org/vodolaz095/site-shooter Это приложение nodejs + phantomjs для создания скриншотов сайта.

Для запуска этой функции вам понадобится услуга бесплатного уровня heroku.

Кстати, вы можете попробовать это приложение - https://pageshooter.herokuapp.com Я думаю, он может сделать скриншоты сайтов angularjs

Ответ 5

Node -Webshot использует PhantomJS, который, в свою очередь, использует QtWebkit, который не работает с AngularJS.

Дополнительная информация: https://github.com/angular/angular.js/issues/2985

Предложение. Убедитесь, что PhantomJS, который вы вложили в Node -Webshot, является абсолютно последней версией. Если нет, замените PhantomJS на последнюю версию и жертву для их исправления.

Если у вас есть доступ к параметрам командной строки PhantomJS, вы можете попробовать несколько из них здесь: https://github.com/ariya/phantomjs/wiki/API-Reference

В частности, для установки колокола:

- игнорировать-Ssl-ошибки = истина

- локально-дистанционного URL-доступа = истина

- веб-безопасность = ложь