Skip to content
Tags

JavaScriptで画像を比較できるライブラリ

by : 2017/10/24

Pitaliumはスクリーンショットを比較することでデザインの乱れや予期せぬ表示になるのを発見できます。肝になるのは画像の比較になるでしょう。

今回はPitalium同様に画像比較を行うライブラリを紹介します。

jQuery Images Compare

二つの画像を重ねて表示し、スライダを使って表示範囲を変更できるライブラリです。色が変わっていたり、加工前/加工後の画像を並べて比較する際に利用できます。

sylvaincombes/jquery-images-compare: A jquery plugin for comparing two images

jQuery CompareWYW

jQuery CompareWYWも二つの画像を重ねて表示するタイプのライブラリです。jQueryプラグインなので利用できる場面が多いかと思います。この手のライブラリの肝としては、画像サイズが全く同じであるという点が挙げられます。

jQuery CompareWYW

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

二つの画像を比較して差分になる画像を生成します。違う部分だけを抽出したり、背景の透明部分を無視する、画像サイズの違う場合も比較できるといった特徴があります。

HumbleSoftware/js-imagediff: JavaScript / Canvas based image diff utility with Jasmine matchers for testing canvas.


一言で画像比較といっても様々なやり方があります。見いだしたい情報によって最適な比較方法があるでしょう。Pitaliumにおいても様々な比較を通じてスクリーンショットが異なる部分を抽出できます。

ぜひこれらのライブラリを使って最適な画像比較方法を用意してください。

Pitalium(hifiveリグレッションテストライブラリ) – hifive

From → まとめ

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。