1. Produkter
  2.   Bilde
  3.   JavaScript
  4.   pixelmatch
 
  

Open Source JavaScript API for å sammenligne bilder

JavaScript Library gjør det mulig for programvareprogrammerere å sammenligne to bilder i flere miljøer som Node eller nettlesere etc.

Noen ganger er det nødvendig å sammenligne to bilder for å se hvor like de er. Det er en svært komplisert prosess og krever god kunnskap for å gjennomføre den. Åpen kildekode pixelmatch-biblioteket kan være et veldig nyttig valg for å sammenligne to bilder i ethvert miljø. Siden biblioteket ikke har noen avhengigheter og fungerer på råskrevne matriser med bildedata, kan det brukes i flere miljøer som Node eller nettlesere, etc.

Pikselmatchen er veldig liten i størrelse og veldig enkel å bruke, men er et veldig raskt bildesammenligningsbibliotek på pikselnivå. Den er skrevet i JavaScript og opprinnelig laget for å sammenligne skjermbilder i tester. Biblioteket støtter funksjoner som anti-aliased piksler deteksjon og perseptuelle fargeforskjeller.

Anti-aliasing-deteksjon er en veldig nyttig funksjon fordi det vanligvis har blitt observert at gjengivelse av de samme dataene på forskjellige applikasjoner, enheter eller operativsystemer kan generere litt forskjellige resultater. Men for det meste anbefales det å ignorere disse små forskjellene eller testene for å fange opp mer meningsfylte data.

Previous Next

Komme i gang med pixelmatch

Den anbefalte måten å installere pixelmatch på er via NPM. Bruk følgende kommando for å installere den.

Installer pixelmatch via NPM

 npm install pixelmatch

Hva er Pixel Match Testing?

Hvis du trenger å sammenligne to bilder for å sjekke om det er noen forskjell mellom, kan du bruke pikselmatch-testing til dette formålet. Det kan være to typer bilder, det originale bildet og det modifiserte bildet. Du kan bruke en applikasjon som kan hente bilder fra skjermbildet av appen din, og etter det kan bildesammenligningsbiblioteket brukes til å sammenligne disse bildene og vise resultatene.

Sammenligning av bilder via JavaScript-bibliotek

Åpen kildekode-biblioteket pixelmatch har gitt komplett funksjonalitet for å enkelt sammenligne bilder i JavaScript-applikasjoner. Programvareutviklere må oppgi bildedata for sammenligning samt utdatastedet der de trenger å skrive bildedataene med forskjellene. De må også oppgi dimensjonen som er bredden og høyden til de tre bildene. Du kan bruke terskelalternativet som lar bildene være litt forskjellige, noe som kan være bra i noen tilfeller. Vær oppmerksom på at pixelmatch-biblioteket krever at bilder må være av samme størrelse.

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

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