1. 製品
  2.   画像
  3.   JavaScript
  4.   pixelmatch
 
  

画像を比較するためのオープンソース JavaScript API

JavaScript ライブラリを使用すると、ソフトウェア プログラマーはノードやブラウザーなどの複数の環境で 2 つの画像を比較できます。

場合によっては、2 つの画像を比較して類似性を確認する必要があります。これは非常に複雑なプロセスであり、それを達成するには十分な知識が必要です。オープン ソースの pixelmatch ライブラリは、任意の環境で 2 つの画像を比較するのに非常に便利な選択肢です。ライブラリには依存関係がなく、画像データの生の型付き配列で動作するため、Node やブラウザーなどの複数の環境で使用できます。

pixelmatch はサイズが非常に小さく使いやすいですが、非常に高速なピクセル レベルの画像比較ライブラリです。これは JavaScript で書かれており、最初はテストでスクリーンショットを比較するために作成されました。このライブラリは、アンチエイリアス ピクセル検出や知覚色差メトリックなどの機能をサポートしています。

通常、異なるアプリケーション、デバイス、またはオペレーティング システムで同じデータをレンダリングすると、わずかに異なる結果が生成されることが観察されているため、アンチエイリアシング検出は非常に便利な機能です。しかし、ほとんどの場合、これらの小さな違いやテストを無視して、より意味のあるデータを取得することをお勧めします。

Previous Next

ピクセルマッチの開始

pixelmatch をインストールする推奨される方法は、NPM を使用することです。以下のコマンドでインストールしてください。

NPM 経由でピクセルマッチをインストールする

 npm install pixelmatch

ピクセル マッチ テストとは何ですか?

2 つの画像を比較して違いがあるかどうかを確認する必要がある場合は、この目的でピクセル マッチ テストを使用できます。画像には、元の画像と 変更 画像 の 2 種類があります。アプリのスクリーンショットから画像を取得できるアプリケーションを使用できます。その後、画像比較ライブラリを使用してこれらの画像を比較し、結果を表示できます。

JavaScript ライブラリによる画像の比較

オープン ソース ライブラリの pixelmatch は、JavaScript アプリケーション内で画像を簡単に比較するための完全な機能を提供しています。ソフトウェア開発者は、比較用の画像データと、差分のある画像データを書き込む必要がある出力場所を提供する必要があります。また、3 つの画像の幅と高さを指定する必要があります。画像がわずかに異なるようにするしきい値オプションを使用できます。これは、場合によっては優れています。 pixelmatch ライブラリでは、画像が同じサイズでなければならないことに注意してください。

オンラインでの画像比較 JavaScript API

 const img1 = img1Context.getImageData(0, 0, width, height);
const img2 = img2Context.getImageData(0, 0, width, height);
const diff = diffContext.createImageData(width, height);
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
diffContext.putImageData(diff, 0, 0);

ノード内の画像を比較します。 ピクセルマッチによるjs

 const fs = require('fs');
const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');
const img1 = PNG.sync.read(fs.readFileSync('img1.png'));
const img2 = PNG.sync.read(fs.readFileSync('img2.png'));
const {width, height} = img1;
const diff = new PNG({width, height});
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
fs.writeFileSync('diff.png', PNG.sync.write(diff));
 日本