WebOverlay

Annotate A Web Page and Take a Screenshot with PhantomJS.

URL + Overlays(CSS Selectors + Labels) => Screenshot with annotation overlays

When To Use

To annotate webpage
To find wrong markups
To visualize access logs of website

Usage

Clone this repository.
Write a config file.

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

Examples

To plot real data, You need to analyze your blog's access logs and create config file.

Config File Format

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"
        }
    ]
}

url

The URL to take a screenshot.

overlays

an array of overlay. overlay consists of selector, label and type.

selector

The CSS Seletor to find elements for the overlay. Matched elements are highlighted. You can use jQuery Selectors.

label

The text to display on matched elements.

type

enumerated string ["all", "wrap"]

"all": each matched elements are overlayed separately.
"wrap": all matched elements are grouped and overlayed by a big overlay.

Requirement

PhantomJS (maybe >= 1.8)

kazuph / web-overlay