image comparison - pixel by pixel or other method

Hi All,

I am using canvas (R0j0hound) plugin, where I will draw similar as other image and then I wanted to do comparison of 2 images pixel by pixel or similar.

can anyone make plugin for this :

https://github.com/Huddle/Resemble.js

or

https://github.com/tcorral/IM.js/

or

http://stackoverflow.com/questions/9136 ... vas-or-any

Need help on this.

R0J0hound — rexrainbow zenox98 .. your help appreciated

I create myself but somehow it is not working and giving error in getContext().

http://290px.com/imjs.zip

sorry, i don`t have enough time now (((

How about compare the string from exp: imageUrl or exp: AsJSON in canvas plugin?

rexrainbow ... concept is for drawing competition .... so in player will draw in canvas then canvas will be compared with main image.

socialpilgrim

As rex said you could use the asjson expression to load the image into a array for faster comparison than using rgbAt().

Here's an example with three examples:

https://www.dropbox.com/s/5c5ei994g3fjt ... .capx?dl=1

/examples30/imageCompare.capx

Since it's for a drawing competition I find that just comparing the alpha gives a more meaningful percentage. Just checking all the pixels like with your links gives a 90% similarity to a blank canvas.

Anyways I implemented three methods in the capx.

The first follows the examples in your links and gives a percentage and rms number. I guess rms could be used as a way to compare.

The second only looks at the colored areas of both images and gives a pretty good measurement.

The last one finds the bounds of both drawings and compares both as if they were the same size. This allows a small box to match a big one.

R0J0hound - thanks for the big help, my 90% problem is solved with Alpha compare, which majorly I was looking for.

Just wanted to know if I am doing wrong ...In compare all even if I compare with right "blank" image, it gives me % around 93% ... does it mean it is comparing while pixels as well.

And what is RMS .

Regards

Yeah the compare all will do that. It's probably a bit flawed now that I think about it since it's comparing per component instead of per pixel.

So a transparent pixel rgba(0,0,0,0) will be 75% similar to a black pixel rgba(0,0,0,255) instead of not at all.

Fix that and a blank image should give a lower percentage.

"rms" is a term used in your last link. It's basically the distance between the two pictures.

You still have that capx so I can take a peek?

socialpilgrim

As rex said you could use the asjson expression to load the image into a array for faster comparison than using rgbAt().

Here's an example with three examples:

https://dl.dropboxusercontent.com/u/542 ... mpare.capx

Since it's for a drawing competition I find that just comparing the alpha gives a more meaningful percentage. Just checking all the pixels like with your links gives a 90% similarity to a blank canvas.

Anyways I implemented three methods in the capx.

The first follows the examples in your links and gives a percentage and rms number. I guess rms could be used as a way to compare.

The second only looks at the colored areas of both images and gives a pretty good measurement.

The last one finds the bounds of both drawings and compares both as if they were the same size. This allows a small box to match a big one.

lennaert

link updated

lennaert

link updated

Thanks R0j0.

I used all three methods to check for image changes pasted into canvas taken from a user media camera object.

It works ^_^

Now I can do a variant of motion detection with a simple camera which has no ambient light detection

Muchos gracias

I do have a side question relating to canvas, none related to the topic, but related to how I use the compare.

I tried applying the "toon" effect on either a paster object and on a sprite object... This in order to make simpler images which are easier to check for changes.

The effect is lost when a sprite with that effect applied is pasted into a canvas object.

Any way to preserve applied webgl effects when pasted into an object ?

lennaert

Effects being lost when pasting objects to it is a limitation of the canvas plugin. The paster plugin was then made to support webgl and pasting with effects. Unfortunately for your case the paster plugin doesn't let you access pixel data like the canvas. It is concivably possible to add such a feature the paster but I've no interest or motivation to do that.

However if you don't mind some juggling you could take the paster.imageUrl expression and load that into the canvas object.

However if you don't mind some juggling you could take the paster.imageUrl expression and load that into the canvas object.

Thanks for the tip, I will try that