maemaewaterの日記

PHP/Python/JavaScript/C#/C++などによるプログラムに関することを主に書いています。

gitで画像の差分の扱いについて

gitで画像の差分をみたいときにバイナリ扱いとなり、どの部分が編集されたのか分かりにくいことも多かったので、少し分かりやすくしたいなといことで画像を一度テキストに変換しその差分をみれるようにしてみようということで試してみました。

画像をテキストに変換するときに出力されるテキストのサイズが大きすぎても比較に時間がかかりそうなので、画像を縦と横をそれぞれ64分割して、その分割された領域のピクセルのハッシュを取ることにしてみました。出力されたテキストは次のようになります。

42:126-44:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
44:126-46:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
46:126-48:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
48:126-50:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
50:126-52:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
52:126-54:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
54:126-56:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
56:126-58:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
58:126-60:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
60:126-62:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
62:126-64:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
64:126-66:128::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB

{領域の左上x}:{領域の左上y}-{領域の右下x}:{領域の右下y}::{ハッシュ}

出力されたテキストを利用するためにgitでの設定を行います。

.gitconfig

[diff "png"]
        binary = true
        textconv = 'C:/Users/{パス}/image_text.cmd'

textconvにテキストに変換するプログラムを指定しています。Windows環境でためしたのでパスの指定がWindowsのもになっています。

各gitで管理されているディレクトリの.gitattributes

*.png  diff=png

(pngが対象)

設定が終わり、

git diff

を実行すると

 126:4-128:6::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
 0:6-2:8::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
 2:6-4:8::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
-4:6-6:8::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
-6:6-8:8::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
-8:6-10:8::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
+4:6-6:8::8E470F67C8B8B5C8EAA01C533CCCBCC6F60C45B48F36B2D92BC76201502D7492^M
+6:6-8:8::9D908ECFB6B256DEF8B49A7C504E6C889C4B0E41FE6CE3E01863DD7B61A20AA0^M
+8:6-10:8::08D62AC1473EBBDF649FAA1C775F5F16E1EACCB8D4EB4AB443B0A92F392258BC^M
 10:6-12:8::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
 12:6-14:8::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB
 14:6-16:8::C3A35E1419D04DEE113A653D9DD5DC428FD808F32A76CD109E3B23C3386F21FB

差分を表示してくれるようになります。領域ごとにはわかるようにはなったかなという感じですね。まだまだ改良はできそうです。

参考にさせていただいたページ: