Search code examples
javascriptcsshtmlsearch-engine

search an image by color palette using javascript


I am coding, in html5 and javascript, something like an image search engine (just like Google Image) but less complex, it's all done offline using an offline database, and I was wondering what's the best way to search an image by a color palette.

For example I type a name and then select the red color and the output would be all the images with that name that has a ton o the color red.

I was suggested to calculate a histogram for each color in hsv space. But I don't understand how to do that, and I think if I try to calculate an histogram for a bunch of images, pixel by pixel, for something like 12 colors would take a lot of time.

It must exist some better and faster way to do this.

Thanks in advance.


Solution

  • A histogram is the way to go. It would be easy enough to load an image into into canvas and then loop through the pixels. Basically you would have an JS object with keys representing the colours 0-255 initially set to zero and then adding 1 to a colour key whenever that colour is found in the process. That's how you would do it for an RGB histogram. I'm not sure about HSV. I can't vouch for the speed, but I don't think it would be slow, but obviously the speed would depend on the dimensions of the image.

    Since this is offline, what you may want to do, however, is use something like Python/Python Imaging Library to scan the images for you and load the histogram data into the database and then just use HTML and JS to interrogate the database.