Feature Request: compare image using template matching

jefleponot commented 8 years ago

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 commented 8 years ago

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

jefleponot commented 8 years ago

thank you james, I will do it

A9T9 commented 7 years ago

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