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

Open Source JavaScript API til sammenligning af billeder

JavaScript-biblioteket gør det muligt for softwareprogrammører at sammenligne to billeder i flere miljøer som Node eller browsere osv.

Nogle gange er det nødvendigt at sammenligne to billeder for at se, hvor ens de er. Det er en meget kompliceret proces og krævede god viden for at gennemføre den. Open source pixelmatch-biblioteket kan være et meget nyttigt valg til at sammenligne to billeder i ethvert miljø. Da biblioteket ikke har nogen afhængigheder og fungerer på råtskrevne arrays af billeddata, så kan det bruges i flere miljøer som Node eller browsere osv.

Pixelmatch er meget lille i størrelse og meget enkel at bruge, men er et meget hurtigt billedsammenligningsbibliotek på pixelniveau. Det er skrevet i JavaScript og oprindeligt lavet til at sammenligne skærmbilleder i test. Biblioteket understøtter funktioner som anti-aliased pixel-detektion og perceptuelle farveforskelle.

Anti-aliasing-detektion er en meget nyttig funktion, fordi det normalt er blevet observeret, at gengivelse af de samme data på forskellige applikationer, enheder eller operativsystemer kan generere lidt forskellige resultater. Men for det meste anbefales det at ignorere disse små forskelle eller test for at fange mere meningsfulde data.

Previous Next

Kom godt i gang med pixelmatch

Den anbefalede måde at installere pixelmatch på er via NPM. Brug venligst følgende kommando til at installere det.

Installer pixelmatch via NPM

 npm install pixelmatch

Hvad er Pixel Match Testing?

Hvis du har brug for at sammenligne to billeder for at kontrollere, om der er nogen forskel mellem, kan du bruge pixel match test til dette formål. Der kan være to typer billeder, det originale billede og det modificerede billede. Du kan bruge en applikation, der kan hente billeder fra skærmbilledet af din app, og derefter kan billedsammenligningsbiblioteket bruges til at sammenligne disse billeder og vise resultaterne.

Sammenligning af billeder via JavaScript-bibliotek

Open source-biblioteket pixelmatch har leveret komplet funktionalitet til let at sammenligne billeder i JavaScript-applikationer. Softwareudviklere skal levere billeddata til sammenligning såvel som det outputsted, hvor det skal skrive billeddataene med forskellene. De skal også angive den dimension, som er bredden og højden af de tre billeder. Du kan bruge tærskelindstillingen, der tillader, at billederne er lidt anderledes, hvilket kan være godt i nogle tilfælde. Bemærk venligst, at pixelmatch-biblioteket kræver, at billeder skal være af samme størrelse.

Billedsammenligning 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 billeder 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));
 Dansk