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

API JavaScript pentru a compara imagini PNG

Bibliotecă JavaScript open source care acceptă compararea imaginilor PNG în interiorul aplicațiilor JavaScript. Acceptă compararea imaginilor PNG ignorând antialiasing și ignorând caret. 

Compararea imaginilor cu imagini folosind JavaScript poate fi destul de dificilă și provocatoare. Alegerea instrumentului greșit poate influența foarte mult performanța. LooksSame este o bibliotecă JavaScript open source care a inclus funcționalitate pentru compararea imaginilor PNG în aplicațiile JavaScript și va funcționa imediat pe fiecare mașină. Biblioteca a fost creată ținând cont de percepția umană a culorilor. Biblioteca a fost creată în principal pentru nevoile de testare a regresiei vizuale pentru utilitatea Gemini.

Această bibliotecă permite dezvoltatorilor să compare rapid și ușor diferența dintre două imagini PNG cu ușurință folosind comenzi JavaScript. Acesta a oferit suport pentru procesarea imaginilor PNG fie prin furnizarea de căi către fișiere, fie imagini din interiorul tamponului. Utilizarea setărilor implicite va identifica doar diferența vizibilă și, dacă trebuie să detectați diferențe particulare, vă rugăm să selectați opțiunea strictă.

Biblioteca a oferit suport pentru mai multe caracteristici importante legate de compararea imaginilor, cum ar fi compararea imaginilor cu ignorarea semnului caret, compararea imaginilor cu ignorarea antialiasing, obținerea limitelor de dif, obținerea de clustere de dif, construirea de imagini diferite, construirea de imagini diferite ca un buffer, compararea culorilor și multe altele.

Previous Next

Noțiuni introductive cu LooksSame

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

Instalați LooksSame prin NPM

 npm install looks-same

Comparați imagini PNG în aplicațiile JavaScript

Biblioteca LooksSame oferă programatorilor de software capacitatea de a compara programatic imaginile lor PNG folosind Node.js. Trebuie să furnizați calea corectă către imaginile PNG sau tampon ca parametru. Un exemplu simplu de comparare a imaginii poate fi să faceți o captură de ecran a elementului DOM cu imaginea și să utilizați biblioteca pentru a o compara cu imaginea locală. De asemenea, puteți utiliza RequestLogger pentru a înregistra o solicitare pentru imagine și pentru a compara corpul răspunsului cu fișierul local folosind metoda Buffer.compare().

Comparați imagini PNG prin API-ul JavaScript

 var looksSame = require('looks-same');
looksSame('image1.png', 'image2.png', function(error, {equal}) {
    // equal will be true, if images looks the same
});

Comparați imagini PNG ignorând Antialiasing

Fiecare imagine este alcătuită din pixeli și, în timp ce compari aceste imagini, compari culoarea fiecărui pixel din imagine una cu culoarea pixelului din locația corespunzătoare a imaginii. Deci, în cazul în care, unii pixeli sunt diferiți, atunci puteți spune că imaginile nu se potrivesc. De obicei, aliasing-ul are loc atunci când rezoluția unei imagini este foarte scăzută pentru ca procesorul să redea corect linii netede. Tehnica anti-aliasing este aplicată pentru a oferi un aspect mai fin și astfel obțineți rezultate diferite de comparație în funcție de mediu. Unele imagini au diferențe în timp ce le compară din cauza antialiasing. Biblioteca LooksSame tratează problemele de anti-aliasing ignorând anumiți pixeli în care este probabil să fi apărut anti-aliasing. Aceste diferențe vor fi ignorate în mod implicit.

Every image is made up of pixels and while comparing these images you compare every pixel’s color in image one with the pixel color in the corresponding location of the image. So in case, some pixels are dissimilar, then you can tell the images are not matching. Usually, aliasing happens when an image’s resolution is very low for the processor to correctly render smooth lines. The anti-aliasing technique is applied to give a smoother appearance and thus you get different comparison results per environment. Some images have differences while comparing them because of antialiasing. The LooksSame library deals with anti-aliasing issues by ignoring certain of the pixels where anti-aliasing is likely to have occurred. These differences will be ignored by default.

Comparați imagini ignorând Antialiasing și Caret prin JavaScript

 const fs = require("fs");
const http = require("http");
const looksSame = require("looks-same");
const noop = () => null;
const refImgPath = __dirname + "/img/ref.png";
const currImgPath = __dirname + "/img/curr.png";
const diffImgPath = __dirname + "/img/diff.png";
const createDiff = (callback = noop) => {
  looksSame.createDiff(
    {
      reference: refImgPath,
      current: currImgPath,
      diff: diffImgPath,
      highlightColor: "#ff00ff", // color to highlight the differences
      strict: false, // strict comparsion
      tolerance: 2.3,
      ignoreAntialiasing: true,
      antialiasingTolerance: 4,
      ignoreCaret: true // ignore caret by default
    },
    callback
  );
};
http
  .createServer((req, res) => {
    createDiff(() => {
      const img = fs.readFileSync(diffImgPath, "binary");
      res.write(img, "binary");
      res.end();
    });
  })
  .listen(8080);

Compararea imaginilor ignorând Caret

Biblioteca gratuită LooksSame a oferit funcționalitate pentru ignorarea semnului de simbol în casetele de intrare în timp ce compară două imagini în propriile aplicații. Indicatorul de text în elementul de introducere a textului este o problemă pentru sarcinile de regresie vizuală, deoarece clipește mereu. Uneori, când se compară două casete de text sau imagini cu casete de intrare, din cauza imaginii, comparația nu eșuează pentru diferența de pixeli. Deci, puteți ignora opțiunea caret pentru a dezactiva ignorarea acestor difere.

 Română