Avoimen lähdekoodin JavaScript-sovellusliittymä kuvien vertailuun
JavaScript-kirjaston avulla ohjelmoijat voivat verrata kahta kuvaa useissa ympäristöissä, kuten Nodessa tai selaimissa jne.
Joskus on tarpeen verrata kahta kuvaa nähdäkseen, kuinka samanlaisia ne ovat. Se on erittäin monimutkainen prosessi, ja sen suorittaminen vaatii hyvää tietoa. Avoimen lähdekoodin pixelmatch-kirjasto voi olla erittäin hyödyllinen valinta kahden kuvan vertailuun missä tahansa ympäristössä. Koska kirjastolla ei ole riippuvuuksia ja se toimii raa'illa kirjoitetuilla kuvadatan taulukoilla, sitä voidaan käyttää useissa ympäristöissä, kuten Node tai selaimet jne.
Pixelmatch on kooltaan hyvin pieni ja erittäin helppokäyttöinen, mutta se on erittäin nopea pikselitason kuvien vertailukirjasto. Se on kirjoitettu JavaScriptillä ja luotu alun perin vertaamaan kuvakaappauksia testeissä. Kirjasto tukee ominaisuuksia, kuten anti-aliasoitujen pikselien tunnistusta ja havaintovärien erojen mittareita.
Anti-aliasing-tunnistus on erittäin hyödyllinen ominaisuus, koska yleensä on havaittu, että samojen tietojen renderöiminen eri sovelluksissa, laitteissa tai käyttöjärjestelmissä voi tuottaa hieman erilaisia tuloksia. Mutta enimmäkseen on suositeltavaa jättää huomiotta nämä pienet erot tai testit merkityksellisemmän tiedon keräämiseksi.
Pixelmatchin käytön aloittaminen
Suositeltu tapa asentaa pixelmatch on NPM:n kautta. Käytä seuraavaa komentoa asentaaksesi sen.
Asenna pixelmatch NPM:n kautta
npm install pixelmatch Mitä pikselivastaavuuden testaus on?
Jos sinun on verrattava kahta kuvaa tarkistaaksesi, onko niiden välillä eroja, voit käyttää pikselivastaavuustestausta tähän tarkoitukseen. Kuvia voi olla kahdenlaisia, alkuperäinen kuva ja muokattu kuva. Voit käyttää sovellusta, joka voi hakea kuvia sovelluksesi kuvakaappauksesta ja sen jälkeen kuvavertailukirjastoa voidaan käyttää näiden kuvien vertailuun ja tulosten näyttämiseen.
Kuvien vertailu JavaScript-kirjaston kautta
Avoimen lähdekoodin kirjasto pixelmatch on tarjonnut täydelliset toiminnot kuvien vertaamiseen JavaScript-sovelluksissa helposti. Ohjelmistokehittäjien on tarjottava kuvatiedot vertailua varten sekä tulostuspaikka, johon sen on kirjoitettava kuvatiedot eroilla. Niiden on myös annettava mitta, joka on kolmen kuvan leveys ja korkeus. Voit käyttää kynnysvaihtoehtoa, jonka avulla kuvat voivat olla hieman erilaisia, mikä voi joissain tapauksissa olla hienoa. Huomaa, että pixelmatch-kirjasto edellyttää, että kuvien on oltava samankokoisia.
Kuvien vertailu verkossa JavaScript API:n kautta
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);
Vertaa kuvia Node.js:ssä pixelmatchin avulla
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));
