Measure and locate areas of similar value in an image

I saw this picture online and wanted to see if I could create an algorithm to give ordinary images an effect like this: http://ift.tt/1BF03Rw

My idea was to take the input image and first find the largest area of pixels that are within a predefined threshold of similarity (basically are of similar value). Then I take those pixels and form a square containing all of them. After doing that until most of the image is covered in squares, (no overlapping squares) I plan to color the squares based on their values (so that lighter values might be colored white, midtones green, and dark shades purple.

My problem is that I can't find an algorithm to group pixels with similar values. It'd be nice if someone could point me in the right direction or if someone has some comments on my algorithm idea that's fine too.

As a side note, I'm going to make this completely in javascript so whatever method you suggest should preferably be fast and shouldn't require server side code (for example no storing of data for genetic algorithm training) Thanks in advance!