images - Compara dos imágenes en JavaScript

slide image html

Question

Estoy tratando de determinar si dos imágenes son iguales en javascript (incluso si las URL src son diferentes).

Mi caso de uso específico está dentro de una extensión de Chrome (aunque esta extensión de Chrome no es un factor importante en la pregunta) Puedo obtener la imagen de un favicon png almacenado en la base de datos interna de chrome configurando img src en: ''chrome://favicon/''+url donde url es la url real del sitio web. Sin embargo, ahora quiero encontrar todos los favicons únicos. Dado que todos ellos tendrán una URL diferente a la base de datos interna, ¿hay una manera fácil de comparar imágenes en javascript?

Gracias

Answer 1

Acabamos de lanzar una biblioteca liviana, RembrandtJS , que hace exactamente eso y funciona tanto en el navegador usando la API HTML5 Canvas2D como en el servidor a través del lienzo de nodos de reemplazo Node.JS. Acepta tanto blobs como urls como fuentes de imagen, así que simplemente puedes hacer esto:

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

Como puede ver, Rembrandt también le permite introducir valores de umbral, si su dominio requiere un margen de maniobra con respecto al color o la diferencia de píxeles. Dado que funciona tanto en el navegador como en el servidor (nodo), facilita la integración en su conjunto de pruebas.

Answer 2

Creo que te puede interesar esta biblioteca de JavaScript llamada resemble.js que:

Analiza y compara imágenes con lienzo HTML5 y JavaScript.

Resemble.js puede utilizarse para cualquier análisis de imagen y requisito de comparación que pueda tener en el navegador. Sin embargo, ha sido diseñado y construido para ser utilizado por la biblioteca de regresión visual PhantomCSS https://github.com/Huddle/PhantomCSS . PhantomCSS debe poder ignorar el antialiasing ya que esto causaría diferencias entre las capturas de pantalla derivadas de diferentes máquinas.

Resemble.js utiliza la API de archivos HTML5 para analizar datos de imagen y lienzo para representar diferencias de imagen.

Answer 3

No, no hay una manera especialmente fácil de hacer esto. JavaScript no se creó para manejar operaciones de bajo nivel, como trabajar directamente con datos binarios para, por ejemplo, el procesamiento de imágenes.

Podría usar un elemento <canvas> para codificar en base64 cada imagen y luego comparar las cadenas de base64 resultantes, pero esto solo le dirá si las imágenes son idénticas o no.

Para usar la función getBase64Image (definida en la respuesta que getBase64Image ) para comparar dos imágenes:

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 4

Tal vez esta herramienta ayude: https://github.com/HumbleSoftware/js-imagediff/