mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 13:54:25 +00:00
d3800d634d
- Updated to higher res demo images. - Split template into two. - Style clean up in color-thief.js
119 lines
3.3 KiB
JavaScript
119 lines
3.3 KiB
JavaScript
/*
|
|
* Color Thief v1.0
|
|
* by Lokesh Dhakar - http://www.lokeshdhakar.com
|
|
*
|
|
* License
|
|
* -------
|
|
* Creative Commons Attribution 2.5 License:
|
|
* http://creativecommons.org/licenses/by/2.5/
|
|
*
|
|
* 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.
|
|
*/
|
|
|
|
|
|
/*
|
|
CanvasImage Class
|
|
Class that wraps the html image element and canvas.
|
|
It also simplifies some of the canvas context manipulation
|
|
with a set of helper functions.
|
|
*/
|
|
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.context = this.canvas.getContext('2d');
|
|
|
|
document.body.appendChild(this.canvas);
|
|
|
|
this.width = this.canvas.width = imgEl.width;
|
|
this.height = this.canvas.height = imgEl.height;
|
|
|
|
this.context.drawImage(imgEl, 0, 0, this.width, this.height);
|
|
};
|
|
|
|
CanvasImage.prototype.clear = function () {
|
|
this.context.clearRect(0, 0, this.width, this.height);
|
|
};
|
|
|
|
CanvasImage.prototype.update = function (imageData) {
|
|
this.context.putImageData(imageData, 0, 0);
|
|
};
|
|
|
|
CanvasImage.prototype.getPixelCount = function () {
|
|
return this.width * this.height;
|
|
};
|
|
|
|
CanvasImage.prototype.getImageData = function () {
|
|
return this.context.getImageData(0, 0, this.width, this.height);
|
|
};
|
|
|
|
CanvasImage.prototype.removeCanvas = function () {
|
|
$(this.canvas).remove();
|
|
};
|
|
|
|
|
|
var ColorThief = function () {};
|
|
|
|
/*
|
|
* 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. */
|
|
ColorThief.prototype.getColor = function(sourceImage) {
|
|
var palette = this.getPalette(sourceImage, 5);
|
|
var dominantColor = palette[0];
|
|
return dominantColor;
|
|
};
|
|
|
|
|
|
/*
|
|
* createPalette(sourceImage, colorCount)
|
|
* returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]
|
|
*
|
|
* Use the median cut algorithm provided by quantize.js to cluster similar
|
|
* colors.
|
|
*
|
|
* BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.
|
|
*/
|
|
ColorThief.prototype.getPalette = function(sourceImage, colorCount) {
|
|
|
|
// Create custom CanvasImage object
|
|
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 = [];
|
|
for (var i = 0, offset, r, g, b, a; i < pixelCount; i++) {
|
|
offset = i * 4;
|
|
r = pixels[offset + 0];
|
|
g = pixels[offset + 1];
|
|
b = pixels[offset + 2];
|
|
a = pixels[offset + 3];
|
|
// If pixel is mostly opaque and not white
|
|
if (a >= 125) {
|
|
if (!(r > 250 && g > 250 && b > 250)) {
|
|
pixelArray.push([r, g, b]);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Send array to quantize function which clusters values
|
|
// using median cut algorithm
|
|
var cmap = MMCQ.quantize(pixelArray, colorCount);
|
|
var palette = cmap.palette();
|
|
|
|
// Clean up
|
|
image.removeCanvas();
|
|
|
|
return palette;
|
|
} |