Comparar dos imágenes en JavaScript

Question

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

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

Gracias

Answer 1

No, no hay ninguna en especial fácil manera de hacer esto. JavaScript no fue creado para manejar operaciones de bajo nivel, como trabajar directamente con datos binarios para, digamos, procesamiento de imágenes.

Puede use a <canvas> element to base64 encode each image, y luego comparar las cadenas resultantes base64, pero esto solo le dirá si las imágenes son idénticas o no.

Para utilizar la función getBase64Image (definido en la respuesta he vinculado) 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 2

Tal vez esta herramienta le ayudará: https://github.com/HumbleSoftware/js-imagediff/

Answer 3

Creo que puede estar interesado en este JavaScript biblioteca llamada resemble.js que: "analyses and compares images with HTML5 canvas and JavaScript".

Answer 4

Acabamos de lanzar una biblioteca liviana RembrandtJS, que hace exactamente eso y funciona tanto en el navegador usando HTML5 Canvas2D API como en el servidor a través del nódulo de reemplazo Node.JS de reemplazo. Se acepta tanto manchas y URLs como fuentes de imagen 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: '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 se puede ver Rembrandt también le permite presentarse valores de umbral, si el dominio requiere un poco de margen de maniobra con respecto al color o píxeles diferencia . Dado que funciona tanto en el navegador como en el servidor (nodo), facilita la integración en su conjunto de pruebas.