画像差分チェックをGazo-sanとpuppeteerで作る

実装方法

下記２つを使いました。

• puppeteer(node.js)でサイトのキャプチャ取得
• Gazo-san(C++)という画像差分チェックツール
  • 競合のLIFULLが作ったOSS
  • https://github.com/lifull-dev/Gazo-san
  • https://www.lifull.blog/entry/2019/12/16/110000
  • https://qiita.com/rueyjye/items/85f5c94957e775437f89

画像の差分検知の仕組み

大きく分けると、二種類

• 厳密な比較：ピクセルごとの比較 (Pixel perfect testing とも呼ばれます)
  • 差分を画像上で色を付けてアウトプットすることが多い
  • 差分が多すぎると見辛くなる(赤く塗られた部分が目立つ)
• 曖昧な比較：アルゴリズムによる類似度での比較 (類似度算出のアルゴリズムは色々あります)
  • 差分は表示されませんが、類似度がアウトプットになる
  • 類似度なので、どこが差分かはわからず、差分の有無(true/false)や差分○%での表記

Gazo-San

Gazo-sanは厳密な比較に当たります。
特徴として、差分の表示箇所が分かり辛い問題に対応するため
二つの画像をそれぞれパーツごと分けて、マッチングしたパーツのみ差分を比較しているとのことです。

差分

マッチングしたパーツを赤枠で囲み、差分がある部分を赤く塗りつぶしています。
「みんなの介護ニュース」は記事が最新順で変わっていくので赤く塗られてます。

マッチングできてない箇所もかなりあるので、精度としてはそこまで高くなく
目視チェックを補助するレベル位かと思います。
（差分を全て分かりやすく把握できるわけではない）

実装

puppeteer

node.jsでの、ブラウザ操作のライブラリです。
サイトの画像キャプチャを取得するのに利用しました。

みんなの介護のトップは画像の遅延ロードしてる箇所がある為
puppeteerで一番下までスクロールさせた後にキャプチャ取るようにしています。

# docker-compose exec app bash
root@6aa77f406dcb:/# node capture.js https://www.yahoo.co.jp

gazo-san

簡単なコマンド実行で画像の差分が取得できます。
（オプション等はマニュアルにほぼなかったので、ユーザ側でツールの調整等は出来なさそうです）

# docker-compose exec gazosan bash
root@6aa77f406dcb:/# gazosan /screenshots/20210302_top.png /screenshots/20210301_top.png /output/output --create-change-image