1. 製品
  2.   画像
  3.   Node.js
  4.   LooksSame
 
  

画像比較のための無料 Node.js API

ピクセルごとに画像を比較するオープンソースの Node.js ベースの API。Node.js アプリケーションで画像を比較するための強力で柔軟性が高く、効率的なソリューションです。

画像比較は、ソフトウェア開発、特に視覚的な回帰テスト、画像品質保証、ピクセルパーフェクトな設計検証などの分野で重要な役割を果たします。複数のプラットフォーム間で一貫した UI 外観を確保するソフトウェアを開発する場合でも、生産パイプラインで視覚チェックを自動化する場合でも、効率的な画像比較ツールは不可欠です。Gemini-Testing が開発したオープンソース API である LooksSame は、直感的な機能により、画像比較用のソフトウェアの作成プロセスを簡素化します。ライブラリには、ピクセル単位の画像比較、アンチエイリアシング検出、許容範囲制御の構成、画像寸法の処理、Promise のサポートなど、いくつかの重要な機能があります。

LooksSame は、画像比較用に設計された Node.js ベースの API です。開発者は、レンダリング環境の違いによって発生する可能性のある小さな違いを処理するオプションを使用して、画像をピクセル単位で比較できます。ライブラリを利用することで、ソフトウェア開発者は、些細な違いを無視しながら大きな視覚的違いを検出する独自のアプリケーションを構築できます。この API は主に、開発者が UI デザインの一貫性を維持できるようにすることに重点を置いていますが、その汎用性により、他の多くの画像比較ユースケースにも適しています。LooksSame は、わかりやすい API とカスタマイズ可能なオプションを備えており、特に Web ベースの UI テスト、自動画像生成、視覚的な正確さが最も重要となるその他のシナリオでは、あらゆる開発者のツールキットに追加するのに最適です。

Previous Next

LooksSame を使い始める

LooksSame をインストールするには、NPM を使用することをお勧めします。スムーズにインストールするには、次のコマンドを使用してください。

NPM 経由で LooksSame をインストールする

npm install looks-same

Node.js アプリでの基本的な画像比較

オープンソースの LooksSame ライブラリを使用すると、ソフトウェア開発者は Node.js アプリケーション内で基本的な画像比較を簡単に実行できます。インストールしたら、コードで LooksSame モジュールを要求することで 2 つの画像を比較できます。ライブラリを使用して 2 つの画像が視覚的に同一かどうかを確認する方法を示す基本的な例を次に示します。この例では、image1.png と image2.png を比較します。視覚的に同じである場合、equal は true を返します。そうでない場合は false を返します。

Node.js アプリ内で 2 つの画像を比較する方法

const looksSame = require('looks-same');

// Compare two images
looksSame('image1.png', 'image2.png', (error, { equal }) => {
    if (error) {
        console.error('Error comparing images:', error);
    } else if (equal) {
        console.log('Images are identical!');
    } else {
        console.log('Images differ!');
    }
});

許容度ベースの画像比較

ピクセル単位の完全な一致を必要としないアプリケーションの場合、ソフトウェア開発者は許容度レベルを追加できます。これにより、異なるブラウザーやオペレーティング システムでのレンダリングによる変更など、画像間の小さな違いを無視できます。次のコード例では、許容度が 5% に設定されています。つまり、小さなピクセルの変動 (最大 5%) では画像が異なるとは見なされません。

Node.js アプリ内で許容値ベースの画像比較を実行する方法

cfunction compareWithTolerance(image1, image2, toleranceLevel) {
    looksSame(image1, image2, { tolerance: toleranceLevel }, (error, { equal }) => {
        if (error) {
            console.error('Error comparing images:', error);
        } else if (equal) {
            console.log('Images are visually identical within tolerance!');
        } else {
            console.log('Images differ!');
        }
    });
}

// Usage
compareWithTolerance('image1.png', 'image2.png', 5);  // 5% tolerance

差異の特定領域の強調表示

より高度なアプリケーションの場合、ソフトウェア開発者は差異の特定領域のみを識別して分析したい場合があります。LooksSame ライブラリには、差異が発生する正確な領域を示す境界ボックス機能が用意されています。この関数は、差異のある領域の境界ボックス座標を出力するため、変更された画像の特定の部分に焦点を当てやすくなります。次の例は、境界ボックス座標を使用して画像を比較し、差異を強調表示する方法を示しています。

Node.js アプリを使用して画像の特定の領域間の違いを比較して識別するにはどうすればよいですか?

function compareWithDiffBounds(image1, image2) {
    looksSame(image1, image2, (error, { diffBounds }) => {
        if (error) {
            console.error('Error comparing images:', error);
        } else {
            console.log('Bounding box of differences:', diffBounds);
        }
    });
}

// Usage
compareWithDiffBounds('image1.png', 'image2.png');

正確な比較のためのアンチエイリアシング検出

オープンソースの LooksSame ライブラリを使用すると、ソフトウェア開発者は Node.js アプリケーション内でアンチエイリアシング検出メソッドを使用して画像圧縮を実行できます。アンチエイリアシングはエッジのレンダリングにわずかな変化をもたらすため、画像を比較するときに誤検出を引き起こす可能性があります。ライブラリの ignoreAntialiasing オプションは、これらの誤検出を回避するのに役立ちます。これは、画像がさまざまなデバイスやブラウザーで異なる方法でレンダリングされる可能性があるが、視覚的には同じであるアプリケーションで特に役立ちます。

 日本