0

I'd like to cut several circular parts (Px) out of a big image (A) and compare them pixel by pixel to same sized round portions (Qx) of another big image (B) using resemble.js (or similar, but I did not find anything else which seems suitable) to get a factor of similarity.

Update: With the "factor of similarity" I mean the average of the color distance (length of rgb vector between both pixels) of one pixel of Px to the corresponding pixel of Qx. If both images are exactly the same then the images are 100% identical, factor would be 1. If they are identical but one is inverted, they are 0% identical because each pixel has the maximum possible color distance to the corresponding one of the image to compare. In this case, the factor would be 0.

The aim is to find the Px which fits best Qx at any orientation (5 degrees rotation steps), and to replace Qx with Px in the final image at the best fitting angle.

Imagine some kind of photo mosaic. I want to reassamble a given image by circular smaller images that are all in a big image for conveniance. First I have to cut them out, then place them on the photo in a hex grid manner. The challenge is to find which fits best at which position and in what orientation.

enter image description here

I am usually a C# backend developer, my JavaScript knowledge is pretty basic. If it is not neccessary to cut out images at all and my approach is not like an experienced JS frontend developer would do that, please say so. Thanks for all answers and comments in advance!

elsni
  • 1,953
  • 2
  • 17
  • 35
  • What do you mean by "a factor of similarity"? It would be informative if you post imageA and imageB. – markE Aug 19 '15 at 13:14
  • `resemble.js` is a javascript library to compare two images and find the difference between them . and you don't have to cut the image to find the difference it do the job itself . i can't understand your question that clearly – Sora Aug 19 '15 at 13:18
  • @markE: I updated the question and exlained what I mean by factor of similarity. Hope it is clearer now. – elsni Aug 19 '15 at 13:27
  • @Sora: I just want to compare portions of images, and they are circular and turned by different angles, so the pixels of the boundary box which are not in the circle itself should not matter. I dont know how to deal with circular images. – elsni Aug 19 '15 at 13:29
  • can't you just cut the portions you want to compare and save them as images and then send those images to resemble.js for comparison ? – Sora Aug 19 '15 at 13:33
  • 1
    Your question is still unclear in my mind. A picture is worth a thousand words...in this case 2 images: imageA and imageB. – markE Aug 19 '15 at 13:35
  • @markE: I dont have real pictures yet. Imagine some kind of photo mosaic. I want to reassamble a given image by circular smaller images that are all in a big image for conveniance. First I have to cut them out, then place them on the photo in a hex grid manner. The challenge is to find which fits best at which position and in what orientation. – elsni Aug 19 '15 at 13:42
  • @Sora: I'm thinking of hundreds of different images.... like css sprites, but circular, not square. Ok, they are given and do not change. But the image to compare to should be user uploadable therefore dynamic. And as we are on the client, so we have no disk IO. – elsni Aug 19 '15 at 13:48
  • can you give us like a sketch of the two images and explain the process to us ? i still can't understand what u need . did you try anything so far to solve your problem ? – Sora Aug 20 '15 at 06:43
  • Included a sketch :) – elsni Aug 20 '15 at 08:56

0 Answers0