Comparar dos imágenes en JavaScript

Solución:

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

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

Usar el getBase64Image función (definida en la respuesta que vinculé) para comparar dos imágenes:

var a = new Image(),
    b = new Image();
a.src="https://foroayuda.es/chrome://favicon/" + url_a;
b.src="https://foroayuda.es/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
}

Creo que puede estar interesado en esta biblioteca de JavaScript llamada resemble.js que:

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

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

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

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 nodo-lienzo de reemplazo de Node.JS. Acepta tanto blobs como urls como fuentes de imágenes, por lo que simplemente puede 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: "https://foroayuda.es/chrome://favicon/" + url_a,
  imageB: "https://foroayuda.es/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 cierto 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 suite de pruebas.

---

---

Utiliza Nuestro Buscador