A dead simple javascript library for extracting the dominant color(s) from an image.
Usage is simple. Create an image (or grab an image URL), then get its dominant color & palette.
var img = document.getElementById('image');
// or
var img = 'http://example.com/path-to-image.jpg'
RGBaster.colors(img, {
success: function(payload) {
// You now have the payload.
console.log(payload.dominant);
console.log(payload.secondary);
console.log(payload.palette);
}
});The colors function takes an object as optional second parameter, with the following options:
Type: int
Default: 10
Maximum number of palette colors to return. Only the top palette colors will be returned.
Type: array
Default: []
RGB colors to exclude when counting colors.
For example to exclude white and black use: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ]
Type: function
Default: undefined
Function to call after image processing has completed.
The function will receive one payload argument with the following structure:
{
// {string} dominant rgb color
dominant: 'rgb(0,0,0)',
// {string} secondary rgb color
secondary: 'rgb(0,0,1)',
// {array} list of colors in the image (limited by paletteSize)
palette: [ 'rgb(0,0,1)', 'rgb(0,0,2)' ]
}RGBaster.colors(img, {
// return up to 30 top colors from the palette
paletteSize: 30,
// don't count white
exclude: [ 'rgb(255,255,255)' ],
// do something when done
success: function(payload){
console.log('Dominant color:', payload.dominant);
console.log('Secondary color:', payload.secondary);
console.log('Palette:', payload.palette);
}
})rgbaster.js depends on the following browser functionality:
- Canvas
- CORS
- Array.prototype.map (can i use, compatibility table)
Check the linked resources above to determine current level of browser support.
 |
|---|
| Brian Gonzalez |
RGBaster was created to modularize a feature of another plugin I built called adaptive backgrounds. Check it out.
MIT