👻
画像差分チェックをGazo-sanとpuppeteerで作る
画像差分チェック
サイトの差分チェックしたいという話が前上がってたので、試しに作ってみました。
実装方法
下記２つを使いました。
- puppeteer(node.js)でサイトのキャプチャ取得
- Gazo-san(C++)という画像差分チェックツール
画像の差分検知の仕組み
大きく分けると、二種類
- 厳密な比較：ピクセルごとの比較 (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
Discussion