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, ігноруючи згладжування

Кожне зображення складається з пікселів, і під час порівняння цих зображень ви порівнюєте колір кожного пікселя на першому зображенні з кольором пікселя у відповідному місці зображення. Отже, у випадку, якщо деякі пікселі несхожі, ви можете сказати, що зображення не збігаються. Зазвичай згладжування відбувається, коли роздільна здатність зображення дуже низька, щоб процесор міг правильно відобразити плавні лінії. Техніка згладжування застосована для надання більш гладкого вигляду, і таким чином ви отримуєте різні результати порівняння для кожного середовища. Деякі зображення відрізняються під час порівняння через згладжування. Бібліотека 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.

Порівняйте зображення, ігноруючи згладжування та вставку через 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 надає функціональні можливості для ігнорування символів введення в полях введення під час порівняння двох зображень у їхніх власних програмах. Текстова вставка в елементі введення тексту є проблемою для завдань візуальної регресії, оскільки вона завжди блимає. Іноді під час порівняння двох текстових полів або зображень полів введення через вказівку зображення не вдається порівняти різницю в пікселях. Тож ви можете ігнорувати параметр вставки, щоб вимкнути ігнорування таких відмінностей.

 Українська