pixelmatchライブラリを使用した画像差分確認方法

pixelmatchライブラリとは

画像の差分を検出するために使用されるJavaScriptライブラリです。

主にWebサイトなどの画像の変更を検出するために使用されます。

このライブラリは2つの画像を比較し、ピクセル単位での違いを数値化できます。

pixelmatchライブラリの使い方

まず、pixelmatchコマンドを試すために以下のコマンドでディレクトリなどを作成して、cdで移動します。

mkdir pixelmatch-test; cd pixelmatch-test; touch test.mjs; npm init -y; curl -o dragon_01.png https://iwb.jp/s/img/dragon_01.png && curl -o dragon_02.png https://iwb.jp/s/img/dragon_02.png;

画像比較のためにサンプルの画像 (dragon_01.png, dragon_02.png) もダウンロードしています。

この2つの違いは「2024年 元旦」の有無です。

次に以下のコマンドでpixelmatchライブラリなどをインストールします。

npm i -D pixelmatch fs pngjs

最後にtest.mjsに画像比較のためのコードを書きます。

fs, pngjs, pixelmatchをimportして、画像を読み込み、pixelmatch()でピクセルの差分(numDiffPixels)を取得しています。

コードの最後にピクセルの差分(numDiffPixels)があれば「画像ファイルに差分があります！」とconsole.logで表示して、差分箇所がわかる画像(diff.png)を書き出しています。

差分がなければ「画像ファイルに差分はありません」と表示されます。

import fs from 'fs'
import { PNG } from 'pngjs'
import pixelmatch from 'pixelmatch'

const img1 = PNG.sync.read(fs.readFileSync('dragon_01.png'))
const img2 = PNG.sync.read(fs.readFileSync('dragon_02.png'))
const { width, height } = img1
const diff = new PNG({ width, height })

const numDiffPixels = pixelmatch(
  img1.data,
  img2.data,
  diff.data,
  width,
  height,
  { threshold: 0.1 }
)
console.log({ numDiffPixels })

if (numDiffPixels > 0) {
  console.log('画像ファイルに差分があります！')
  fs.writeFileSync('diff.png', PNG.sync.write(diff))
} else {
  console.log('画像ファイルに差分はありません')
}

今回の例だと「node test.mjs」で2つの画像を比較すると差分があるので、「画像ファイルに差分があります！」と表示されて、diff.pngが書き出されます。

$ node test.mjs
{ numDiffPixels: 276 }
画像ファイルに差分があります！

以上のように、pixelmatchを使えば短いコードで簡単に画像の差分を確認できます。

修正前後の画像やWebページのスクリーンショットの比較に使うと便利ですので、ぜひご活用ください。