1. Produse
  2.   Imagine
  3.   JavaScript
  4.   pixelmatch
 
  

API JavaScript open source pentru a compara imagini

Biblioteca JavaScript le permite programatorilor de software să compare două imagini în mai multe medii, cum ar fi Node sau browsere etc.

Uneori este necesar să comparați două imagini pentru a vedea cât de asemănătoare sunt. Este un proces foarte complicat și necesită cunoștințe bune pentru a-l realiza. Biblioteca open source pixelmatch poate fi o alegere foarte utilă pentru compararea a două imagini în orice mediu. Deoarece biblioteca nu are dependențe și funcționează pe matrice brute de date de imagine, deci poate fi utilizată în mai multe medii, cum ar fi Node sau browsere etc.

Pixelmatch-ul este de dimensiuni foarte mici și foarte simplu de utilizat, dar este o bibliotecă de comparare a imaginilor la nivel de pixeli foarte rapidă. Este scris în JavaScript și creat inițial pentru a compara capturile de ecran în teste. Biblioteca acceptă funcții precum detectarea pixelilor anti-alias și valorile perceptive ale diferențelor de culoare.

Detectarea anti-aliasing este o caracteristică foarte utilă, deoarece de obicei s-a observat că redarea acelorași date pe diferite aplicații, dispozitive sau sisteme de operare poate genera rezultate ușor diferite. Dar, în mare parte, este recomandat să ignorați aceste mici diferențe sau teste pentru a captura date mai semnificative.

Previous Next

Noțiuni introductive cu pixelmatch

Modul recomandat de a instala pixelmatch este prin NPM. Vă rugăm să utilizați următoarea comandă pentru a o instala.

Instalați pixelmatch prin NPM

 npm install pixelmatch

Ce este testarea Pixel Match?

Dacă trebuie să comparați două imagini pentru a verifica dacă există vreo diferență între acestea, puteți utiliza testarea potrivirii pixelilor în acest scop. Pot exista două tipuri de imagini, imaginea originală și imaginea modificată imaginea. Puteți utiliza o aplicație care poate prelua imagini din captura de ecran a aplicației dvs. și după aceea, biblioteca de comparare a imaginilor poate fi utilizată pentru a compara aceste imagini și pentru a afișa rezultatele.

Compararea imaginilor prin biblioteca JavaScript

Biblioteca open source pixelmatch a oferit o funcționalitate completă pentru compararea cu ușurință a imaginilor din interiorul aplicațiilor JavaScript. Dezvoltatorii de software trebuie să furnizeze date de imagine pentru comparare, precum și locul de ieșire în care trebuie să scrie datele imaginii cu diferențele. De asemenea, trebuie să furnizeze dimensiunea care este lățimea și înălțimea celor trei imagini. Puteți folosi opțiunea de prag care permite imaginilor să fie ușor diferite, ceea ce poate fi grozav în unele cazuri. Rețineți că biblioteca pixelmatch necesită ca imaginile să aibă aceleași dimensiuni.

Compararea imaginilor online prin 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);

Comparați imaginile din Node.js prin 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));
 Română