0

I have created three different sizes of same image. And have given them name like image0_thumbnail.webp, image0_medium.webp and image0_original.webp.

And a user will be uploading these images. I don't want user to a select different image of same name (maybe from different directory).

If they do this then it will be compare these different sizes of same image and check whether they all are same image or not and show them error respectively.

I came across this Compare two Images in JavaScript , but it is for same sized images. I am looking for solution in Javascript. Please help

Thanks.

Community
  • 1
  • 1
Himanshu Mishra
  • 93
  • 2
  • 6
  • Please provide your code implementation, what have you tried to do? Don't just ask for a solution, show your efforts – fredmaggiowski Apr 08 '16 at 08:37
  • Hi @FredMaggiowski , I don't know I how to implement this. Currently I using the same implementation given in the [link](http://stackoverflow.com/questions/6066111/compare-two-images-in-javascript), but that's for same size images.And string comparison for filenames won't work here. – Himanshu Mishra Apr 08 '16 at 08:46
  • If you need to actually compare two images, of different sizes to know they're the same image (only on different scales).: As @Alex Nikulin suggested you could take the biggest image and resize it to the size of the smaller one and test it this way.. By the way if you are the one who generates the scaled images names and you know that a set of images with the same name has the same prefix (`image0_` in your example) why not using them? – fredmaggiowski Apr 08 '16 at 09:45
  • Thank you. I will try this. – Himanshu Mishra Apr 08 '16 at 09:53

1 Answers1

1

Resize to same size and then check;) For example i use Resemble.js to compare images, this lib can compare files, images and imageData. You have a luck, this lib has a property scaleToSameSize. 

resemble(image1).compareTo(image2).scaleToSameSize().onComplete(function(data){
        console.log(data.misMatchPercentage)
});
  1. Reading file in js is less than 1 second.
  2. Convert file to image and load to memory is taking some time, is another couple of seconds.
  3. Resizing no taking any large span of time (because all data is already read in memory).
  4. Compare images no taking any large span of time (because all data is already read in memory).
Alex Nikulin
  • 8,194
  • 4
  • 35
  • 37
  • Hi @Alex Nikulin , resize it where ? On system or use some 3rd party plugins/scripts and do it in browser ? If system then I think I browser will not allow me this kind of operation. And if I have to use some plugins to resize every image and then compare them, then I think that this solution would not be an efficient one. Please correct me if I am wrong. – Himanshu Mishra Apr 08 '16 at 09:21
  • In browser you can do what you want with files, read (through dnd or file dialog), change file content and upload to server, you can resize images, you can do effects like in instagram or photoshop.You can read image metadata. JS nowadays is very rich!!! – Alex Nikulin Apr 08 '16 at 11:19
  • And resize of image, in js is about from 1 to 10 lines of code, without any plugins. – Alex Nikulin Apr 08 '16 at 11:38