画像差分チェッカー
2 枚の画像・比較キャンバス・ピクセルしきい値を選びます。結果はそのキャンバス上に描画された状態の比較で、拡大縮小されることがあり、ファイルのバイト比較ではありません。
ブラウザ内でローカルに実行 ·
2 枚の画像・比較キャンバス・ピクセルしきい値を選びます。結果はそのキャンバス上に描画された状態の比較で、拡大縮小されることがあり、ファイルのバイト比較ではありません。
ブラウザ内でローカルに実行2 枚の画像を 1 つのキャンバスに描き、すべてのピクセルを走査して、しきい値を超えて異なるピクセルを差分マップに塗り分けます。比較はページ内の Canvas メモリで行われ、画像はアップロードされず、ページはオフラインでも動作します。
キャンバスはファイルそのものではありません。比較の前に 2 枚を同じサイズへ引き伸ばすため、結果が示すのはそのサイズでの見え方であり、バイト列が同一かどうかではありません。
赤・緑・青・アルファをピクセルごとに別々に比較し、4 つの差のうち最大の値で判定します。この値がしきい値を厳密に超える必要があり、既定の 24 では赤チャンネルが +10 だけ異なる 1 ピクセルは無視されて「0 ピクセル」と表示され、同じ 2 枚をしきい値 5 で比べると 64 ピクセル中 1 ピクセル (1.56%) が変更として報告されます。
比較には色だけでなくアルファも含まれます。同じ色で透明度だけが 1 段階異なる 4 × 4 の画像は、しきい値 0 で 16 ピクセルすべてが変更と判定されました。
平均差分は 4 チャンネルの差をキャンバス全体で平均した値なので、変更部分が小さいと小さく出ます。64 ピクセルの画像で 1 段階だけ異なる 1 ピクセルは、「変更されたピクセル」が 1 でも 0.00 / 255 に丸められます。
「最初の画像に合わせる」は 1 枚目の幅と高さ、「2番目の画像に合わせる」は 2 枚目、「最大寸法」は幅と高さの大きい方をそれぞれ使います。2 枚はそのキャンバスに引き伸ばされるため、4 × 8 と 8 × 4 の組み合わせは「最大寸法」で 8 × 8 として比較されました。
キャンバスは長辺 4096 ピクセル、合計 16,000,000 ピクセルが上限で、5000 × 100 の組み合わせは 4096 × 82 として比較されました。「寸法」の指標は常に実際に比較したキャンバスを示し、入力ファイルのサイズではありません。
差分マップでは、変更されたピクセルを濃いピンクで、それ以外を 1 枚目の暗いグレースケールとして描くため、プレビューは比較している画像の見た目を保ちます。
ありません。2 枚の画像はブラウザーの画像デコーダーで読み込まれ、Canvas メモリ上で比較され、差分 PNG はキャンバス自身が生成してからダウンロード画面に渡されます。ネットワークを監視した検証では、追加・比較・ダウンロード・クリアの間にリクエストは 1 件も発生しませんでした。
数値は 1 つのキャンバスに対応します。しきい値・キャンバスの選択・ファイルの順序を変えれば結果も変わり、新しい実行は前回の結果を置き換えます。「クリア」はリスト・4 つの指標・3 つのプレビューを初期状態に戻し、完成した PNG をダウンロードボタンから外します。