Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature Request: compare image using template matching #58

Open
jefleponot opened this issue Feb 15, 2016 · 10 comments
Open

Feature Request: compare image using template matching #58

jefleponot opened this issue Feb 15, 2016 · 10 comments
Labels
Feature request

Comments

@jefleponot
Copy link

Hi @jamescryer and all contributors,

Thanks a lot for your great library.

I use resembleJS with phantomCss to compare browsers rendering and to check defacement intrusions.

It is just very difficult to compare renderings with different size.
Here is an example :
resemblejstemplate

The second image is 99.75% different compared to the first. And they have different dimensions.

When you compare a part of image, it doesn't work because positions matching are not apply correctly.

        function normalise(img, w, h){
            var c;
            var context;

            if(img.height < h || img.width < w){
                c = document.createElement('canvas');
                c.width = w;
                c.height = h;
                context = c.getContext('2d');
                context.putImageData(img, 0, 0);     // <=== why x:0 y:0
                return context.getImageData(0, 0, w, h);
            }

            return img;
        }

It could be better if the result was :
resemblejstemplate2

The second image is 46.63% different compared to the first

Could you integrated a template matching method as you can find on openCV code ?

http://docs.opencv.org/2.4/doc/tutorials/imgproc/histograms/template_matching/template_matching.html

Regards
Jef le ponot
@jamescryer
Copy link
Member

That's a very interesting feature request. I would certainly be happy to review/accept a Pull Request.

@jefleponot
Copy link
Author

thank you james, I will do it

@A9T9
Copy link

A9T9 commented Jan 4, 2017 •
edited

A few months ago this post/discussion was my helpful starting point when I checked for Javascript template matching libraries. Unfortunately there was nothing available yet. So we started our own project. Here is the result:

TemplateMatching.JS

It works :-) ...and is fast (demo here). And some more optimizations are planned. I hope this helps other developers that need to find images inside images with Javascript.

Cheers,
Mathias

@jefleponot
Copy link
Author

jefleponot commented Jan 4, 2017 •
edited

Hi Mathias @A9T9 ,

I code a TemplateMatching long time ago but I realize that resemble.JS was not the best place to commit it. Why ?
Because I use the "template Maching" to navigate otherwise clicking on selectors. So I commit in the CasperJS project :

https://github.com/casperjs/casperjs/pull/1723/files

I try you demo and that crashes my Firefox ...

Tschüss

@jefleponot
Copy link
Author

it crashes also on chromium

@A9T9
Copy link

A9T9 commented Jan 4, 2017 •
edited

Bonjour,

... and thanks for the feedback.

Hmm... all works fine on my PC (and every other machine I tried, including Ubuntu just now). I tested with Firefox and Chrome. Does it work for you (at least) in Chrome?

@jefleponot
Copy link
Author

Guten tag :-)

I test your code with window 7 google chrome : it works (but it is quite slow !!!)

My previous tests was made with ubuntu 16.4 x86_64

@jefleponot
Copy link
Author

webgl is not activate on my Graphic card ... and your code doesn't test it even it is required.

@A9T9
Copy link

A9T9 commented Jan 4, 2017

Ok, that it explains it. Very useful feedback, thanks! WebGL is the "secret sauce" of this implementation, and without it, it runs slow like... Javascript ;-)

This is a first release. Over the next weeks we will not only improve the speed further, but also add proper error checking to the demo page.

@jefleponot
Copy link
Author

jefleponot commented Jan 4, 2017 •
edited

On this opposite, i made a very simple code (no promises, ...) with context('2d').
result is immediate. It will be very interesting if you could review it.

A mixture of these 2 codes could be nice 😄 .

https://github.com/casperjs/casperjs/pull/1723/files

Regards,
jef

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Feature request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jamescryer @jefleponot @A9T9