1. Produkti
  2.   Attēls
  3.   JavaScript
  4.   LooksSame
 
  

JavaScript API, lai salīdzinātu PNG attēlus

Atvērtā pirmkoda JavaScript bibliotēka, kas atbalsta PNG attēlu salīdzināšanu JavaScript lietotnēs. Tā atbalsta PNG attēlu salīdzināšanu, ignorējot antialiasing un ignorējot caret. 

Attēlu salīdzināšana ar attēliem, izmantojot JavaScript, var būt diezgan sarežģīta un izaicinoša. Nepareiza rīka izvēle var arī ievērojami ietekmēt veiktspēju. LooksSame ir atvērtā pirmkoda JavaScript bibliotēka, kurā ir iekļauta funkcionalitāte PNG attēlu salīdzināšanai JavaScript lietojumprogrammās, un tā darbosies katrā datorā. Bibliotēka veidota, ņemot vērā cilvēka krāsu uztveri. Bibliotēka galvenokārt tika izveidota vizuālās regresijas testēšanas vajadzībām Gemini utilītai.

Šī bibliotēka ļauj izstrādātājiem ātri un viegli salīdzināt atšķirību starp diviem PNG attēliem, izmantojot JavaScript komandas. Tas ir nodrošinājis atbalstu PNG attēlu apstrādei, nodrošinot ceļus uz failiem vai attēliem buferī. Izmantojot noklusējuma iestatījumus, tiks identificētas tikai ievērojamās atšķirības, un, ja jums ir jāatrod īpašas atšķirības, lūdzu, atlasiet stingro opciju.

Bibliotēka ir nodrošinājusi atbalstu vairākām svarīgām funkcijām, kas saistītas ar attēlu salīdzināšanu, piemēram, attēlu salīdzināšana, ignorējot caret, attēlu salīdzināšana ar antialiasing ignorēšanu, atšķirību robežu iegūšana, atšķirību kopu iegūšana, atšķirību attēlu veidošana, atšķirību attēlu veidošana kā buferis, krāsu salīdzināšana un daudz vairāk.

Previous Next

Darba sākšana ar LooksSame

Ieteicamais veids, kā instalēt LooksSameis, izmantojot NPM. Lūdzu, izmantojiet šo komandu, lai to instalētu.

Instalējiet LooksSame, izmantojot NPM

 npm install looks-same

Salīdziniet PNG attēlus JavaScript lietotnēs

LooksSame bibliotēka sniedz programmatūras programmētājiem iespēju programmatiski salīdzināt savus PNG attēlus, izmantojot Node.js. Kā parametrs ir jānorāda pareizais ceļš uz PNG attēliem vai buferi. Viens vienkāršs attēlu salīdzināšanas piemērs var būt DOM elementa ekrānuzņēmuma uzņemšana ar attēlu un bibliotēkas izmantošana, lai to salīdzinātu ar vietējo attēlu. Varat arī izmantot RequestLogger, lai reģistrētu attēla pieprasījumu un salīdzinātu atbildes pamattekstu ar vietējo failu, izmantojot Buffer.compare() metodi.

Salīdziniet PNG attēlus, izmantojot JavaScript API

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

Salīdziniet PNG attēlus, ignorējot antialiasing

Katrs attēls sastāv no pikseļiem, un, salīdzinot šos attēlus, jūs salīdzināt katra pikseļa krāsu attēlā ar pikseļu krāsu attiecīgajā attēla vietā. Tātad, ja daži pikseļi ir atšķirīgi, varat noteikt, ka attēli neatbilst. Parasti aizstājvārds notiek, ja attēla izšķirtspēja ir ļoti zema, lai procesors varētu pareizi atveidot gludas līnijas. Anti-aliasing tehnika tiek izmantota, lai nodrošinātu vienmērīgāku izskatu un tādējādi jūs iegūstat dažādus salīdzināšanas rezultātus katrā vidē. Dažiem attēliem ir atšķirības, salīdzinot tos antialiasing dēļ. Bibliotēka LooksSame risina antialiasing problēmas, ignorējot noteiktus pikseļus, kuros, iespējams, ir notikusi anti-aliasing. Šīs atšķirības pēc noklusējuma tiks ignorētas.

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 antialiasing 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 antialiasing issues by ignoring certain of the pixels where antialiasing is likely to have occurred. These differences will be ignored by default.

Salīdziniet attēlus, ignorējot Antialiasing un Caret, izmantojot 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);

Attēlu salīdzinājums, ignorējot Caret

Bezmaksas LooksSame bibliotēka ir nodrošinājusi funkcionalitāti, lai ignorētu ievades lodziņus, vienlaikus salīdzinot divus attēlus savās lietojumprogrammās. Teksta ievades elementā teksts apgrūtina vizuālās regresijas uzdevumus, jo tas vienmēr mirgo. Dažkārt, salīdzinot divus tekstlodziņus vai ievades lodziņus attēlus, attēla dēļ salīdzinājums neizdodas attiecībā uz pikseļu atšķirību. Tātad jūs varat ignorēt caret opciju, lai atspējotu šādu atšķirību ignorēšanu.

 Latviski