How do you take a screenshot of an angularjs app?

Viewed 15352

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.

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.

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.

Does not need to be phantomjs or node-webshot.

Update 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

I have some work to do on this solution.

enter image description here

Update 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.

Update 3

I'm continuing development on a production ready solution for this on 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.

5 Answers
Related