janishutz/color-thief
1
0
Fork 0
mirror of https://github.com/janishutz/color-thief.git synced 2025-11-25 13:54:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Drag-n-drop support+. Thanks nspady.

Browse Source 
- Updated to higher res demo images.
- Split template into two.
- Style clean up in color-thief.js
This commit is contained in:
Lokesh Dhakar
2013-06-23 12:33:07 -07:00
parent d468c7f08a
commit d3800d634d
13 changed files with 678 additions and 691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
js/color-thief.js
View File

@@ -2,19 +2,16 @@
* Color Thief v1.0
* by Lokesh Dhakar - http://www.lokeshdhakar.com
*
* Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
* License
* -------
* Creative Commons Attribution 2.5 License:
* http://creativecommons.org/licenses/by/2.5/
*
* # Thanks
* Nick Rabinowitz: Created quantize.js which is used by the median cut palette function. This handles all the hard clustering math.
* John Schulz: All around mad genius who helped clean and optimize the code. @JFSIII
*
* ## Classes
* CanvasImage
* ## Functions
* getDominantColor()
* createPalette()
* getAverageRGB()
* createAreaBasedPalette()
* Thanks
* ------
* Nick Rabinowitz - For creating quantize.js.
* John Schulz - For clean up and optimization. @JFSIII
* Nathan Spady - For adding drag and drop support to the demo page.
*
* Requires jquery and quantize.js.
*/
@@ -30,12 +27,12 @@ var CanvasImage = function (image) {
// If jquery object is passed in, get html element
imgEl = (image.jquery) ? image[0] : image;
this.canvas = document.createElement('canvas');
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
document.body.appendChild(this.canvas);
this.width = this.canvas.width = imgEl.width;
this.width = this.canvas.width = imgEl.width;
this.height = this.canvas.height = imgEl.height;
this.context.drawImage(imgEl, 0, 0, this.width, this.height);
@@ -62,19 +59,19 @@ CanvasImage.prototype.removeCanvas = function () {
};
var ColorThief = function () {};
/*
* getDominantColor(sourceImage)
* getColor(sourceImage)
* returns {r: num, g: num, b: num}
*
* Use the median cut algorithm provided by quantize.js to cluster similar
* colors and return the base color from the largest cluster. */
function getDominantColor(sourceImage) {
var palette = createPalette(sourceImage, 5);
var dominant = palette[0];
return dominant;
}
ColorThief.prototype.getColor = function(sourceImage) {
var palette = this.getPalette(sourceImage, 5);
var dominantColor = palette[0];
return dominantColor;
};
/*
@@ -86,13 +83,13 @@ function getDominantColor(sourceImage) {
*
* BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.
*/
function createPalette(sourceImage, colorCount) {
ColorThief.prototype.getPalette = function(sourceImage, colorCount) {
// Create custom CanvasImage object
var image = new CanvasImage(sourceImage),
imageData = image.getImageData(),
pixels = imageData.data,
pixelCount = image.getPixelCount();
var image = new CanvasImage(sourceImage);
var imageData = image.getImageData();
var pixels = imageData.data;
var pixelCount = image.getPixelCount();
// Store the RGB values in an array format suitable for quantize function
var pixelArray = [];
@@ -112,117 +109,11 @@ function createPalette(sourceImage, colorCount) {
// Send array to quantize function which clusters values
// using median cut algorithm
var cmap = MMCQ.quantize(pixelArray, colorCount);
var cmap = MMCQ.quantize(pixelArray, colorCount);
var palette = cmap.palette();
// Clean up
image.removeCanvas();
return palette;
}
/*
* getAverageRGB(sourceImage)
* returns {r: num, g: num, b: num}
*
* Add up all pixels RGB values and return average.
* Tends to return muddy gray/brown color. Most likely, you'll be better
* off using getDominantColor() instead.
*/
function getAverageRGB(sourceImage) {
// Config
var sampleSize = 10;
// Create custom CanvasImage object
var image = new CanvasImage(sourceImage),
imageData = image.getImageData(),
pixels = imageData.data,
pixelCount = image.getPixelCount();
// Reset vars
var i = 0,
count = 0,
rgb = {r:0, g:0, b:0};
// Loop through every # pixels. (# is set in Config above via the blockSize var)
// Add all the red values together, repeat for blue and green.
// Last step, divide by the number of pixels checked to get average.
while ( (i += sampleSize * 4) < pixelCount ) {
// if pixel is mostly opaque
if (pixels[i+3] > 125) {
++count;
rgb.r += pixels[i];
rgb.g += pixels[i+1];
rgb.b += pixels[i+2];
}
}
rgb.r = ~~(rgb.r/count);
rgb.g = ~~(rgb.g/count);
rgb.b = ~~(rgb.b/count);
return rgb;
}
/*
* createAreaBasedPalette(sourceImage, colorCount)
* returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]
*
* Break the image into sections. Loops through pixel RGBS in the section and average color.
* Tends to return muddy gray/brown color. You're most likely better off using createPalette().
*
* BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.
*
*/
function createAreaBasedPalette(sourceImage, colorCount) {
var palette = [];
// Create custom CanvasImage object
var image = new CanvasImage(sourceImage),
imageData = image.getImageData(),
pixels = imageData.data,
pixelCount = image.getPixelCount();
// How big a pixel area does each palette color get
var rowCount = Math.round(Math.sqrt(colorCount)),
colCount = rowCount,
colWidth = Math.round(image.width / colCount),
rowHeight = Math.round(image.height / rowCount);
// Loop through pixels section by section.
// At the end of each section, push the average rgb color to palette array.
for (var i = 0, vertOffset; i<rowCount; i++) {
vertOffset = i * rowHeight * image.width * 4;
for (var j = 0, horizOffset, rgb, count; j<colCount; j++) {
horizOffset = j * colWidth * 4;
rgb = {r:0, g:0, b:0};
count = 0;
for (var k = 0, rowOffset; k < rowHeight; k++) {
rowOffset = k * image.width * 4;
for (var l = 0, offset; l < colWidth; l++) {
offset = vertOffset + horizOffset + rowOffset + (l * 4);
rgb.r += pixels[offset];
rgb.g += pixels[offset+1];
rgb.b += pixels[offset+2];
count++;
}
}
rgb.r = ~~(rgb.r/count);
rgb.g = ~~(rgb.g/count);
rgb.b = ~~(rgb.b/count);
palette.push(rgb);
}
}
return palette;
}
}