
Image-diff – Create an image differential between two images - jsvine
https://github.com/uber/image-diff
======
f-
Not sure I follow - especially if it already depends on IM, how is it
different from 'convert -compose difference' or a similar operator?

[http://www.imagemagick.org/Usage/compose/#difference](http://www.imagemagick.org/Usage/compose/#difference)

~~~
guelo
It looks like it's a thin wrapper around "GraphicsMagick for node". Which
itself is a javascript wrapper around GraphicsMagick / ImageMagick.

~~~
dTal
I'm _so_ glad I didn't go into web development.

------
dahart
This is cool, and a good idea. I will try it out, but I can highly recommend
the existing pdiff utility for your image regression testing.

[http://pdiff.sourceforge.net](http://pdiff.sourceforge.net)

Pdiff allows you to specify perceptual thresholds of visibility, so diffs that
are not pixel perfect can still pass if they're 'good enough'. Semi-critical
if you render the input images using different browsers or at different
resolutions, or if your images have any sub-pixel randomness.

Lots of people (myself included) have used pdiff successfully in production.
It doesn't depend on ImageMagick (a bonus in my book). And it's already
available in lots of Linux distros.

~~~
liviu-
>It doesn't depend on ImageMagick (a bonus in my book)

Why is it a bonus besides lowering the number of dependencies?

~~~
InclinedPlane
[https://imagetragick.com/](https://imagetragick.com/)

------
_jomo
ImageMagick already ships the `compare` command [0] which does exactly this.

It also accepts a bunch of CLI flags such as -fuzz to consider colors within a
certain distance as equal. That flag is very useful when dealing with JPG or
similar compression that slightly alters pixels, so you can ignore these
barely visible differences and focus on the 'real' differences.

0:
[http://www.imagemagick.org/script/compare.php](http://www.imagemagick.org/script/compare.php)

~~~
dmd
This literally just calls ImageMagick.

------
nicolashahn
Interesting, I couldn't find a tool like this that would give me a useful %
difference between images, so I rolled my own tiny python version using PIL:
[https://github.com/nicolashahn/python-image-
diff](https://github.com/nicolashahn/python-image-diff)

which gives both a diff image and the % difference.

------
spatulan
Or you can import the two images into graphics software like gimp. Invert the
colours in the top image, then knock transparency for that layer down to 50%.
If the images are identical, you'll just see grey. Any differences will
instantly become visible.

~~~
SlashmanX
Now automate it for 200 screenshots

~~~
yyhhsj0521
If this is indeed the underlying algorithm it should not be hard to implement

------
silverwind
Pure JS alternative: [https://github.com/yahoo/blink-
diff](https://github.com/yahoo/blink-diff)

------
0xmohit
Not sure what was the intent behind creating this.

Once upon a time (several years back), I worked on one. The intent therein was
two compare images produced by different versions of a product. As such, one
of the major features was motion detection [0] (apart from computing deltas
between the images). We made use of OpenCV [1].

[0]
[https://en.wikipedia.org/wiki/Motion_detection](https://en.wikipedia.org/wiki/Motion_detection)

[1]
[https://en.wikipedia.org/wiki/OpenCV](https://en.wikipedia.org/wiki/OpenCV)

------
chris_va
This sort of thing + headless browser makes for nice regression testing.

~~~
prydonius
BBC News' wraith[1] is a pretty great tool for this, although it doesn't
really support a more complex web app flow (e.g. logging in) very well.

[1] [https://github.com/BBC-News/wraith](https://github.com/BBC-News/wraith).

~~~
adzicg
If you need workflows, there's also VisualReview [1] with some basic workflow
for approval testing, and Applitools [2], a commercial tool with integration
with Selenium, Appium and Protractor that can do screenshot and video
comparisons. I wrote about them as part of the 'Automated testing: back to the
future' tools review [3]. In the article, I also mentioned DomReactor, but
that seems to be discontinued now.

[1]
[https://github.com/xebia/VisualReview](https://github.com/xebia/VisualReview)

[2] [https://applitools.com/](https://applitools.com/)

[3] [https://gojko.net/2015/11/16/automated-testing-
future/](https://gojko.net/2015/11/16/automated-testing-future/)

~~~
davidjnelson
I wrote a tool that compares images using Applitools for Automattic during the
React Wordpress admin rewrite a while back. The idea is you'd have a style
guide with examples of all your ui components and render and compare them in
various states with various test data. [https://github.com/davidjnelson/css-
visual-test](https://github.com/davidjnelson/css-visual-test)

------
mrmondo
I hacked up something quickly for a one-off need to render two websites as
images and diff them a few years back (warning - I'm not a developer
(clearly)) -
[https://github.com/sammcj/urldiff](https://github.com/sammcj/urldiff)

------
adnanh
Combine this with my webscrot and diff development vs production websites :-)

[https://github.com/adnanh/webscrot](https://github.com/adnanh/webscrot)

------
amelius
The diff utility (for text) can detect displacement of fragments of text. Can
this image-diff utility do a similar thing for images?

