JavaScriptで画像を比較できるライブラリ
Pitaliumはスクリーンショットを比較することでデザインの乱れや予期せぬ表示になるのを発見できます。肝になるのは画像の比較になるでしょう。
今回はPitalium同様に画像比較を行うライブラリを紹介します。
jQuery Images Compare
二つの画像を重ねて表示し、スライダを使って表示範囲を変更できるライブラリです。色が変わっていたり、加工前/加工後の画像を並べて比較する際に利用できます。
sylvaincombes/jquery-images-compare: A jquery plugin for comparing two images
jQuery CompareWYW
jQuery CompareWYWも二つの画像を重ねて表示するタイプのライブラリです。jQueryプラグインなので利用できる場面が多いかと思います。この手のライブラリの肝としては、画像サイズが全く同じであるという点が挙げられます。
CSS and jQuery Image Comparison Slider | CodyHouse
モバイルにも対応したスライダーです。スライダーのツマミが大きいためか、片方に寄せきることはできません。使い方に関する解説記事もあります。
CSS and jQuery Image Comparison Slider | CodyHouse
reg-cli
node.jsで動きます。二つの画像の差分となる画像を生成します。見た目では殆ど分からないような違いを発見するのに役立つでしょう。
reg-viz/reg-cli: 📷 Visual regression test tool.
Resemble.js
Webブラウザ上で二つの画像の比較ができます。どこが異なっているのか、差分となる画像が生成されるのですぐに分かるでしょう。
Huddle/Resemble.js: Image analysis and comparison
js-imagediff
二つの画像を比較して差分になる画像を生成します。違う部分だけを抽出したり、背景の透明部分を無視する、画像サイズの違う場合も比較できるといった特徴があります。
一言で画像比較といっても様々なやり方があります。見いだしたい情報によって最適な比較方法があるでしょう。Pitaliumにおいても様々な比較を通じてスクリーンショットが異なる部分を抽出できます。
ぜひこれらのライブラリを使って最適な画像比較方法を用意してください。
hifive開発者ブログ 
コメントは受け付けていません。