Annotate A Web Page and Take a Screenshot with PhantomJS.
Annotate A Web Page and Take a Screenshot with PhantomJS.
URL + Overlays(CSS Selectors + Labels) => Screenshot with annotation overlays
$ git clone git://github.com/hitode909/web-overlay.git
$ cd web-overlay
$ ./bin/web-overlay.coffee examples/highlight-images.js a.png
a.png
will be generated on your working directory.https://github.com/hitode909/web-overlay/blob/master/examples/highlight-images.js
https://github.com/hitode909/web-overlay/blob/master/examples/highlight-google-news.js
https://github.com/hitode909/web-overlay/blob/master/examples/click-count.js
To plot real data, You need to analyze your blog's access logs and create config file.
Config file is a JSON or JavaScript file.
Below is an example.
This example highlights visible img
elements on the website of Apple.
{
"url": "http://apple.com",
"overlays": [
{
"selector": "img:visible",
"label": "image",
"type": "all"
}
]
}
The URL to take a screenshot.
an array of overlay
.
overlay
consists of selector
, label
and type
.
The CSS Seletor to find elements for the overlay. Matched elements are highlighted. You can use jQuery Selectors.
The text to display on matched elements.
enumerated string ["all", "wrap"]
"all"
: each matched elements are overlayed separately."wrap"
: all matched elements are grouped and overlayed by a big overlay.