1. Tuotteet
  2.   Kuva
  3.   JavaScript
  4.   LooksSame
 
  

JavaScript-sovellusliittymä PNG-kuvien vertailuun

Avoimen lähdekoodin JavaScript-kirjasto, joka tukee PNG-kuvien vertailua JavaScript-sovelluksissa. Se tukee PNG-kuvien vertaamista jättämällä huomioimatta antialiasoinnin ja huomioimatta caretin. 

Kuvien vertaaminen kuviin JavaScriptin avulla voi olla melko vaikeaa ja haastavaa. Väärän työkalun valinta voi myös vaikuttaa suorituskykyyn suuresti. LooksSame on avoimen lähdekoodin JavaScript-kirjasto, joka sisältää toiminnot PNG-kuvien vertailuun JavaScript-sovelluksissa ja joka toimii heti valmiina jokaisessa koneessa. Kirjasto on luotu ottaen huomioon ihmisen värin havaitseminen. Kirjasto luotiin pääasiassa visuaalisen regressiotestauksen tarpeita varten Gemini-apuohjelmalle.

Tämän kirjaston avulla kehittäjät voivat nopeasti ja helposti verrata kahden PNG-kuvan eroja helposti JavaScript-komentojen avulla. Se on tarjonnut tukea PNG-kuvien käsittelyyn joko tarjoamalla polut tiedostoihin tai kuviin puskurissa. Oletusasetusten käyttäminen tunnistaa vain huomattavan eron, ja jos haluat havaita tiettyjä eroja, valitse tiukka vaihtoehto.

Kirjasto on tarjonnut tukea useille tärkeille kuvien vertailuun liittyville ominaisuuksille, kuten kuvien vertaaminen ohittamalla caret, kuvien vertaaminen antialiasoinnin huomioimatta, erotusrajojen saaminen, erotusklustereiden saaminen, erotuskuvien rakentaminen, erotuskuvien rakentaminen puskuriksi, värien vertailu ja monta lisää.

Previous Next

LooksSamen käytön aloittaminen

Suositeltu tapa asentaa LooksSameis NPM:n kautta. Käytä seuraavaa komentoa asentaaksesi se.

Asenna LooksSame NPM:n kautta

 npm install looks-same

Vertaa PNG-kuvia JavaScript-sovelluksissa

LooksSame-kirjasto antaa ohjelmoijille mahdollisuuden verrata PNG-kuviaan ohjelmallisesti Node.js:n avulla. Sinun on annettava oikea polku PNG-kuviin tai puskuriin parametrina. Yksi yksinkertainen esimerkki kuvien vertailusta voi olla kuvakaappaus DOM-elementistä kuvan kanssa ja verrata sitä paikalliseen kuvaan kirjaston avulla. Voit myös käyttää RequestLoggeria kirjaamaan kuvapyynnön ja vertailla vastauksen runkoa paikalliseen tiedostoon käyttämällä Buffer.compare()-menetelmää.

Vertaa PNG-kuvia JavaScript API:n kautta

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

Vertaa PNG-kuvia jättämällä antialiasing huomioimatta

Jokainen kuva koostuu pikseleistä ja näitä kuvia vertaillessa verrataan jokaisen kuvan pikselin väriä kuvan vastaavassa paikassa olevaan pikselin väriin. Joten jos jotkin pikselit ovat erilaisia, voit kertoa, että kuvat eivät täsmää. Yleensä aliasointi tapahtuu, kun kuvan tarkkuus on hyvin alhainen, jotta prosessori hahmontaa oikein tasaiset viivat. Anti-aliasing-tekniikkaa käytetään antamaan tasaisempi ulkonäkö ja siten saat erilaisia vertailutuloksia ympäristöä kohden. Joissakin kuvissa on eroja verrattaessa niitä antialiasoinnin vuoksi. LooksSame-kirjasto käsittelee anti-aliasointiongelmia jättämällä huomioimatta tietyt pikselit, joissa antialiasointi on todennäköisesti tapahtunut. Nämä erot ohitetaan oletuksena.

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.

Vertaa kuvia ohittamalla Antialiasing & Caret JavaScriptin avulla

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

Kuvien vertailu Caretin huomioimatta

Ilmainen LooksSame-kirjasto on tarjonnut toiminnot, joiden avulla voit jättää huomioimatta syöttöruutujen merkinnät vertaillessaan kahta kuvaa omissa sovelluksissaan. Tekstinsyöttöelementin Text caret on tuska visuaalisten regressiotehtävien kannalta, koska se vilkkuu aina. Joskus verrattaessa kahta tekstiruutua tai syöttöruutua kuvaa, kuvan takia vertailu epäonnistuu pikselierojen suhteen. Voit siis jättää huomiotta caret-vaihtoehdon poistaaksesi tällaisten erojen huomioimatta jättämisen.

 Suomen