Nyílt forráskódú JavaScript API a képek összehasonlításához
A JavaScript Library lehetővé teszi a szoftverprogramozók számára, hogy összehasonlítsanak két képet több környezetben, például Node-ban vagy böngészőben stb.
Néha össze kell hasonlítani két képet, hogy lássuk, mennyire hasonlítanak egymásra. Ez egy nagyon bonyolult folyamat, és jó tudás szükséges a megvalósításához. A nyílt forráskódú pixelmatch könyvtár nagyon hasznos választás lehet két kép összehasonlításához bármilyen környezetben. Mivel a könyvtárnak nincsenek függőségei, és a képadatok nyers, tipizált tömbjein működik, így többféle környezetben is használható, például Node-ban vagy böngészőkben stb.
A pixelmatch nagyon kis méretű és nagyon egyszerűen használható, de nagyon gyors pixelszintű képösszehasonlító könyvtár. JavaScriptben íródott, és eredetileg a képernyőképek tesztekben történő összehasonlítására készült. A könyvtár támogatja az olyan funkciókat, mint az élsimított pixelek észlelése és az érzékelési színkülönbség-metrikák.
Az élsimítás észlelése nagyon hasznos funkció, mivel általában megfigyelték, hogy ugyanazon adatok különböző alkalmazásokon, eszközökön vagy operációs rendszereken való megjelenítése kissé eltérő eredményeket eredményezhet. De többnyire ajánlatos figyelmen kívül hagyni ezeket a kis különbségeket vagy teszteket, hogy értelmesebb adatokat rögzítsünk.
A pixelmatch használatának első lépései
A pixelmatch telepítésének javasolt módja az NPM. Kérjük, használja a következő parancsot a telepítéshez.
A pixelmatch telepítése NPM-en keresztül
npm install pixelmatch
Mi az a Pixel Match Testing?
Ha össze kell hasonlítania két képet, hogy ellenőrizze, van-e különbség a kettő között, akkor erre a célra használhatja a pixelegyezési tesztet. Kétféle kép lehet, az eredeti kép és a módosított kép. Használhat olyan alkalmazást, amely képeket tud lekérni az alkalmazás képernyőképéről, majd ezt követően a kép-összehasonlító könyvtár segítségével összehasonlíthatja ezeket a képeket, és megjelenítheti az eredményeket.
Képek összehasonlítása JavaScript Library segítségével
A nyílt forráskódú pixelmatch könyvtár teljes funkcionalitást biztosít a JavaScript alkalmazásokon belüli képek egyszerű összehasonlításához. A szoftverfejlesztőknek meg kell adniuk a képadatokat az összehasonlításhoz, valamint azt a kimeneti helyet, ahová a képadatokat a különbségekkel együtt kell írni. Meg kell adniuk azt a méretet is, amely a három kép szélessége és magassága. Használhatja a küszöbértéket, amely lehetővé teszi, hogy a képek kissé eltérőek legyenek, ami bizonyos esetekben nagyszerű lehet. Kérjük, vegye figyelembe, hogy a pixelmatch könyvtárnak szüksége van arra, hogy a képek azonos méretűek legyenek.
Képek összehasonlítása online JavaScript API-n keresztül
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);
Hasonlítsa össze a képeket a Node.js-ben a pixelmatch segítségével
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));