6

Is there a way to compare two image files that have different filenames? So I am looking to see if they are equal with javascript. Is this possible?

The use for this: I have a gallery of images that needs to pop up in the lightbox. When the lightbox opens, I am hooking into the callback to check for the duplicate images and when found, remove them from the lightbox gallery so users are not seeing repeated images.

3 Answers3

5

I guess you could. Psuedocode:

  • Check if the images have the same width and height. If not, they can't be the same.
  • Create a canvas that will fit both images side-by-side.
  • Draw the images on the canvas.
  • Compare them pixel-for-pixel. This can be done fairly easily using code borrowed from getPixel from HTML Canvas?
  • Remember to break out of loops as soon as a single pixel doesn't match.
  • Your worst-case runtime will be O(wh), which occurs when the images are actually equal.
Community
  • 1
  • 1
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Yep, just what I was in the process of typing. It'd work, but'd be very, very slow for a large number of images. – Ben Clayton Jun 22 '12 at 16:11
  • Hmmm, in hindsight I think the better approach for me is to use AJAX and PHP to process the comparison....Seems using JS is quite complicated. –  Jun 22 '12 at 16:12
  • Eh, PHP would have to do a pixel-by-pixel comparison too. You'd just be putting load on your server instead of distributing it to the user's machine. – Niet the Dark Absol Jun 22 '12 at 16:13
  • Sorry, i realized I did a horrible job explaining what I needed...I edited the post, so you can more clearly see what I am trying to do. –  Jun 22 '12 at 16:20
0

Check images sizes if their sizes equal or not.

And do not forget to check widths and heights also.

To find image file size

Community
  • 1
  • 1
totten
  • 2,769
  • 3
  • 27
  • 41
  • Two images can be visually identical while having different filesizes. Compare a full-RGB PNG image vs. the same image in Indexed-PNG. Compare that Indexed-PNG image vs. one with unused colours in the pallette. – Niet the Dark Absol Jun 22 '12 at 16:12
  • Please give me an example, I'm courious about that. – totten Jun 22 '12 at 16:13
  • http://adamhaskell.net/img/imgsize/ The same image three times, different saving methods, different filesizes, same format. – Niet the Dark Absol Jun 22 '12 at 16:23
  • ok, thanks for this info. @Rick do not need that kind of sensivity, so he can use my method. – totten Jun 22 '12 at 17:14
0

Tyler is correct, you can't access the filesystem without the users' consent.

But if you want to compare images that are available to the javascript code, for example by using an url or using an upload field, you should check out this SO question: Compare two Images in JavaScript

Basically, you convert the image to a canvas element and use the base64 value to compare the two, the same way people confirm if a document is "valid" by checking the checksum of that document.

Community
  • 1
  • 1
JeanMertz
  • 2,250
  • 2
  • 21
  • 26