1. Termékek
  2.   Kép
  3.   JavaScript
  4.   LooksSame
 
  

JavaScript API a PNG-képek összehasonlításához

Nyílt forráskódú JavaScript-könyvtár, amely támogatja a PNG-képek összehasonlítását a JavaScript-alkalmazásokon belül. Támogatja a PNG-képek összehasonlítását az élsimítás figyelmen kívül hagyásával és a caret figyelmen kívül hagyásával. 

A képek összehasonlítása képekkel JavaScript használatával meglehetősen nehéz és kihívást jelenthet. A rossz szerszám kiválasztása szintén nagyban befolyásolhatja a teljesítményt. A LooksSame egy nyílt forráskódú JavaScript-könyvtár, amely tartalmazza a PNG-képek összehasonlítását a JavaScript-alkalmazásokon belül, és minden gépen azonnal működik. A könyvtárat az emberi színérzékelés figyelembevételével hozták létre. A könyvtárat elsősorban a Gemini segédprogram vizuális regressziós tesztelésére hozták létre.

Ez a könyvtár lehetővé teszi a fejlesztők számára, hogy gyorsan és egyszerűen összehasonlítsák két PNG-kép közötti különbséget JavaScript-parancsok segítségével. Támogatja a PNG-képek feldolgozását azáltal, hogy elérési utat biztosít a fájlok vagy a pufferben lévő képek számára. Az alapértelmezett beállítások használata csak az észrevehető különbséget azonosítja, és ha különleges eltéréseket kell észlelnie, válassza a szigorú opciót.

A könyvtár számos fontos funkcióhoz nyújtott támogatást a kép-összehasonlításokkal kapcsolatban, mint például a képek összehasonlítása az élsimítás figyelmen kívül hagyásával, a képek összehasonlítása az élsimítás figyelmen kívül hagyásával, a különbségi határok lekérése, a diff klaszterek lekérése, a diff képek készítése, a különbségi képek pufferként való építése, a színek összehasonlítása, és sok más.

Previous Next

A LooksSame használatának megkezdése

A LooksSameis NPM-en keresztüli telepítésének javasolt módja. Kérjük, használja a következő parancsot a telepítéshez.

Telepítse a LooksSame-et NPM-en keresztül

 npm install looks-same

Hasonlítsa össze a PNG-képeket a JavaScript-alkalmazásokon belül

A LooksSame könyvtár lehetővé teszi a szoftverprogramozók számára, hogy programozottan összehasonlítsák PNG-képeiket a Node.js használatával. Paraméterként meg kell adnia a PNG-képek vagy puffer megfelelő elérési útját. A kép-összehasonlítás egyszerű példája lehet, ha képernyőképet készítünk a DOM-elemről a képpel, és a könyvtár segítségével hasonlítjuk össze a helyi képpel. A RequestLogger segítségével naplózhatja a képre vonatkozó kérést, és összehasonlíthatja a válasz törzsét a helyi fájllal a Buffer.compare() metódus használatával.

Hasonlítsa össze a PNG-képeket JavaScript API-n keresztül

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

Hasonlítsa össze a PNG-képeket az élsimítás figyelmen kívül hagyásával

Minden kép pixelekből áll, és a képek összehasonlítása során minden képpont színét összehasonlítja a kép megfelelő helyén lévő pixel színével. Tehát abban az esetben, ha egyes pixelek eltérnek, akkor megállapíthatja, hogy a képek nem egyeznek. Általában az aliasing akkor fordul elő, ha a kép felbontása nagyon alacsony ahhoz, hogy a processzor megfelelően sima vonalakat jelenítsen meg. Az anti-aliasing technikát alkalmazzák a simább megjelenés érdekében, és így környezetenként eltérő összehasonlítási eredményeket kap. Egyes képek az élsimítás miatt eltéréseket mutatnak az összehasonlítás során. A LooksSame könyvtár az élsimítási problémákat úgy kezeli, hogy figyelmen kívül hagy bizonyos képpontokat, ahol az élsimítás valószínűleg előfordult. Ezeket a különbségeket alapértelmezés szerint figyelmen kívül hagyja.

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 élsimítás 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 élsimítás issues by ignoring certain of the pixels where élsimítás is likely to have occurred. These differences will be ignored by default.

Hasonlítsa össze a képeket úgy, hogy figyelmen kívül hagyja az élsimítást és a gondosságot JavaScripten keresztül

 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);

Képek összehasonlítása Caret figyelmen kívül hagyásával

Az ingyenes LooksSame könyvtár olyan funkciókat biztosít, amelyek figyelmen kívül hagyják a caret beviteli mezőket, miközben két képet hasonlítanak össze saját alkalmazásaikban. A szövegbeviteli elemben a caret egy fájdalom a vizuális regressziós feladatoknál, mert mindig villog. Néha két szövegdoboz vagy beviteli mező képeinek összehasonlításakor a kép miatt az összehasonlítás sikertelen a pixelkülönbség szempontjából. Így figyelmen kívül hagyhatja a caret opciót az ilyen eltérések figyelmen kívül hagyásának letiltásához.

 Magyar