1. Товары
  2.   Изображение
  3.   JavaScript
  4.   LooksSame
 
  

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

Библиотека JavaScript с открытым исходным кодом, которая поддерживает сравнение изображений PNG внутри приложений JavaScript. Он поддерживает сравнение изображений PNG, игнорируя сглаживание и игнорируя знак вставки. 

Сравнение изображений с изображениями с помощью JavaScript может быть довольно сложным и сложным. Выбор неправильного инструмента также может сильно повлиять на производительность. LooksSame — это библиотека JavaScript с открытым исходным кодом, включающая функции сравнения изображений PNG внутри приложений JavaScript и готовая к работе на любой машине. Библиотека создавалась с учетом восприятия цвета человеком. Библиотека в основном создавалась для нужд визуального регрессионного тестирования утилиты Gemini.

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

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

Previous Next

Начало работы с LookSame

Рекомендуемый способ установки LooksSame — через NPM. Пожалуйста, используйте следующую команду для его установки.

Установите LooksSame через NPM

 npm install looks-same

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

Библиотека LooksSame дает программистам возможность программно сравнивать свои PNG-изображения с помощью Node.js. Вам необходимо указать правильный путь к изображениям PNG или буферу в качестве параметра. Одним из простых примеров сравнения изображений может быть снимок экрана элемента DOM с изображением и использование библиотеки для сравнения его с локальным изображением. Вы также можете использовать RequestLogger для регистрации запроса изображения и сравнения тела ответа с локальным файлом с помощью метода Buffer.compare().

Сравнить изображения NG через 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);

Сравнение изображений с игнорированием каретки

Бесплатная библиотека LooksSame предоставляет функциональные возможности для игнорирования курсора в полях ввода при сравнении двух изображений внутри их собственных приложений. Текстовый курсор в элементе ввода текста является проблемой для задач визуальной регрессии, потому что он всегда мигает. Иногда при сравнении двух текстовых полей или изображений полей ввода из-за того, что изображение ставит курсор, сравнение не удается из-за разницы в пикселях. Таким образом, вы можете игнорировать параметр вставки, чтобы отключить игнорирование таких различий.

 Русский