面白い！JavaScript+Canvasによる画像差分表示「JS-ImageDiff」
JS-ImageDiffはJavaScript+Canvasタグを使って二つの画像の差分表示を行うライブラリです。
GitHubでは差分をWebブラウザ上で閲覧できますが、その時に画像の差分表示も行えるのを知っているでしょうか。スライダーで動かしたりして差分を確認できるのですが、その一つの差分表示をオープンソースで再現するのがJS-ImageDiffです。
サンプルです。上が元、中間が変換後そして下が差分となります。どこが違うのか一目で分かります。
左が影無し、右が影ありです。一致している部分だけが表示されています。
サイズが違う場合の差分表示です。
JS-ImageDiffはCanvasタグを使って画像を読み込み、その差分を表示しています。各ピクセル単位で画像を比較して同じであれば黒、違う場合はうまく表示するというやり方でここまで見事に表示できるのが面白いですね。
JS-ImageDiffはJavaScript製、MIT Licenseのオープンソース・ソフトウェアになります。
MOONGIFTはこう見る
プログラマーでバージョン管理を行っていれば、差分表示のお世話になるケースは多いのではないかと思います。テキストベースで役立つのであれば、画像やその他のメディアでもあれば確実に便利でしょう。近い将来、Adobe Photoshopなどでも作業前と後の確認ができるようになるかも知れません。
二つの画像ファイルをベースにするのであれば、サーバサイドでももちろんできるでしょうが、敢えてJavaScriptで実装することによりクライアントサイドだけでサーバの負荷なく画像の差分を実現したのがミソです。今後、こうやってクライアントサイドをうまく使うテクニックが重宝されるはずです。