How It Works
User can import or imbed any image file into a webpage. The image is taken and converted into a canvas. A canvas is an HTML element that is used as a container for graphics. This canvas is then passed to a function that obtains the array of pixels from it. While looping through this array of pixels the function converts each RGB representation to its HSL equivalent. When the pixel is converted to HSL it is then added to a hash table based on its value. Each has entry consits of a key value pair the key represents what section of the color space it is in and the value is a weighted average of all other pixels that have been found in that area
After the hash table has been generated the averaged values are added to a max heap based on the number of times they occur. Then the top ten entries of the max heap are displayed with their coresponding hex values
Color Space
RGB
HSV
HSV calculations.xlsx
HSL
HSL calculations.xlsx
Source Code
Image manipulation javascript.js
Color conversions colorConverter.js
Demo
A demo can be found here.
Possible Improvements
- Adjust bucket borders
- Add buckets for greys
- Weight saturated colors more then dull colors
- Pre process image to tell if it is similar colors or not
- Remove need for converting to HSL
- Add parameters (skip pixels)