プロジェクトでまとめられている画像達の差分を少しだけ簡単に調べる方法

お分かりいただけただろうか?

差分が気になるのはコードだけではないはず。たとえば、画像。画像の差分ほど分かりにくいものはないです。1枚程度であれば、ほへーって見比べたり、ImageMagick使って直接「2枚の画像のdiff（差分）を超簡単に調べる方法 - 昼メシ物語」をやれば良いのだけど、プロジェクトで大量に上がってきた修正画像の見比べとかなんだか面倒。というわけで、前のリンク先の方法とVimのDirDiffに触発され、階層間での画像比較画像ができるコードを書いてみた。Bashとか完全にnoobなので改善の余地大いにありです。見るに耐えない箇所は教えてね。

注意事項: 今のところ拡張子が大文字のPNGとか想定外です

ImageMagickが必要なので、Macならbrew install imagemagick をしてください。で、パスの通っているところに置いて、chmod +x make-diff-img ってやってください。そしたら、make-diff-img Path1 Path2 Path3とすると、Path3の階層にPath1ディレクトリとPath2ディレクトリの比較で差分のある画像が作られちゃいます。

使用例: make-diff-img img/ver1/ img/ver2 img/diff

├── ver1
│   ├── imgA
│   │   ├── display-setting.jpg
│   │   └── point.jpg
│   ├── imgB
│   │   ├── hasami.jpg
│   │   ├── hashi.jpg
│   │   ├── iphone1.jpg
│   │   └── iphone2.jpg
│   └── lunch.jpg
└── ver2
    ├── imgA
    │   ├── display-setting.jpg
    │   └── point.jpg
    ├── imgB
    │   ├── hasami.jpg
    │   ├── hashi.jpg
    │   ├── iphone1.jpg
    │   └── iphone2.jpg
    └── lunch.jpg

こんな感じにver1とver2で比較する画像があったとしても、

$ make-diff-img img/ver1 img/ver2 img/diff
Start make-diff-img!
Checking difference...
1(1): /imgA/display-setting.jpg is difference.
2(2): /imgA/point.jpg is difference.
3(3): /imgB/hasami.jpg is difference.
4(4): /imgB/hashi.jpg is difference.
5(5): /imgB/iphone1.jpg is difference.
6(6): /imgB/iphone2.jpg is difference.
7(7): /lunch.jpg is difference.
End make-diff-img.

再帰的に調べてくれます。

ちょっとの違いなら背景が真っ黒になります(上)が、全然違う写真だとすぐ分かります(下)。Macだと、ここまで作られれば、あとはQuickLookで流し見すれば大丈夫。

ちなみに、差分なしの真っ黒な画像は、diffさんが優秀なので作られません。