ColorFinder: The user guide
Go to the home page | Go to the demo
The basics
ColorFinder is a javascript library that can give you the dominant color of any image. To use it, it is very simple:<script src="/somewhere/you/put/the/file/colorfinder.js"></script>
<script>
var rgb = new ColorFinder().getMostProminentColor(document.getElementById('image'));
document.getElementById("color").style.backgroundColor = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
</script>
This snippet assumes you have an image element in your page whose id is image. It also assumes there is an element whose id is color and sets its background to the dominant color of the image.
NOTE: Due to restrictions to the canvas object, this works only if the image comes from your own domain.
Mark preferences
You can build the ColorFinder object with a callback method. This method:- takes three numbers as arguments: R, G and B. These are the components for the color that should be weighted. They are between 0 and 255.
- should return a positive number marking your weight over the specified color.
var rgb = new ColorFinder(myCallbackMethod).getMostProminentColor(document.getElementById('image'));
Examples of callback methods
The names should be self explanatory:function favorHue(r,g,b) {
return (Math.abs(r-g)*Math.abs(r-g) + Math.abs(r-b)*Math.abs(r-b) + Math.abs(g-b)*Math.abs(g-b))/65535*50+1;
}
function favorBright(r,g,b) {
return r+g+b+1;
}
function favorDark(r,g,b) {
return 768-r-g-b+1;
}
function excludeWhite(r,g,b) {
return (r>245 && g>245 && b>245) ? 0 : 1;
}
function excludeBlack(r,g,b) {
return (r<10 && g<10 && b<10) ? 0 : 1;
}
function favorBrightExcludeWhite(r,g,b) {
if (r>245 && g>245 && b>245) return 0;
return (r*r+g*g+b*b)/65535*20+1;
}
You can see them in action in the demo.