1. Produkty
  2.   Obraz
  3.   JavaScript
  4.   pixelmatch
 
  

Open Source JavaScript API do porównywania obrazów

Biblioteka JavaScript umożliwia programistom porównywanie dwóch obrazów w wielu środowiskach, takich jak Node lub przeglądarki itp.

Czasami konieczne jest porównanie dwóch obrazów, aby zobaczyć, jak bardzo są podobne. Jest to bardzo skomplikowany proces i wymaga dobrej wiedzy, aby go zrealizować. Biblioteka pixelmatch typu open source może być bardzo przydatnym wyborem do porównywania dwóch obrazów w dowolnym środowisku. Ponieważ biblioteka nie ma zależności i działa na surowych tablicach danych obrazu, więc może być używana w wielu środowiskach, takich jak Node lub przeglądarki itp.

Dopasowanie pikseli jest bardzo małe i bardzo proste w użyciu, ale jest bardzo szybką biblioteką porównywania obrazów na poziomie pikseli. Jest napisany w JavaScript i początkowo stworzony do porównywania zrzutów ekranu w testach. Biblioteka obsługuje takie funkcje, jak wykrywanie wygładzonych pikseli i percepcyjne metryki różnicy kolorów.

Wykrywanie antyaliasingu jest bardzo przydatną funkcją, ponieważ zwykle zaobserwowano, że renderowanie tych samych danych w różnych aplikacjach, urządzeniach lub systemach operacyjnych może generować nieco odmienne wyniki. Jednak najczęściej zaleca się ignorowanie tych małych różnic lub testów, aby zebrać bardziej znaczące dane.

Previous Next

Pierwsze kroki z pixelmatch

Zalecanym sposobem instalacji pixelmatch jest użycie NPM. Użyj następującego polecenia, aby go zainstalować.

Zainstaluj pixelmatch przez NPM

 npm install pixelmatch

Co to jest testowanie dopasowania pikseli?

Jeśli chcesz porównać dwa obrazy, aby sprawdzić, czy jest między nimi jakaś różnica, możesz w tym celu użyć testu dopasowania pikseli. Mogą istnieć dwa typy obrazów: oryginalny obraz i zmodyfikowany obraz. Możesz użyć aplikacji, która może pobierać obrazy ze zrzutu ekranu Twojej aplikacji, a następnie biblioteki porównywania obrazów można użyć do porównania tych obrazów i wyświetlenia wyników.

Porównywanie obrazów za pomocą biblioteki JavaScript

pixelmatch biblioteki open source zapewnia pełną funkcjonalność do łatwego porównywania obrazów w aplikacjach JavaScript. Twórcy oprogramowania muszą dostarczyć dane obrazu do porównania, a także miejsce wyjściowe, w którym muszą zapisać dane obrazu z różnicami. Muszą również podać wymiar, który jest szerokością i wysokością trzech obrazów. Możesz użyć opcji progu, która pozwala na nieco inne obrazy, co w niektórych przypadkach może być świetne. Należy pamiętać, że biblioteka pixelmatch wymaga, aby obrazy miały ten sam rozmiar.

Porównanie obrazów online za pomocą interfejsu API JavaScript

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

Porównaj obrazy w Node.js za 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));
 Polski