Сравните два изображения в JavaScript

Я пытаюсь определить, являются ли два изображения одинаковыми в javascript (даже если URL-адреса src отличаются).

Мой конкретный вариант использования находится в пределах расширения chrome (хотя это расширение chrome на самом деле не влияет на вопрос). Я могу получить икону favicon png, хранящуюся внутри внутренней базы хрома, установив img src в: 'chrome://favicon/'+url, где URL-адрес является фактическим URL-адресом веб-сайта. Однако теперь я хочу найти все уникальные значки. Учитывая, что все они будут иметь другой URL-адрес для внутренней базы данных, есть ли простой способ сравнить изображения в javascript?

Спасибо

Ответы

Ответ 1

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

Вы можете использовать элемент <canvas> для base64 кодировать каждое изображение, а затем сравнить полученный base64, но это только скажет, идентичны ли изображения.

Чтобы использовать функцию getBase64Image (определенную в ответе, который я связал), чтобы сравнить два изображения:

var a = new Image(),
    b = new Image();
a.src = 'chrome://favicon/' + url_a;
b.src = 'chrome://favicon/' + url_b;

// might need to wait until a and b have actually loaded, ignoring this for now
var a_base64 = getBase64Image(a),
    b_base64 = getBase64Image(b);

if (a_base64 === b_base64)
{
    // they are identical
}
else
{
    // you can probably guess what this means
}

Ответ 2

Я думаю, вас может заинтересовать эта библиотека JavaScript под названием resemble.js, которая: "analyses and compares images with HTML5 canvas and JavaScript".

Ответ 3

Мы только что выпустили небольшую библиотеку RembrandtJS, которая делает именно это и работает как в браузере с использованием HTML5 Canvas2D API, так и на сервера через вставку Node.JS node -canvas. Он принимает как blobs, так и URL-адреса в качестве источников изображений, поэтому вы можете просто сделать это:

const rembrandt = new Rembrandt({
  // `imageA` and `imageB` can be either Strings (file path on node.js,
  // public url on Browsers) or Buffers
  imageA: 'chrome://favicon/' + url_a,
  imageB: 'chrome://favicon/' + url_b,

  thresholdType: Rembrandt.THRESHOLD_PERCENT,

  // The maximum threshold (0...1 for THRESHOLD_PERCENT, pixel count for THRESHOLD_PIXELS
  maxThreshold: 0,

  // Maximum color delta (0...255):
  maxDelta: 0,

  // Maximum surrounding pixel offset
  maxOffset: 0,

})

// Run the comparison
rembrandt.compare()
  .then(function (result) {

    if(result.passed){
      // do what you want
    }
  })

Как вы можете видеть, Rembrandt также позволяет вводить пороговые значения, если ваш домен требует некоторой свободы в отношении цвета или разности пикселей. Поскольку он работает как в браузере, так и на сервере (node), он упрощает интеграцию в ваш тестовый пакет.