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

PNG 画像を比較する JavaScript API

JavaScript アプリ内での PNG 画像の比較をサポートするオープン ソース JavaScript ライブラリ。アンチエイリアシングを無視してキャレットを無視して PNG 画像を比較できます。 

JavaScript を使用して画像と画像を比較することは、非常に困難で困難な場合があります。間違ったツールを選択すると、パフォーマンスに大きな影響を与える可能性もあります。 LooksSame はオープン ソースの JavaScript ライブラリであり、JavaScript アプリケーション内で PNG 画像を比較する機能が含まれており、すべてのマシンでそのまま使用できます。ライブラリは、人間の色の知覚を考慮して作成されています。このライブラリは主に、Gemini ユーティリティの視覚的な回帰テストの必要性のために作成されました。

このライブラリを使用すると、開発者は JavaScript コマンドを使用して、2 つの PNG 画像の違いをすばやく簡単に比較できます。バッファ内のファイルまたは画像へのパスを提供することにより、PNG 画像の処理をサポートしています。デフォルト設定を使用すると、顕著な違いのみが識別されます。特定の違いを検出する必要がある場合は、厳格なオプションを選択してください。

このライブラリは、キャレットを無視して画像を比較する、アンチエイリアシングを無視して画像を比較する、差分境界を取得する、差分クラスターを取得する、差分画像を構築する、差分画像をバッファーとして構築する、色を比較するなど、画像比較に関連するいくつかの重要な機能をサポートしています。もっとたくさん。

Previous Next

LooksSame の使用を開始する

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

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

 npm install looks-same

JavaScript アプリ内で PNG 画像を比較する

LooksSame ライブラリは、ソフトウェア プログラマーが Node.js を使用して PNG 画像をプログラムで比較する機能を提供します。 PNG 画像またはバッファへの正しいパスをパラメータとして指定する必要があります。画像比較の簡単な例の 1 つは、DOM 要素と画像のスクリーンショットを撮り、ライブラリを使用してそれをローカル画像と比較することです。 RequestLogger を使用して画像のリクエストをログに記録し、Buffer.compare() メソッドを使用してレスポンスの本文をローカル ファイルと比較することもできます。

NGイメージをJavaScript APIで比較

 var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
    // equal will be true, if images looks the same
});

アンチエイリアスを無視して PNG 画像を比較する

すべての画像はピクセルで構成されており、これらの画像を比較しながら、画像 1 のすべてのピクセルの色を画像の対応する場所のピクセルの色と比較します。そのため、一部のピクセルが類似していない場合、画像が一致していないことがわかります。通常、エイリアシングは、画像の解像度が非常に低く、プロセッサが滑らかな線を正しくレンダリングできない場合に発生します。 アンチエイリアシング 技術が適用されてより滑らかな外観が得られるため、環境ごとに異なる比較結果が得られます。一部の画像は、アンチエイリアシングのため、比較中に差異が生じます。 LooksSame ライブラリは、アンチエイリアシングが発生した可能性のある特定のピクセルを無視することで、アンチエイリアシングの問題に対処します。これらの違いは、デフォルトでは無視されます。

Every image is made up of pixels and while comparing these images you compare every pixel’s color in image one with the pixel color in the corresponding location of the image. So in case, some pixels are dissimilar, then you can tell the images are not matching. Usually, aliasing happens when an image’s resolution is very low for the processor to correctly render smooth lines. The アンチエイリアシング technique is applied to give a smoother appearance and thus you get different comparison results per environment. Some images have differences while comparing them because of antialiasing. The LooksSame library deals with アンチエイリアシング issues by ignoring certain of the pixels where アンチエイリアシング is likely to have occurred. These differences will be ignored by default.

JavaScriptによるアンチエイリアシング&ケアを無視して画像を比較する

 const fs = require("fs");
const http = require("http");
const looksSame = require("looks-same");
const noop = () => null;
const refImgPath = __dirname + "/img/ref.png";
const currImgPath = __dirname + "/img/curr.png";
const diffImgPath = __dirname + "/img/diff.png";
const createDiff = (callback = noop) => {
  looksSame.createDiff(
    {
      reference: refImgPath,
      current: currImgPath,
      diff: diffImgPath,
      highlightColor: "#ff00ff", // color to highlight the differences
      strict: false, // strict comparsion
      tolerance: 2.3,
      ignoreAntialiasing: true,
      antialiasingTolerance: 4,
      ignoreCaret: true // ignore caret by default
    },
    callback
  );
};
http
  .createServer((req, res) => {
    createDiff(() => {
      const img = fs.readFileSync(diffImgPath, "binary");
      res.write(img, "binary");
      res.end();
    });
  })
  .listen(8080);

キャレットを無視した画像比較

無料の LooksSame ライブラリには、独自のアプリケーション内で 2 つの画像を比較する際に、入力ボックスのキャレットを無視する機能が用意されています。テキスト入力要素のテキスト キャレットは、常に点滅しているため、視覚的な回帰タスクにとって苦痛です。 2 つのテキスト ボックスまたは入力ボックスの画像を比較すると、キャレットを与える画像が原因で、ピクセルの違いで比較が失敗することがあります。そのため、キャレット オプションを無視して、そのような差分の無視を無効にすることができます。

 日本