Как различить 2 изображения с помощью JavaScript с помощью js-imagediff

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

Посмотрите на следующий пример и попробуйте поискать различия самостоятельно (если у вас есть время, в противном случае просто продолжайте чтение, и мы можем гарантировать, что есть полностью 4 различия):

Но действительно ? Это кажется немного сложным изображением, и нам понадобится время, чтобы открыть их самим. Как насчет написания некоторого JavaScript, который мог бы определить разницу для нас и который в результате должен генерировать изображение вроде:

Намного лучше, есть различия в наших изображениях! Разграничение изображений — действительно потрясающая задача, которую легко решить благодаря js-imagediff. js-imagediff — это утилита imagediff на основе JavaScript / Canvas, которую можно использовать в браузере и с Node.js. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь.

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

1. Установка

Первое, что вам нужно сделать, это загрузить Скрипт библиотеки js-imagediff или минимизированный, или исходный код и включите его в ваш HTML-документ, используя тег script:

Как только библиотека включена, вы сможете получить к ней доступ в браузере с помощью window.imagediff или просто imagediff,

2. Найдите различия

Эта библиотека довольно проста в использовании, для начала вам понадобится как минимум 2 изображения для сравнения. Затем создайте соответственно переменную из элемента изображения и получите ее значение, это значение может быть элемент или экземпляр Image класс JavaScript (вам нужно будет установить атрибут src вручную с помощью JavaScript).

Затем используйте метод diff imagediff, который ожидает в качестве аргументов изображения для дифференциации. Этот метод является синхронным и немедленно возвращает ImgData, который содержит изображение, которое подчеркивает различия между предоставленными изображениями. Эти ImgData могут быть нарисованы на канве (метод putImageData холста), чтобы показать вашему пользователю различия:

// Instance of the first image
var ImageA = document.getElementById("image-element-1");
// or
// var ImageA = new Image();
// ImageA.src = "image1-file.png";
// Instance of the second image
var ImageB = document.getElementById("image-element-2");
// or
// var ImageB = new Image();
// ImageB.src = "image2-file.png";
// Create the image that shows the difference between the images
var diff = imagediff.diff(ImageA, ImageB);
// Create a canvas with the imagediff method (with the size of the generated image)
var canvas = imagediff.createCanvas(diff.width, diff.height);
// Retrieve the 2d context
var context = canvas.getContext('2d');
// Draw the generated image with differences on the canvas
context.putImageData(diff, 0, 0);
// Now you can do whatever you want with the canvas
// for example render it inside a div element:
document.getElementById("some-div-id").appendChild(canvas);

С другой стороны вы можете проверить, является ли изображение равным другому, используя равный метод imagediff:

// Instance of the first image
var ImageA = document.getElementById("imageA");
// or
// var ImageA = new Image();
// ImageA.src = "image1-file.png";
// Instance of the second image
var ImageB = document.getElementById("imageB");
// or
// var ImageB = new Image();
// ImageB.src = "image2-file.png";
// Create the image that shows the difference between the images
var isEqual = imagediff.equal(ImageA, ImageB , 0);
// True or False according to the images
console.log(isEqual);

Третий параметр указывает допуск в пикселях.

Заметка

Единственная проблема, с которой вам нужно разобраться, это то, как вы проверяете, были ли загружены изображения или нет (так как вы не можете получить разницу от 2 изображений, которые недоступны). В наших примерах мы будем использовать переменную flag, которая увеличивает ее значение при загрузке изображения. Он увеличивается путем назначения одного и того же обратного вызова при загрузке для всех изображений (когда переменная flag достигает 2, то же количество изображений будет продолжено с diff).

Пример: загрузка изображений через тег img

В следующем примере показано, как различить 2 изображения, которые загружаются через теги в документе. Обратный вызов onLoad будет выполняться только после загрузки изображений (чтобы проверить событие загрузки изображений), и после завершения дифференцирования холст добавится к тому же элементу div, где находятся изображения:

// A flag variable to indicate wheter the 2 images were loaded or not
var loadedImages = 0;
// Create a variable from the first image
var ImageA = document.getElementById("imageA");
// Create a variable from the second image
var ImageB = document.getElementById("imageB");
/**
* Callback that should be executed when the images are finally loaded.
*
**/
var onImagesLoaded =  function () {
// Increment the images loaded flag
loadedImages++;
// Skip execution of the callback if the 2 images have been not loaded
// Otherwise continue with the diff
if(loadedImages != 2){
return;
}
// Create the image that shows the difference between the images
var diff = imagediff.diff(ImageA, ImageB);
// Create a canvas with the imagediff method (with the size of the generated image)
var canvas = imagediff.createCanvas(diff.width, diff.height);
// Retrieve the 2d context
var context = canvas.getContext('2d');
// Draw the generated image with differences on the canvas
context.putImageData(diff, 0, 0);
// Add the canvas element to the div element to show
document.getElementById("result-container").appendChild(canvas);
// Display some alert !
alert("Done!");
};
// Set the onLoad callback of the images
ImageA.addEventListener("load", onImagesLoaded, false);
ImageB.addEventListener("load", onImagesLoaded, false);

С некоторыми примерами изображений результат будет примерно таким:

Пример: загрузка изображений с помощью JavaScript

Если вы не работаете в документе с изображениями, а манипулируете ими напрямую и абстрактно с помощью JavaScript, то у вас не будет никаких тег, который означает, что вам нужно будет обрабатывать ваши изображения с Image класс JavaScript.

Однако так же, как вы делаете с изображениями, загруженными через HTML, вам нужно будет проверить, было ли изображение загружено или нет через onload Перезвоните. Как только дифференциация закончится, холст будет добавлен к result-container div, чтобы показать результат графически:

// A flag variable to indicate wheter the 2 images were loaded or not
var loadedImages = 0;
// Create a variable from the first image
var ImageA = new Image();
ImageA.src = "./example_a.png";
// Create a variable from the second image
var ImageB = new Image();
ImageB.src = "./example_b.png";
/**
* Callback that should be executed when the images are finally loaded.
*
*
**/
var onImagesLoaded =  function () {
// Increment the images loaded flag
loadedImages++;
// Skip execution of the callback if the 2 images have been not loaded
// Otherwise continue with the diff
if(loadedImages != 2){
return;
}
// Create the image that shows the difference between the images
var diff = imagediff.diff(ImageA, ImageB);
// Create a canvas with the imagediff method (with the size of the generated image)
var canvas = imagediff.createCanvas(diff.width, diff.height);
// Retrieve the 2d context
var context = canvas.getContext('2d');
// Draw the generated image with differences on the canvas
context.putImageData(diff, 0, 0);
// Add the canvas element to the div element to show
document.getElementById("result-container").appendChild(canvas);
// Display some alert !
alert("Done!");
};
// Set the onLoad callback of the images
ImageA.onload = onImagesLoaded;
ImageB.onload = onImagesLoaded;

В нашем примере будет сгенерировано то же черное изображение, что и в предыдущем примере: