2つの画像の違いを比較するnode.jsライブラリ「image-diff」



画像の違いを比較するnode.jsライブラリ「image-diff」の紹介です。

画像の違いを比較する必要があるケースとはどんな時でしょうか?絵画の世界であれば、その絵が本物か偽物かの判定等が思い浮かびます。

使う場面は限られそうですが、2種類の画像から 画像間の違いを1枚の画像として書き出することができるnode.js用のライブラリが「image-diff」です。

下記の様な場合は " World " が書き出されます


image-diffのインストール

image-diffは、ImageMagickに依存しており、事前に導入している必要があります。

image-diffはターミナル上からnpmコマンドを使ってインストールします。

# cli版をインストールする場合 * cli版はコマンドライン上から使うことが出来ます
npm install image-diff -g

# module版をインストールする場合
npm install image-diff --save

 

image-diffの使い方

使い方は簡単で、cli版の場合 コマンドライン上から " image-diff ベース画像 比較画像 アウトプットファイル " で使うことが出来ます。

# image-diffをコマンドラインから使う場合
image-diff base.jpg comp.jpg output.jpg

# オプションにも対応しており、 --shadowをつければ元画像も表示されます
# image-diff --shadow base.jpg comp.jpg output.jpg


module版を使う場合も下記の様に、短いコードで簡単に書くことができます。

// module版を使う場合
const imageDiff = require('image-diff');

imageDiff({
    actualImage: 'base.jpg', // 元となる画像
    expectedImage: 'images/koi.jpg', // 比較する画像
    diffImage: 'images/difference.jpg', // 比較した画像 * 画像が全く同じであれば真っ白な画像が作成されます
}, (err, imagesAreSame) => {
    // callback処理

    // エラーの処理 *何もなければnullを返す
    // console.log(err);

    // imageの処理。画像が同じであればtrue、違えばfalseを返す
    // console.log(imagesAreSame);
});


っということで、image-diffを実際に使って比較したものが下の画像になります。

画像が全く同じ場合であれば、真っ白な画像が生成されます

もう少し、実用的な画像を使って検証しました

上記の通り、イメージの差分を魚拓のように赤色で出しています。ライブラリ内部ではImageMagickの機能の'compare'を呼び出しているようです。
( 解像度、サイズが違えばその分も差分として認識されるので、その点も注意してください )


Summary

以上がimage-diffの紹介でした。

通常のプロジェクトで使えそうな場面は少なそうですが、"同じ位置 & 同じ解像度 "で画像を作成できる環境が確立されていれば、将来的にレントゲン画像の比較に使ったり等、色々とインスピレーションが湧きそうですね!

GitHub : uber/image-diff

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ