Open Source JavaScript API för att jämföra bilder
JavaScript Library gör det möjligt för programvaruprogrammerare att jämföra två bilder i flera miljöer som Node eller webbläsare etc.
Ibland krävs det att man jämför två bilder för att se hur lika de är. Det är en mycket komplicerad process och krävde goda kunskaper för att genomföra den. Pixelmatch-biblioteket med öppen källkod kan vara ett mycket användbart val för att jämföra två bilder i vilken miljö som helst. Eftersom biblioteket inte har några beroenden och fungerar på råtypade arrayer av bilddata, så kan det användas i flera miljöer som Node eller webbläsare, etc.
Pixelmatchningen är mycket liten i storlek och mycket enkel att använda men är ett mycket snabbt bildjämförelsebibliotek på pixelnivå. Den är skriven i JavaScript och skapad initialt för att jämföra skärmdumpar i tester. Biblioteket stöder funktioner som detektering av kantutjämnade pixlar och perceptuella färgskillnader.
Kantutjämningsdetektering är en mycket användbar funktion eftersom det vanligtvis har observerats att rendering av samma data på olika applikationer, enheter eller operativsystem kan generera något olika resultat. Men oftast rekommenderas det att ignorera dessa små skillnader eller tester för att fånga mer meningsfulla data.
Komma igång med pixelmatch
Det rekommenderade sättet att installera pixelmatch är via NPM. Använd följande kommando för att installera det.
Installera pixelmatch via NPM
npm install pixelmatch Vad är Pixel Match Testing?
Om du behöver jämföra två bilder för att kontrollera om det är någon skillnad mellan så kan du använda pixelmatchningstestning för detta ändamål. Det kan finnas två typer av bilder, den ursprungliga bilden och den modifierade bilden. Du kan använda en applikation som kan hämta bilder från skärmdumpen av din app och efter det kan bildjämförelsebiblioteket användas för att jämföra dessa bilder och visa resultaten.
Jämföra bilder via JavaScript-biblioteket
Biblioteket med öppen källkod pixelmatch har tillhandahållit komplett funktionalitet för att enkelt jämföra bilder i JavaScript-applikationer. Mjukvaruutvecklare måste tillhandahålla bilddata för jämförelse samt utdataplatsen där den behöver skriva bilddata med skillnaderna. De måste också ange dimensionen som är bredden och höjden på de tre bilderna. Du kan använda tröskelalternativet som gör att bilderna kan vara något annorlunda, vilket kan vara bra i vissa fall. Observera att pixelmatch-biblioteket kräver att bilder måste vara av samma storlek.
Jämförelse av bilder online via JavaScript API
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);
Jämför bilder i Node.js via pixelmatch
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));
