Swipe diff viewer を試しに書いてみた

GitHubの画像diffはどのように実装されているのか

上の記事を参考に、GitHub のプルリクエストの画像の差分表示のような UI を試しに書いてみました。

GitHub Image Diff Tool

1. Before (変更前) 画像

ドラッグ＆ドロップ または クリック

2. After (変更後) 画像

ドラッグ＆ドロップ または クリック

1. Swipe Diff (左右にホバー/スワイプ)

2. Onion Skin Diff (左右にホバーで透明度変更)

3. Difference Mode (差分ハイライト)