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

API JavaScript с открытым исходным кодом для сравнения изображений

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

Иногда требуется сравнить два изображения, чтобы увидеть, насколько они похожи. Это очень сложный процесс, и для его выполнения требуются хорошие знания. Библиотека pixelmatch с открытым исходным кодом может быть очень полезным выбором для сравнения двух изображений в любой среде. Поскольку библиотека не имеет зависимостей и работает с необработанными типизированными массивами данных изображения, ее можно использовать в нескольких средах, таких как Node или браузеры и т. д.

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

Обнаружение сглаживания — очень полезная функция, потому что обычно было замечено, что рендеринг одних и тех же данных в разных приложениях, устройствах или операционных системах может давать слегка отличающиеся результаты. Но в основном рекомендуется игнорировать эти небольшие различия или тесты, чтобы получить более значимые данные.

Previous Next

Начало работы с пиксельным соответствием

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

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

 npm install pixelmatch

Что такое тестирование на совпадение пикселей?

Если вам нужно сравнить два изображения, чтобы проверить, есть ли между ними какая-либо разница, вы можете использовать для этой цели тестирование совпадения пикселей. Может быть два типа изображений: исходное изображение и измененное изображение. Вы можете использовать приложение, которое может извлекать изображения со снимка экрана вашего приложения, после чего можно использовать библиотеку сравнения изображений для сравнения этих изображений и отображения результатов.

Сравнение изображений с помощью библиотеки JavaScript

Библиотека pixelmatch с открытым исходным кодом предоставляет полную функциональность для простого сравнения изображений внутри приложений JavaScript. Разработчики программного обеспечения должны предоставить данные изображения для сравнения, а также место вывода, куда необходимо записать данные изображения с различиями. Им также необходимо указать размер, который представляет собой ширину и высоту трех изображений. Вы можете использовать параметр порога, который позволяет изображениям немного отличаться, что в некоторых случаях может быть полезно. Обратите внимание, что библиотека pixelmatch требует, чтобы изображения были одинакового размера.

Сравнение изображений онлайн через JavaScript API

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

Сравните изображения в Node. js через пиксель

 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));
 Русский