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

Open Source JavaScript API pro porovnání obrázků

Knihovna JavaScript umožňuje softwarovým programátorům porovnávat dva obrázky ve více prostředích, jako je uzel nebo prohlížeče atd.

Někdy je potřeba porovnat dva obrázky, abyste viděli, jak jsou si podobné. Je to velmi komplikovaný proces a jeho provedení vyžaduje dobré znalosti. Open source knihovna pixelmatch může být velmi užitečnou volbou pro porovnávání dvou obrázků v jakémkoli prostředí. Vzhledem k tomu, že knihovna nemá žádné závislosti a pracuje na nezpracovaných typizovaných polích obrazových dat, lze ji použít ve více prostředích, jako je uzel nebo prohlížeče atd.

Pixelmatch má velmi malou velikost a velmi snadno se používá, ale je to velmi rychlá knihovna pro porovnání obrázků na úrovni pixelů. Je napsán v JavaScriptu a původně vytvořen pro porovnání snímků obrazovky v testech. Knihovna podporuje funkce, jako je detekce vyhlazených pixelů a metriky percepčních barevných rozdílů.

Detekce vyhlazování je velmi užitečná funkce, protože obvykle bylo pozorováno, že vykreslování stejných dat v různých aplikacích, zařízeních nebo operačních systémech může generovat mírně odlišné výsledky. Většinou se však doporučuje ignorovat tyto malé rozdíly nebo testy, aby bylo možné získat smysluplnější data.

Previous Next

Začínáme s pixelmatch

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

Nainstalujte pixelmatch přes NPM

 npm install pixelmatch

Co je Pixel Match Testing?

Pokud potřebujete porovnat dva obrázky, abyste zjistili, zda mezi nimi existuje nějaký rozdíl, můžete pro tento účel použít testování shody pixelů. Mohou existovat dva typy obrázků, původní obrázek a upravený obrázek. Můžete použít aplikaci, která dokáže načíst obrázky ze snímku obrazovky vaší aplikace, a poté lze použít knihovnu pro porovnání obrázků k porovnání těchto obrázků a zobrazení výsledků.

Porovnání obrázků pomocí knihovny JavaScript

Open source knihovna pixelmatch poskytla kompletní funkčnost pro snadné porovnávání obrázků v aplikacích JavaScript. Vývojáři softwaru musí poskytnout obrazová data pro srovnání a také výstupní místo, kam je potřeba zapsat obrazová data s rozdíly. Musí také poskytnout rozměr, kterým je šířka a výška tří obrázků. Můžete použít možnost prahu, která umožňuje, aby se obrázky mírně odlišovaly, což může být v některých případech skvělé. Upozorňujeme, že knihovna pixelmatch vyžaduje, aby obrázky měly stejnou velikost.

Porovnání obrázků online přes JavaScript API

 const img1 = img1Context.getImageData(0, 0, width, height);
const img2 = img2Context.getImageData(0, 0, width, height);
const diff = diffContext.createImageData(width, height);
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
diffContext.putImageData(diff, 0, 0);

Porovnejte obrázky v Node.js pomocí pixelmatch

 const fs = require('fs');
const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');
const img1 = PNG.sync.read(fs.readFileSync('img1.png'));
const img2 = PNG.sync.read(fs.readFileSync('img2.png'));
const {width, height} = img1;
const diff = new PNG({width, height});
pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
fs.writeFileSync('diff.png', PNG.sync.write(diff));
 Čeština