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

Question

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

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

Спасибо

Answer 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
}

Answer 2

Думаю, вас может заинтересовать эта библиотека JavaScript с именем resemble.js , которая:

Анализирует и сравнивает изображения с использованием HTML5 canvas и JavaScript.

Resemble.js можно использовать для анализа любых требований к изображениям и их сравнения в браузере.Однако он был разработан и создан для использования библиотекой визуальной регрессии https://github.com/Huddle/PhantomCSS PhantomCSS.PhantomCSS должен иметь возможность игнорировать сглаживание, так как это приведет к различиям между снимками экрана, полученными с разных компьютеров.

Resemble.js использует HTML5 File API для анализа данных изображения и canvas для рендеринга изображенияразличия

Answer 3

Мы только что выпустили легковесную библиотеку RembrandtJS , которая делает именно это и работает как в браузере с использованием HTML5 Canvas2D API, так и на сервере через встроенный Node.JS замена node-canvas , Он принимает как BLOB-объекты, так и 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
    }
  })

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

Answer 4

Может быть, этот инструмент поможет: https://github.com/HumbleSoftware/js-imagediff/