I've tried:
I could do it locally but I couldn't take screenshots of other websites that are based on angularjs.
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.
As of last night this is how I'm doing it.
I have some work to do on this solution.
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.
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.
The simplest way to take a screenshot in Windows 10 is to use the Print Screen button. You'll find it on the upper-right side of most keyboards (or next to the Space Bar on some). Tap PrtSc once to copy an image of your entire screen to the clipboard. You can then hit Ctrl + V to paste it into your program of choice.
A screenshot of any element in JavaScript can be taken using the html2canvas library. This library can be downloaded from its official website.
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.
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.
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]>
Use browserstack to test your application in all browsers without having to install each one, including mobile browsers, different phones, tablets, etc.
There is support for Selenium automated testing and screenshots. Local testing is supported, no public URL is needed.
The screenshots API is available for configuring the screenshots you need, Screenshooter is a a tool for generating BrowserStack screenshots from the command line.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With