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

Interfejs API JavaScript do porównywania obrazów PNG

Biblioteka JavaScript typu Open Source, która obsługuje porównywanie obrazów PNG w aplikacjach JavaScript. Obsługuje porównywanie obrazów PNG przez ignorowanie antyaliasingu i ignorowanie karetki. 

Porównywanie obrazów z obrazami przy użyciu JavaScript może być dość trudne i trudne. Wybór niewłaściwego narzędzia może również znacznie wpłynąć na wydajność. LooksSame to biblioteka JavaScript o otwartym kodzie źródłowym, która zawiera funkcję porównywania obrazów PNG w aplikacjach JavaScript i będzie działać po wyjęciu z pudełka na każdym komputerze. Biblioteka została stworzona z uwzględnieniem percepcji barw przez człowieka. Biblioteka została stworzona głównie na potrzeby testowania regresji wizualnej dla narzędzia Gemini.

Ta biblioteka umożliwia programistom szybkie i łatwe porównywanie różnic między dwoma obrazami PNG za pomocą poleceń JavaScript. Zapewnia obsługę przetwarzania obrazów PNG, zapewniając ścieżki do plików lub obrazy w buforze. Korzystanie z ustawień domyślnych zidentyfikuje tylko zauważalną różnicę, a jeśli chcesz wykryć jakieś szczególne różnice, wybierz opcję ścisłą.

Biblioteka zapewnia obsługę kilku ważnych funkcji związanych z porównaniami obrazów, takich jak porównywanie obrazów z ignorowaniem karetki, porównywanie obrazów z ignorowaniem antyaliasingu, uzyskiwanie granic różnic, uzyskiwanie klastrów różnic, budowanie obrazów różnic, budowanie obrazów różnic jako bufor, porównywanie kolorów i wiele więcej.

Previous Next

Pierwsze kroki z LooksSame

Zalecany sposób instalacji LooksSameis przez NPM. Użyj następującego polecenia, aby go zainstalować.

Zainstaluj LooksSame przez NPM

 npm install looks-same

Porównaj obrazy PNG w aplikacjach JavaScript

Biblioteka LooksSame daje programistom możliwość programowego porównywania ich obrazów PNG przy użyciu Node.js. Jako parametr musisz podać poprawną ścieżkę do obrazów PNG lub bufora. Prostym przykładem porównania obrazów może być zrobienie zrzutu ekranu elementu DOM z obrazem i użycie biblioteki do porównania go z obrazem lokalnym. Można również użyć RequestLogger do rejestrowania żądania obrazu i porównywania treści odpowiedzi z plikiem lokalnym przy użyciu metody Buffer.compare().

Porównaj obrazy PNG za pomocą interfejsu API JavaScript

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

Porównaj obrazy PNG, ignorując antyaliasing

Każdy obraz składa się z pikseli, a porównując te obrazy, porównujesz kolor każdego piksela na obrazie z kolorem piksela w odpowiedniej lokalizacji obrazu. Jeśli więc niektóre piksele są różne, możesz stwierdzić, że obrazy nie pasują. Zwykle aliasing ma miejsce, gdy rozdzielczość obrazu jest bardzo niska, aby procesor mógł poprawnie renderować gładkie linie. Stosowana jest technika antyaliasingu, aby uzyskać gładszy wygląd, a tym samym uzyskać różne wyniki porównania w zależności od środowiska. Niektóre obrazy różnią się podczas porównywania ze względu na antyaliasing. Biblioteka LooksSame zajmuje się problemami z wygładzaniem, ignorując niektóre piksele, w których prawdopodobnie wystąpił wygładzanie. Te różnice będą domyślnie ignorowane.

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

Porównaj obrazy, ignorując antyaliasing i kursor za pomocą 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);

Porównanie obrazów przez ignorowanie Careta

Bezpłatna biblioteka LooksSame zapewnia funkcję ignorowania karetki w polach wejściowych podczas porównywania dwóch obrazów w ich własnych aplikacjach. Daszek tekstowy w elemencie wprowadzania tekstu jest uciążliwy dla zadań regresji wizualnej, ponieważ zawsze miga. Czasami podczas porównywania dwóch pól tekstowych lub obrazów pól wejściowych, ponieważ obraz daje karetkę, porównanie kończy się niepowodzeniem ze względu na różnicę pikseli. Możesz więc zignorować opcję karetki, aby wyłączyć ignorowanie takich różnic.

 Polski