1. Produktai
  2.   Vaizdas
  3.   JavaScript
  4.   LooksSame
 
  

„JavaScript“ API, kad palygintų PNG vaizdus

Atvirojo kodo „JavaScript“ biblioteka, kuri palaiko PNG vaizdų palyginimą „JavaScript“ programose. Jis palaiko PNG vaizdų palyginimą ignoruojant antialiasing ir ignoruojant caret. 

Palyginti vaizdus su vaizdais naudojant „JavaScript“ gali būti gana sunku ir sudėtinga. Netinkamo įrankio pasirinkimas taip pat gali labai paveikti našumą. „LooksSame“ yra atvirojo kodo „JavaScript“ biblioteka, kuri apima PNG vaizdų palyginimo funkciją „JavaScript“ programose ir veiks iš karto kiekviename įrenginyje. Biblioteka sukurta atsižvelgiant į žmogaus spalvų suvokimą. Biblioteka daugiausia buvo sukurta „Gemini“ programos vizualinės regresijos testavimo poreikiams.

Ši biblioteka leidžia kūrėjams greitai ir lengvai palyginti dviejų PNG vaizdų skirtumus naudojant JavaScript komandas. Jis palaiko PNG vaizdų apdorojimą, pateikdamas kelius į failus arba vaizdus buferyje. Naudodami numatytuosius nustatymus nustatysite tik pastebimą skirtumą, o jei jums reikia aptikti konkrečius skirtumus, pasirinkite griežtą parinktį.

Bibliotekoje palaikomos kelios svarbios funkcijos, susijusios su vaizdų palyginimu, pavyzdžiui, vaizdų palyginimas ignoruojant ženklą, vaizdų palyginimas su antialiasing ignoravimu, skirtumo ribų gavimas, skirtumų grupių gavimas, skirtumų vaizdų kūrimas, skirtumų vaizdų kaip buferio kūrimas, spalvų palyginimas ir daug daugiau.

Previous Next

Darbo su LooksSame pradžia

Rekomenduojamas būdas įdiegti LooksSameis per NPM. Norėdami ją įdiegti, naudokite šią komandą.

Įdiekite „LooksSame“ per NPM

 npm install looks-same

Palyginkite PNG vaizdus „JavaScript“ programose

„LooksSame“ biblioteka programinės įrangos programuotojams suteikia galimybę programiškai palyginti savo PNG vaizdus naudojant Node.js. Kaip parametrą turite nurodyti teisingą kelią į PNG vaizdus arba buferį. Vienas paprastas vaizdų palyginimo pavyzdys gali būti DOM elemento ekrano kopija su vaizdu ir naudojant biblioteką palyginti jį su vietiniu vaizdu. Taip pat galite naudoti RequestLogger, kad užregistruotumėte vaizdo užklausą ir palygintumėte atsakymo turinį su vietiniu failu, naudodami Buffer.compare() metodą.

Palyginkite PNG vaizdus naudodami „JavaScript“ API

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

Palyginkite PNG vaizdus ignoruodami antialiasing

Kiekvienas vaizdas susideda iš pikselių ir lygindami šiuos vaizdus, lyginate kiekvieno vaizdo pikselio spalvą su atitinkamoje vaizdo vietoje esančia pikselio spalva. Taigi, jei kai kurie pikseliai yra nepanašūs, galite pasakyti, kad vaizdai nesutampa. Paprastai slapyvardžiai įvyksta, kai vaizdo skiriamoji geba yra labai maža, kad procesorius galėtų teisingai atvaizduoti lygias linijas. Taikoma anti-aliasing technika, kad vaizdas būtų sklandesnis, todėl kiekvienoje aplinkoje gausite skirtingus palyginimo rezultatus. Kai kurie vaizdai turi skirtumų lyginant juos dėl antialiasing. „LooksSame“ biblioteka sprendžia slapyvardžio panaikinimo problemas, ignoruodama tam tikrus pikselius, kuriuose tikėtinas slapyvardžio panaikinimas. Pagal numatytuosius nustatymus šie skirtumai bus ignoruojami.

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.

Palyginkite vaizdus ignoruodami „Antialiasing“ ir „Caret“ naudodami „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);

Vaizdų palyginimas ignoruojant Caret

Nemokama „LooksSame“ biblioteka suteikė funkciją, leidžiančią nepaisyti „Caret“ įvesties laukeliuose lyginant du vaizdus savo programose. Teksto įvesties elemente tekstas caret yra kančia atliekant vizualinės regresijos užduotis, nes ji visada mirksi. Kartais lyginant dviejų teksto laukelių ar įvesties laukelių vaizdus, dėl vaizdo, palyginimas nepavyksta dėl pikselių skirtumo. Taigi galite nepaisyti caret parinkties, kad išjungtumėte tokių skirtumų ignoravimą.

 Lietuvių