Comparing webpage screenshots to identify changes? [closed]
Hi there, I've been researching how to do this for the last week, but I'm very new to image processing/OpenCV and would like some pointers to guide me, please.
I'm currently using BackstopJS to do change detection on my website. BackstopJS uses a pixel-perfect algorithm - so when anything is slightly out of place it'll highlight it.
This pixel-perfect method is ok, but when an element is added/removed, the entire contents of the page below it gets shifted and gets highlighted as a result - which makes it difficult to see whether the elements below it have actually changed or just shifted down.
I'd like to use OpenCV to compare two versions of a web page and only highlight the elements which have actually changed - i.e. not just shifted downwards because an earlier element towards the top of the page has changed.
Key point registration
I've looked at the image registration methods and got a prototype working that compares the two images and shows the key points between them, but I don't know what the next step is and I'm struggling to find examples, as most of them relate to image orientation, rather than shifting and comparing differences.
Image difference comparison
I've also looked at the image difference examples, but they only seem to use static images with the same dimensions. As the page heights can change and elements can shift, I don't know if this is the best solution.
Template matching
The last option I've looked at is template matching, I read a post that I could take a small 16x16 tile from the reference web page and try to find it in the test web page I'm comparing it against - creating tiles for the entire reference image and looking for matches. This seems like it makes sense, but I'm struggling to find examples of what to do next.
Thank you in advance, any help or guidance would be really appreciated.