Diff tool for different height screenshots.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Screen Diff

This tool is a (very slow ruby based) prototype for a screenshots diffing tool which deals well with shots of different height. It is used in a CI script to control the markup regressions using readable image comparison.


Two screenshots of a slightly different height:

a b

The diff:


On the left side of the diff you see a bit patched image: the removed parts have been replaced with the last pixels row from the image (kinda like Content-Aware Scale™). Swapping a and b does not change the diff in the middle.


For now, for Mac OS here only.


brew install imagemagick@6
brew link imagemagick@6 --force
brew install pkg-config
brew install ruby
gem install bundler


git clone https://github.com/peter-leonov/screen-diff.git
cd screen-diff
bundle exec ./screen-diff.rb tests/1/b.png tests/1/a.png diff.png
# montage: unable to read font bla-bla…
open diff.png

Sorry for the mess with ImageMagick gem, installing it has been always a magic.

Also, if montage warning bothers you install ghostscript:

brew install ghostscript

Why write comparison another tool?

Reason to invent the wheel is that ImageMagick's compare tool refuses to compare images of mismatching dimensions. The approach made in this tool is to use real textual diff command to find rows of two images where a difference starts and then patch the gap with a spacer in a way optimized for diffing interfaces (web pages, applications, anything of fixed width). The result is a pair of the original images but now of the same height then compared by ImageMagick's compare.

For people googling using the error message: compare: image widths or heights differ … @ error/compare.c/CompareImageCommand/990..


ATM the script is pretty simple. It converts both given images to a textual format Netpbm (PPM) alike but with full RGB support using rgb.rb. Then the script uses a plain old diff tool to get the actual diff. Next step is to rebuild both images filling the gaps if a diff chunk has more minuses than pluses (or vice versa). After that, the script converts the textual image format to PNG and runs the actual ImageMagick compare tool.

Ruby code is based on examples from RMagick User's Guide.