1. Продукти
  2.   Образ
  3.   JavaScript
  4.   LooksSame
 
  

JavaScript API за сравняване PNG изображения

JavaScript библиотека с отворен код, която поддържа сравняване на PNG изображения в JavaScript приложения. Поддържа сравняване на PNG изображения чрез игнориране на антиалиасинг и чрез игнориране на каретка. 

Сравняването на изображения с изображения с помощта на JavaScript може да бъде доста трудно и предизвикателно. Избирането на грешен инструмент също може значително да повлияе на ефективността. LooksSame е JavaScript библиотека с отворен код, която включва функционалност за сравняване на PNG изображения в JavaScript приложения и ще работи веднага на всяка машина. Библиотеката е създадена, като се вземе предвид човешкото цветоусещане. Библиотеката е създадена основно за нуждите на визуално регресионно тестване за помощната програма Gemini.

Тази библиотека позволява на разработчиците бързо и лесно да сравняват разликата между две PNG изображения с лекота с помощта на JavaScript команди. Осигурява поддръжка за обработка на PNG изображения чрез предоставяне на пътища към файловете или изображенията в буфера. Използването на настройките по подразбиране ще идентифицира само забележимата разлика и ако трябва да откриете някакви конкретни разлики, моля, изберете стриктната опция.

Библиотеката е предоставила поддръжка за няколко важни функции, свързани със сравненията на изображения, като сравняване на изображения с игнориране на каретка, сравняване на изображения с игнориране на антиалиасинг, получаване на граници на разликата, получаване на групи на разлика, изграждане на изображения на разлика, изграждане на изображения на разлика като буфер, сравняване на цветове и много повече.

Previous Next

Първи стъпки с LooksSame

Препоръчителният начин за инсталиране на LooksSame е чрез NPM. Моля, използвайте следната команда, за да го инсталирате.

Инсталирайте LooksSame чрез NPM

 npm install looks-same

Сравнете PNG изображения в JavaScript приложения

Библиотеката LooksSame дава възможност на софтуерните програмисти да сравняват програмно своите PNG изображения с помощта на Node.js. Трябва да предоставите правилния път към PNG изображенията или буфера като параметър. Един прост пример за сравнение на изображения може да бъде да направите екранна снимка на DOM елемента с изображението и да използвате библиотеката, за да го сравните с локалното изображение. Можете също да използвате RequestLogger, за да регистрирате заявка за изображение и да сравните тялото на отговора с локалния файл, като използвате метода Buffer.compare().

Сравнете PNG изображения чрез JavaScript API

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

Сравнете PNG изображения, като игнорирате Antialiasing

Всяко изображение се състои от пиксели и докато сравнявате тези изображения, вие сравнявате цвета на всеки пиксел в първото изображение с цвета на пиксела в съответното местоположение на изображението. Така че в случай, че някои пиксели са различни, можете да кажете, че изображенията не съвпадат. Обикновено псевдонимите се случват, когато разделителната способност на изображението е много ниска, за да може процесорът да изобрази правилно гладки линии. Техниката на анти-алиасинг се прилага, за да даде по-гладък вид и по този начин получавате различни резултати за сравнение за всяка среда. Някои изображения имат разлики при сравняването им поради антиалиасинг. Библиотеката LooksSame се справя с проблемите с изглаждането, като игнорира някои от пикселите, където е вероятно да е възникнало изглаждане. Тези разлики ще бъдат игнорирани по подразбиране.

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 анти-алиасинг 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 анти-алиасинг issues by ignoring certain of the pixels where анти-алиасинг is likely to have occurred. These differences will be ignored by default.

Сравнете изображения, като игнорирате Antialiasing & Caret чрез 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);

Сравнение на изображения чрез игнориране на Caret

Безплатната библиотека LooksSame предоставя функционалност за игнориране на каретка в полетата за въвеждане, докато сравнява две изображения в техните собствени приложения. Каретката с текст в елемента за въвеждане на текст е проблем за задачите за визуална регресия, защото винаги мига. Понякога, когато сравнявате две текстови полета или изображения на полета за въвеждане, поради каретката на изображението сравнението е неуспешно за разлика в пикселите. Така че можете да игнорирате опцията за каретка, за да деактивирате игнорирането на такива разлики.

 Български