Jump to content

Compare 2 Images to See if Identical - Using Base64


Recommended Posts


I'm trying to use Base64 to compare two images to see if they are identical. 

The images are accessed using: 

var thumb5Original = ""; 
var thumb5Edited = ""; 

thumb5Original = canvas5.toDataURL('image/png');
thumb5Edited = canvas5.toDataURL('image/png');

  I then check them using this: 

if (thumb5Original.toString() == thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Original Image"; 
if (thumb5Original.toString() != thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Edited Image"; 

The problem is, I'm getting "Edited Image" even when the images are identical.  Is there an error in the way I'm comparing the images? 

Thank you  

Link to comment
Share on other sites

I would print the values that you're comparing to see how different they are.  If they are completely different then I would suggest that the data URL is not a way to compare an image.  If they are only slightly different then that may be caused by a minor change you overlooked.

Link to comment
Share on other sites

I just came back here to close this thread.  justsomeguy, you were right on the money.  I used document.write() to print the values to screen, the printed values showed only minor differences, they were due to a minor change I had forgotten about. 

One thing I did learn from this is that canvas.toDataURL() actually does work quite well for determining whether 2 images are duplicates.   

justsomeguy, thank you very much for your time. 


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...