Simple image diffing with phantomjs and imagemagick

snapshot.js

var system = require('system');
var page = require('webpage').create();

page.viewportSize = {
  width: 1024,
  height: 768
};

page.open(system.args[1], function() {
  page.render(system.args[2]);
  phantom.exit();
});

snapshot.sh

#!/bin/bash

url=$1
image=$2
new_image="$TMPDIR$image"
diff_image="$TMPDIR""diff-$image"
diff_overlay_image="$TMPDIR""diff-overlay-$image"

phantomjs snapshot.js "$url" "$new_image"
if image-diff "$image" "$new_image" "$diff_image"; then
  echo "Screenshots match for $url"
  exit 0
fi

composite -compose atop "$diff_image" "$image" "$diff_overlay_image"

echo "Difference found"
open "$diff_overlay_image"

usage.md

1. npm install -g image-diff
2. Generate a screenshot which you like. phantomjs snapshot.js http://example.com/page page.png
3. Diff! ./snapshot.sh http://example.com/page page.png