API JavaScript з відкритим вихідним кодом для порівняння зображень
Бібліотека JavaScript дозволяє програмістам порівнювати два зображення в різних середовищах, таких як Node або браузери тощо.
Іноді потрібно порівняти два зображення, щоб побачити, наскільки вони схожі. Це дуже складний процес, і для його виконання потрібні хороші знання. Бібліотека pixelmatch з відкритим кодом може бути дуже корисним вибором для порівняння двох зображень у будь-якому середовищі. Оскільки бібліотека не має залежностей і працює з необробленими типізованими масивами даних зображень, тому її можна використовувати в багатьох середовищах, таких як Node або браузери тощо.
pixelmatch має дуже малий розмір і дуже простий у використанні, але є дуже швидкою бібліотекою порівняння зображень на рівні пікселів. Він написаний на JavaScript і спочатку створений для порівняння скріншотів у тестах. Бібліотека підтримує такі функції, як виявлення згладжених пікселів і перцептивні показники різниці кольорів.
Виявлення згладжування є дуже корисною функцією, оскільки зазвичай було помічено, що відтворення тих самих даних у різних програмах, пристроях або операційних системах може призвести до дещо відмінних результатів. Але здебільшого рекомендується ігнорувати ці невеликі відмінності або тести, щоб отримати більш значущі дані.
Початок роботи з pixelmatch
Рекомендований спосіб встановлення pixelmatch — за допомогою NPM. Щоб установити його, скористайтеся наступною командою.
Встановіть pixelmatch через NPM
npm install pixelmatch Що таке Pixel Match Testing?
Якщо вам потрібно порівняти два зображення, щоб перевірити, чи є між ними якась різниця, для цієї мети можна використати перевірку збігу пікселів. Зображення можуть бути двох типів: вихідне зображення та змінене зображення. Ви можете використовувати програму, яка може отримувати зображення зі знімка екрана вашої програми, а потім бібліотеку порівняння зображень можна використовувати для порівняння цих зображень і відображення результатів.
Порівняння зображень за допомогою бібліотеки 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 через pixelmatch
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));
