画像の差分検出でimageMagickを使ってみた
はじめに
web制作ではデザインに合わせてマークアップを行うため、最終的にブラウザに表示される画面がデザイン通りになっているか確認する必要があります。
また、既存サイトのデザイン修正を行う場合でもデザインのどこが変更されたのかを確認する必要があります。
このようにデザインを比較する場合、目視で変更点を確認するのは辛いのでimageMagickを試してみます。
imageMagickインストール
インストール方法は公式サイトにいくつか記載されていますが、Homebrewでインストールします。
brew install imagemagick
一応インストールされたことを確認。
convert -version
compositeで画像の差分を試す
composieで画像の比較ができます。
composite -compose difference {比較画像A} {比較画像B} {出力結果}
差分がない場合
比較箇所が同じ色であるほど黒色に近づくように出色されるため、差分がない場合は出力される画像が真っ黒になります。
試しに同じ画像同士を比較させます。
composite -compose difference imageA.jpeg imageA.jpeg diff.jpg
比較画像 imageA.jpeg
出力結果 diff.jpeg
差分がある場合
比較箇所で色に差分がある箇所は黒色以外で出力されます。
比較画像 imageA.jpeg
比較画像 imageB.jpeg
出力結果 diff.jpeg
実際のサイトで試してみる
実際にサイトの画像で試してみます。
サンプル画像にZennのプロフィール画面を使用します。
※Webページ全体をキャプチャするためにChromeの拡張機能のGoWebPageを使用します
マージンなどは変わらず文字や画像のみ変更がある場合
文字や絵文字の一部を変更して比較してみます。
composite -compose difference Zenn_A.jpeg Zenn_B.jpeg diff.jpg
比較画像 Zenn_A.jpeg
比較画像 Zenn_B.jpeg 絵文字部分や文字を少しだけ変更したもの
出力結果 diff.jpeg
文字や絵文字の変更部分のみが出力されるので変更箇所が一目でわかります。
マージンに変更がある場合
文字などはそのままでページ上部の要素のマージンのみを変更してみます。
composite -compose difference Zenn_A.jpeg Zenn_C.jpeg diff.jpg
比較画像 Zenn_A.jpeg
比較画像 Zenn_C.jpeg
出力結果 diff.jpeg
マージンなどが変更されている場合は差分箇所が多く出力されてしまい、ずれを検出する方法としては実用的ではないですね。
おわりに
デザインの比較という目的ではimageMagickが使える機会はそんなに多くなさそう。。。
そもそも軽微なデザイン修正とか文言修正はコミュニケーションでなんとかなる気がします。
結局は目視の確認が必要なので画像で比較するとかよりもvisual-inspectorみたいなChromeの拡張を利用するのが良い気がしますね。
と思って調べてたらvisual-inspectorがChromeのポリシー違反で消されてた。。。
参考記事
Discussion