1. produkty
  2.   obraz
  3.   JavaScript
  4.   LooksSame
 
  

JavaScript API pro porovnání obrázků PNG

Open Source JavaScript Library, která podporuje porovnávání obrázků PNG v aplikacích JavaScript. Podporuje porovnání obrázků PNG ignorováním vyhlazování a ignorováním stříšky. 

Porovnání obrázků s obrázky pomocí JavaScriptu může být docela těžké a náročné. Výběr nesprávného nástroje může také výrazně ovlivnit výkon. LooksSame je open source knihovna JavaScriptu, která obsahuje funkce pro porovnávání obrázků PNG v aplikacích JavaScript a bude fungovat hned po vybalení na každém počítači. Knihovna byla vytvořena s ohledem na lidské vnímání barev. Knihovna byla vytvořena především pro potřeby vizuálního regresního testování pro utilitu Gemini.

Tato knihovna umožňuje vývojářům rychle a snadno porovnávat rozdíl mezi dvěma obrázky PNG pomocí příkazů JavaScriptu. Poskytuje podporu pro zpracování obrázků PNG buď poskytnutím cest k souborům nebo obrázků uvnitř vyrovnávací paměti. Použití výchozího nastavení identifikuje pouze znatelný rozdíl a pokud potřebujete zjistit nějaké konkrétní rozdíly, vyberte striktní možnost.

Knihovna poskytuje podporu pro několik důležitých funkcí souvisejících s porovnáváním obrázků, jako je porovnávání obrázků s ignorováním stříšky, porovnávání obrázků s ignorováním antialiasingu, získávání hranic rozdílů, získávání shluků rozdílů, vytváření obrázků rozdílů, vytváření obrázků rozdílů jako vyrovnávací paměti, porovnávání barev a mnoho dalších.

Previous Next

Začínáme s LooksSame

Doporučený způsob instalace LooksSameis přes NPM. K instalaci použijte následující příkaz.

Nainstalujte LooksSame přes NPM

 npm install looks-same

Porovnejte obrázky PNG v aplikacích JavaScript

Knihovna LooksSame dává softwarovým programátorům možnost programově porovnávat své obrázky PNG pomocí Node.js. Jako parametr musíte zadat správnou cestu k obrázkům PNG nebo vyrovnávací paměti. Jedním jednoduchým příkladem porovnání obrázků může být pořízení snímku obrazovky prvku DOM s obrázkem a použití knihovny k jeho porovnání s místním obrázkem. Můžete také použít RequestLogger k zaprotokolování požadavku na obrázek a porovnání těla odpovědi s místním souborem pomocí metody Buffer.compare().

Porovnejte obrázky PNG pomocí JavaScript API

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

Porovnejte obrázky PNG ignorováním vyhlazování

Každý obrázek se skládá z pixelů a při porovnávání těchto obrázků porovnáváte barvu každého pixelu na obrázku s barvou pixelu v odpovídajícím místě obrázku. Takže v případě, že se některé pixely liší, můžete zjistit, že obrázky se neshodují. K aliasingu obvykle dochází, když je rozlišení obrázku velmi nízké, aby procesor správně vykreslil hladké čáry. Technika vyhlazování se používá k dosažení hladšího vzhledu, a proto získáte různé výsledky srovnání pro každé prostředí. Některé obrázky se liší při jejich porovnávání kvůli vyhlazování. Knihovna LooksSame řeší problémy s vyhlazováním tak, že ignoruje určité pixely, kde se vyhlazování pravděpodobně vyskytlo. Tyto rozdíly budou ve výchozím nastavení ignorovány.

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.

Porovnejte obrázky ignorováním antialiasingu a stříšky přes 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);

Porovnání obrázků ignorováním stříšky

Bezplatná knihovna LooksSame poskytuje funkce pro ignorování stříšky na vstupních polích při porovnávání dvou obrázků v jejich vlastních aplikacích. Textová stříška v prvku pro zadávání textu je bolestí pro úlohy vizuální regrese, protože vždy bliká. Někdy při porovnávání dvou textových polí nebo obrázků vstupních polí, protože obrázek dává stříšku, srovnání selhává pro rozdíl v pixelech. Takže můžete ignorovat možnost stříšky a zakázat ignorování takových rozdílů.

 Čeština