2012-06-22 27 views
5

¿Hay alguna manera de comparar dos archivos de imagen que tienen diferentes nombres de archivo? Así que estoy buscando para ver si son iguales con javascript. es posible?¿Es posible comparar dos imágenes en Javascript?

El uso para esto: Tengo una galería de imágenes que debe aparecer en el lightbox. Cuando se abre la caja de luz, me estoy conectando con la devolución de llamada para verificar las imágenes duplicadas y, cuando las encuentre, quítelas de la galería lightbox para que los usuarios no vean imágenes repetidas.

+0

Considerando que JavaScript no tiene acceso al sistema de archivos, no. –

+0

¿Qué tipo de comparación estás tratando de hacer? – nullpotent

+0

Intentando ver si dos imágenes son idénticas, incluso si tienen diferentes nombres de archivo. –

Respuesta

5

Supongo que podrías. Psuedocode:

  • Comprobar si las imágenes tienen la misma anchura y altura. Si no, no pueden ser lo mismo.
  • Cree un lienzo que se ajuste a ambas imágenes una al lado de la otra.
  • Dibuja las imágenes en el lienzo.
  • Compárelos pixel-for-pixel. Esto se puede hacer con bastante facilidad utilizando el código prestado de getPixel from HTML Canvas?
  • Recuerde salirse de los bucles tan pronto como un solo píxel no coincida.
  • Su peor tiempo de ejecución será O (wh), que ocurre cuando las imágenes son realmente iguales.
+0

Sí, justo lo que estaba en el proceso de escribir. Funcionaría, pero sería muy, muy lento para una gran cantidad de imágenes. –

+0

Hmmm, en retrospectiva, creo que el mejor enfoque para mí es utilizar AJAX y PHP para procesar la comparación ... Parece que usar JS es bastante complicado. –

+0

Eh, PHP también tendría que hacer una comparación píxel por píxel. Simplemente estaría cargando su servidor en lugar de distribuirlo a la máquina del usuario. –

0

Compruebe los tamaños de las imágenes si sus tamaños son iguales o no.

Y no olvide comprobar el ancho y la altura también.

To find image file size

+0

Dos imágenes pueden ser idénticas visualmente al tener diferentes tamaños de archivo. Compare una imagen PNG RGB completa frente a la misma imagen en PNG indexado. Compare esa imagen indexada-PNG contra una con colores no utilizados en la paleta. –

+0

Por favor, dame un ejemplo, estoy en contra de eso. – totten

+0

http://adamhaskell.net/img/imgsize/ La misma imagen tres veces, diferentes métodos de guardado, diferentes tamaños de archivo, mismo formato. –

0

Tyler es correcta, no se puede acceder al sistema de archivos sin el consentimiento de los usuarios.

Pero si se quiere comparar las imágenes que están disponibles para el código JavaScript, por ejemplo mediante el uso de una dirección URL o el uso de un campo de carga, que debe salir esta cuestión de forma: Compare two Images in JavaScript

Básicamente, convertir la imagen a un elemento canvas y use el valor base64 para comparar los dos, de la misma manera que las personas confirman si un documento es "válido" al verificar la suma de verificación de ese documento.