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

more code cleanup

Browse Source
This commit is contained in:
Lokesh Dhakar
2011-11-03 17:54:22 -04:00
parent a32716930d
commit 8bf268e309
15 changed files with 383 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
index.html
View File

@@ -6,7 +6,7 @@
<link href='http://fonts.googleapis.com/css?family=Varela+Round|Terminal+Dosis:400,700,600' rel='stylesheet' type='text/css'>
<title>Image Palette</title>
<title>Color Thief</title>
<meta name="description" content="">
<meta name="author" content="">
@@ -20,140 +20,85 @@
<div id="container">
<header>
<h1>Image Palette</h1>
<h1>Color Thief</h1>
<h4><a href="http://lokeshdhakar.com">by Lokesh Dhakar</a></small></h4>
<p>A script for grabbing the dominant color or a representative color palette from an image. Uses javascript and canvas.</p>
<p><a href="http://www.lokeshdhakar.com/">Read more on my blog</a> | <a href="https://github.com/lokesh/color-thief">Get the code on Github</a>
</p>
</header>
<h2>Examples</h2>
<div id="main" role="main">
<div class="imageSection">
<img src="img/icon1.png" />
<div class="colors">
<div class="function dominantColor">
<h3>getDominantColor()</h3>
</div>
<div class="function medianCutPalette">
<h3>createMedianCutPalette()</h3>
</div>
</div>
</div>
<div class="imageSection">
<img src="img/icon2.gif" />
<div class="colors">
<div class="function dominantColor">
<h3>getDominantColor()</h3>
</div>
<div class="function medianCutPalette">
<h3>createMedianCutPalette()</h3>
</div>
</div>
</div>
<div class="imageSection">
<img src="img/icon3.png" />
<div class="colors">
<div class="function dominantColor">
<h3>getDominantColor()</h3>
</div>
<div class="function medianCutPalette">
<h3>createMedianCutPalette()</h3>
</div>
</div>
</div>
<div class="imageSection">
<img src="img/4.png" />
<div class="colors">
<div class="function dominantColor">
<h3>getDominantColor()</h3>
</div>
<div class="function medianCutPalette">
<h3>createMedianCutPalette()</h3>
</div>
</div>
</div>
<div class="imageSection">
<img src="img/5.png" />
<div class="colors">
<div class="function dominantColor">
<h3>getDominantColor()</h3>
</div>
<div class="function medianCutPalette">
<h3>createMedianCutPalette()</h3>
</div>
</div>
</div>
<div class="imageSection">
<img src="img/6.jpeg" />
<div class="colors">
<div class="function dominantColor">
<h3>getDominantColor()</h3>
</div>
<div class="function medianCutPalette">
<h3>createMedianCutPalette()</h3>
</div>
</div>
</div>
</div>
<footer>
</footer>
</div> <!--! end of #container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="js/libs/quantize.js"></script>
<script src="js/libs/jquery.imagesloaded.js"></script>
<script src="js/libs/jquery.lettering.js"></script>
<script src="js/libs/mustache.js"></script>
<script src="js/libs/quantize.js"></script>
<script src="js/color-thief.js"></script>
<!-- Using Mustache templating -->
<script id='template' type='text/x-mustache'>
{{#files}}
<div class="imageSection">
<div class="imageWrap">
<img class="targetImage" src="img/{{.}}" />
</div>
<div class="colors">
<div class="function dominantColor">
<h3>Dominant Color</h3>
<div class="swatches"></div>
</div>
<div class="function medianCutPalette">
<h3>Palette</h3>
<div class="swatches"></div>
</div>
</div>
</div>
{{/files}}
</script>
<script>
$(document).ready(function(){
// Use mustache.js templating to create layout
var images = { files: [ "1.jpg", "10.jpg", "2.jpg", "icon1.png"] };
var html = Mustache.to_html($('#template').html(), images);
$('#main').append(html);
var view = {
title: "Joe",
calc: function() {
return 2 + 4;
}
}
// Use lettering.js to give letter by letter styling control for the h1 title
$("h1").lettering();
var template = "{{title}} spends {{calc}}";
var html = Mustache.to_html(template, view);
$('body').prepend(html);
// Once images are loaded, loop through each one, getting dominant color
// and palette and displaying them.
$('img').imagesLoaded(function(){
$('img').each(function(index){
var dominantColor = getDominantColor(this);
var medianPalette = createPalette(this, 10);
var imageSection = $(this).closest('.imageSection');
var switchEl;
// Get the dominant color and palette for this image
var dominantColor = getDominantColor(this),
medianPalette = createPalette(this, 10),
imageSection = $(this).closest('.imageSection'),
swatchEl;
// Dominant Color
swatchEl = $('<div>', {
'class': 'swatch'
}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
imageSection.find('.dominantColor .swatches').append(swatchEl);
imageSection.find('.dominantColor').append(swatchEl);
var medianCutPalette = imageSection.find('.medianCutPalette');
$.each(medianPalette, function(index, value){
// Palette
var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
$.each(medianPalette, function(index, value){
swatchEl = $('<div>', {
'class': 'swatch'
}).css('background-color','rgba('+value[0]+','+value[1]+ ','+value[2]+', 1)');