mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 05:44:24 +00:00
added dominant color function
This commit is contained in:
Lokesh Dhakar
BIN
.sass-cache/1a2431077de703832e834851e7bd1b7a1f21919c/_base.sassc
Normal file
BIN
.sass-cache/1a2431077de703832e834851e7bd1b7a1f21919c/_base.sassc
Normal file
Binary file not shown.
BIN
.sass-cache/1a2431077de703832e834851e7bd1b7a1f21919c/app.sassc
Normal file
BIN
.sass-cache/1a2431077de703832e834851e7bd1b7a1f21919c/app.sassc
Normal file
Binary file not shown.
17
css/app.css
17
css/app.css
@@ -65,42 +65,41 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
|
||||
|
||||
/* line 3, ../sass/app.sass */
|
||||
body {
|
||||
background: #222222;
|
||||
color: white;
|
||||
color: #444444;
|
||||
font-family: "lucida grande", sans-serif;
|
||||
line-height: 1.625em;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
/* line 10, ../sass/app.sass */
|
||||
/* line 9, ../sass/app.sass */
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* line 17, ../sass/app.sass */
|
||||
/* line 16, ../sass/app.sass */
|
||||
.imageSection {
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
/* line 20, ../sass/app.sass */
|
||||
/* line 19, ../sass/app.sass */
|
||||
.imageSection img {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
/* line 23, ../sass/app.sass */
|
||||
/* line 22, ../sass/app.sass */
|
||||
.imageSection .colors {
|
||||
width: 400px;
|
||||
float: left;
|
||||
}
|
||||
/* line 26, ../sass/app.sass */
|
||||
/* line 25, ../sass/app.sass */
|
||||
.imageSection .colors .function {
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* line 29, ../sass/app.sass */
|
||||
/* line 28, ../sass/app.sass */
|
||||
.imageSection .colors .function .swatch {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
@@ -109,7 +108,7 @@ h1 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* line 36, ../sass/app.sass */
|
||||
/* line 35, ../sass/app.sass */
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
BIN
img/icon1.png
Normal file
BIN
img/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 B |
BIN
img/icon2.gif
Normal file
BIN
img/icon2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 604 B |
BIN
img/icon3.png
Normal file
BIN
img/icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
24
index.html
24
index.html
@@ -24,11 +24,14 @@
|
||||
<div id="main" role="main">
|
||||
|
||||
<div class="imageSection">
|
||||
<img src="img/1.jpg" />
|
||||
<img src="img/icon1.png" />
|
||||
<div class="colors">
|
||||
<div class="function averageRGB">
|
||||
<h3>getAverageRGB()</h3>
|
||||
</div>
|
||||
<div class="function dominantColor">
|
||||
<h3>getDominantColor()</h3>
|
||||
</div>
|
||||
<div class="function areaBasedPalette">
|
||||
<h3>createAreaBasedPalette()</h3>
|
||||
</div>
|
||||
@@ -39,11 +42,14 @@
|
||||
</div>
|
||||
|
||||
<div class="imageSection">
|
||||
<img src="img/2.jpg" />
|
||||
<img src="img/icon2.gif" />
|
||||
<div class="colors">
|
||||
<div class="function averageRGB">
|
||||
<h3>getAverageRGB()</h3>
|
||||
</div>
|
||||
<div class="function dominantColor">
|
||||
<h3>getDominantColor()</h3>
|
||||
</div>
|
||||
<div class="function areaBasedPalette">
|
||||
<h3>createAreaBasedPalette()</h3>
|
||||
</div>
|
||||
@@ -54,11 +60,14 @@
|
||||
</div>
|
||||
|
||||
<div class="imageSection">
|
||||
<img src="img/3.jpg" />
|
||||
<img src="img/icon3.png" />
|
||||
<div class="colors">
|
||||
<div class="function averageRGB">
|
||||
<h3>getAverageRGB()</h3>
|
||||
</div>
|
||||
<div class="function dominantColor">
|
||||
<h3>getDominantColor()</h3>
|
||||
</div>
|
||||
<div class="function areaBasedPalette">
|
||||
<h3>createAreaBasedPalette()</h3>
|
||||
</div>
|
||||
@@ -74,6 +83,9 @@
|
||||
<div class="function averageRGB">
|
||||
<h3>getAverageRGB()</h3>
|
||||
</div>
|
||||
<div class="function dominantColor">
|
||||
<h3>getDominantColor()</h3>
|
||||
</div>
|
||||
<div class="function areaBasedPalette">
|
||||
<h3>createAreaBasedPalette()</h3>
|
||||
</div>
|
||||
@@ -89,6 +101,9 @@
|
||||
<div class="function averageRGB">
|
||||
<h3>getAverageRGB()</h3>
|
||||
</div>
|
||||
<div class="function dominantColor">
|
||||
<h3>getDominantColor()</h3>
|
||||
</div>
|
||||
<div class="function areaBasedPalette">
|
||||
<h3>createAreaBasedPalette()</h3>
|
||||
</div>
|
||||
@@ -104,6 +119,9 @@
|
||||
<div class="function averageRGB">
|
||||
<h3>getAverageRGB()</h3>
|
||||
</div>
|
||||
<div class="function dominantColor">
|
||||
<h3>getDominantColor()</h3>
|
||||
</div>
|
||||
<div class="function areaBasedPalette">
|
||||
<h3>createAreaBasedPalette()</h3>
|
||||
</div>
|
||||
|
||||
13
js/app.js
13
js/app.js
@@ -3,18 +3,25 @@ $(document).ready(function(){
|
||||
$('img').each(function(index){
|
||||
|
||||
var averageRGB = getAverageRGB(this);
|
||||
var dominantColor = getDominantColor(this);
|
||||
var areaPalette = createAreaBasedPalette(this, 9);
|
||||
var medianPalette = createMedianCutPalette(this, 10);
|
||||
|
||||
var imageSection = $(this).closest('.imageSection'),
|
||||
swatchEl;
|
||||
var imageSection = $(this).closest('.imageSection');
|
||||
|
||||
swatchEl = $('<div>', {
|
||||
var swatchEl = $('<div>', {
|
||||
'class': 'swatch'
|
||||
}).css('background-color','rgba('+averageRGB.r+','+averageRGB.g+ ','+averageRGB.b+', 1)');
|
||||
|
||||
imageSection.find('.averageRGB').append(swatchEl);
|
||||
|
||||
swatchEl = $('<div>', {
|
||||
'class': 'swatch'
|
||||
}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
|
||||
|
||||
imageSection.find('.dominantColor').append(swatchEl);
|
||||
|
||||
|
||||
var areaBasedPalette = imageSection.find('.areaBasedPalette');
|
||||
|
||||
$.each(areaPalette, function(index, value){
|
||||
|
||||
@@ -18,10 +18,13 @@ function getAverageRGB(sourceImage) {
|
||||
// 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 ) {
|
||||
++count;
|
||||
rgb.r += pixels[i];
|
||||
rgb.g += pixels[i+1];
|
||||
rgb.b += pixels[i+2];
|
||||
// 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 = Math.floor(rgb.r/count);
|
||||
@@ -33,6 +36,33 @@ function getAverageRGB(sourceImage) {
|
||||
|
||||
|
||||
|
||||
function getDominantColor(sourceImage){
|
||||
|
||||
var palette = [];
|
||||
|
||||
// Create custom CanvasImage object
|
||||
var image = new CanvasImage(sourceImage),
|
||||
imageData = image.getImageData(),
|
||||
pixels = imageData.data,
|
||||
pixelCount = image.getPixelCount();
|
||||
|
||||
var pixelArray = [];
|
||||
|
||||
for (var i = 0; i < pixelCount; i++) {
|
||||
// If pixel is mostly opaque
|
||||
if(pixels[i*4+3] >= 125){
|
||||
pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
|
||||
}
|
||||
};
|
||||
|
||||
var cmap = MMCQ.quantize(pixelArray, 5);
|
||||
var newPalette = cmap.palette();
|
||||
|
||||
return {r: newPalette[0][0], g: newPalette[0][1], b: newPalette[0][2]};
|
||||
}
|
||||
|
||||
|
||||
|
||||
function createAreaBasedPalette(sourceImage, colorCount){
|
||||
|
||||
var palette = [];
|
||||
@@ -98,7 +128,10 @@ function createMedianCutPalette(sourceImage, colorCount){
|
||||
var pixelArray = [];
|
||||
|
||||
for (var i = 0; i < pixelCount; i++) {
|
||||
pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
|
||||
// If pixel is mostly opaque
|
||||
if(pixels[i*4+3] >= 125){
|
||||
pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
|
||||
}
|
||||
};
|
||||
|
||||
var cmap = MMCQ.quantize(pixelArray, colorCount);
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
@import "base"
|
||||
|
||||
body
|
||||
background: #222
|
||||
color: #fff
|
||||
color: #444
|
||||
font-family: 'lucida grande', sans-serif
|
||||
line-height: 1.625em
|
||||
padding: 40px
|
||||
|
||||
Reference in New Issue
Block a user