Wie macht man einen screenshot einer angularjs-app?

Ich versucht habe:

Knoten-webshot
phantomjs

Konnte ich es lokal, aber ich konnte nicht nehmen Sie screenshots von anderen Webseiten basierend auf angularjs.

Bounty

In der Lage sein einen screenshot von jedem angularjs-app, die enthält jquery und Winkel auf der Seite. Jede einzelne Seite hier: http://builtwith.angularjs.org/ sollte Aussehen, als ob ich lud Sie in mein browser.

Muss in der Lage sein zu Holen Sie sich die Abbildung über das terminal, damit könnte es laufen in einem hintergrund-Prozess, wie ein Arbeiter oder so etwas.

Einem beliebigen server (oder was auch immer sollte in der Lage sein zu gehen, um ein offsite-website und nehmen Sie einen screenshot davon.)

Es braucht nur eine url, die unweigerlich als host für eine angularjs-app und Ausgabe, was Sie erwarten würden, um zu sehen, in Ihrem browser.

Nicht brauchen, um phantomjs oder Knoten-webshot.

Update 1

Als der Letzte Nacht das ist, wie ich bin, es zu tun.

node-webkit (nodejs innen Chrom) kompiliert, um linux-32
offen lassen, auf eine zufällige laptop
wenn es feststellt, dass ein screenshot gemacht werden muss (über FB vorübergehend) es öffnet sich ein iframe mit url
wartet 10 Sekunden (angemessene Zeit, um eine Website zu laden/app)
nutzt eine node-webkit api screenshot selbst

Habe ich einige Arbeit zu tun auf diese Lösung.

Wie macht man einen screenshot einer angularjs-app?

Update 2

Dies scheint eine mögliche Lösung, aber ich habe festgestellt, dass die meisten dieser Lösungen benötigen Sie einen browser öffnen und unter der Abbildung im Vergleich zu einem headless browser wie phantomjs.

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

Update 3

Ich bin weiterhin der Entwicklung auf eine produktionstaugliche Lösung für diese auf github.
https://github.com/clouddueling/angular-snapshot

Wenn Sie diesen code und bauen ihn mit node-webkit.app, die Sie ausführen können, um einen screenshot server.

Ist Knoten-webshot eine Voraussetzung, oder ist jede alternative, die erstellt screenshots programmgesteuert eine praktikable Lösung?
Vorzugsweise würde ich in der Lage zu ergreifen, ein Skript und führen Sie es einfach in den hintergrund. Keine verrückten Sprachen brauchen nur einen einfachen Weg, um dieses problem zu lösen mit javascript. Muss nicht sein, basierend auf phantomjs, ich brauche nur eine einfache Möglichkeit um einen screenshot aus einem Terminalprogramm (hoffentlich node oder ruby oder etwas gemeinsames).

InformationsquelleAutor Michael J. Calkins | 2013-12-12

2

Verwenden browserstack um Ihre Anwendung zu testen in allen Browsern ohne Installation von jedem, einschließlich mobile Browser, verschiedene Handys, tablets, etc.

Gibt es Unterstützung für die Selenium-automatisiertes testen und screenshots. Lokales testen unterstützt wird, keine öffentliche URL ist erforderlich.

Den screenshots API ist verfügbar für die Konfiguration der screenshots, die Sie brauchen, Screenshooter ist ein Werkzeug zur Erzeugung von BrowserStack screenshots von der Kommandozeile aus.

Gibt es eine Probezeit, da es sich um ein kommerzielles Produkt, aber es ist sehr gut gemacht und jeden Cent Wert. Sie können ein Fahrrad für nur einen Monat. Ich habe persönlich verwendet und ich empfehle es.

$20/mo und es sieht aus wie es geht! browserstack.com/screenshots/... und browserstack.com/screenshots/...
AngularJS docs: browserstack.com/screenshots/... Jemand eine gute Seite zum testen auf? Wie es aussieht, wird dies die akzeptierte Antwort.
Ich werde lassen Sie diese laufen ein wenig länger, um zu sehen, ob es eine "Kostenlose" Antwort sonst bekommen Sie die Prämie.
Was mich zu browsershots.org und browsershots.org/documentation#HowToCreateANewScreenshotFactory

InformationsquelleAutor Angular University

Haben Sie versucht,wkhtmltopdf? Es kommt mit einem tool namens wkhtmltoimage. Es nutzt QtWebKit (Ein Qt-port von der WebKit-rendering-engine) zum Rendern einer Webseite, und wandelt das Ergebnis in PDF-oder Bild-format Ihrer Wahl, alles geschieht auf server-Seite.

Weil es nutzt WebKit, es macht alles (Bilder, css-und auch javascript) wie in einem modernen browser funktioniert. Sie können eine Feinabstimmung der Parameter wie das optimieren der JavaScript-Ausführung Nachfrist.

In meinem Anwendungsfall, die Ergebnisse waren sehr zufriedenstellend, und sind nahezu identisch mit dem, was die Browser machen würde.

Hier ist eine Liste der Befehlsoptionen:

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>

Würde der Geist Sie testen diese auf builtwith.angularjs.org? Ich habe so viele Installationen sind so viele tools, die behaupten ähnliche Dinge.
Hi, habe versucht ein paar Seiten von dort. Leider sind Sie alle Gaben js-Fehler. Ich denke, dass der JS-parser von QtWebKit ist nicht bis zu standard-und nicht geeignet für schwere JS-Seiten. Ihre beste Wette, ich weiß, der ist wohl sowas wie addons.mozilla.org/en-US/firefox/addon/imacros-for-firefox kombiniert mit addons.mozilla.org/en-US/firefox/addon/screengrab-fix-version zu implementieren eines automatischen Workflows für die Aufnahme von Schnappschüssen. Nicht sicher, wie möglich, sehen aber wie die meisten anderen tools verwenden eine form von WebKit und hat nicht funktioniert das ganz gut, mit einem echten browser die einzige Möglichkeit sein.

InformationsquelleAutor Dan7

2

Zwar nicht persönlich ausprobiert, ich habe gesehen, die service-eingesetzt in der Produktion, nimmt screenshots mit Webdriver von Selen.
1. Bauen die selenium Webdriver https://code.google.com/p/selenium/
2. Verwenden Sie die RESTful API mit dem server kommunizieren. Es gibt bestimmte Anrufe, wo Sie können Ausgabe-Anforderung zum abrufen einer Webseite, und nehmen Sie einen screenshot von der aktuellen Instanz
alles geschieht im hintergrund, so dass ich denke, es passt Ihre Anforderungen.

InformationsquelleAutor leorex
1

Wahrscheinlich wird das helfen https://bitbucket.org/vodolaz095/site-shooter
Dies ist nodejs+phantomjs Anwendung, um Website-screenshots

Benötigen Sie einen heroku Kostenlose tier-Dienst ausführen.

BTW, können Sie versuchen, diese Anwendung - https://pageshooter.herokuapp.com
ich denke, es kann screenshots von angularjs Websites

mindestens nbawowy.com ist screenshoted. pageshooter.herokuapp.com/?url=http%3A%2F%2Fnbawowy.com%2F
pageshooter.herokuapp.com/...
pageshooter.herokuapp.com/...
für Michael - in phantomjs, die wir machen können-timeout für das ready-Ereignis, pi teilen können, die beispielsweise einige Zeit zu spät

InformationsquelleAutor vodolaz095
1

Knoten-Webshot nutzt PhantomJS, die wiederum verwendet, QtWebkit, die nicht mit AngularJS.

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

Vorschlag. Stellen Sie sicher, dass die PhantomJS Sie gebündelt innerhalb der Knoten-Webshot ist unbedingt die neueste version. Wenn nicht, ersetzen Sie die PhantomJS mit der neuesten version und Beute für Sie behoben haben.

Wenn Sie Zugriff auf die Kommandozeilen-Optionen von PhantomJS, Sie könnten versuchen, ein paar von Ihnen hier: https://github.com/ariya/phantomjs/wiki/API-Reference

Diejenigen, die besonders riging Glocke:

--ignore-ssl-Fehler=true

--local-und remote-url-Zugriff=true

--web-security=false

Würden Sie geschehen, um eine Probe, die ich laufen könnte? Ich habe installiert phantomjs von brew. v1.9.2 das ist die neueste.

InformationsquelleAutor Jani Hyytiäinen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.