Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: fb1bba5df2
Fetching contributors…

Cannot retrieve contributors at this time

executable file 133 lines (99 sloc) 3.851 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <link href='http://fonts.googleapis.com/css?family=Varela+Round|Terminal+Dosis:400,700,600' rel='stylesheet' type='text/css'>

<title>Color Thief</title>
<meta name="description" content="">
<meta name="author" content="">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" href="css/app.css">

<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>

<div id="container">
<header>
      <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 color palette from an image. Uses Javascript and the canvas tag to make it happen.</p>
      <p><a href="http://www.lokeshdhakar.com/2011/11/03/color-thief/">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>
</div> <!--! end of #container -->

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</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'>
  {{#images}}
  <div class="imageSection clearfix {{class}} ">
    <div class="imageWrap">
      <img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" />
    </div>
    <div class="colors">
      <div class="function dominantColor clearfix">
        <h3>Dominant Color</h3>
        <div class="swatches clearfix"></div>
      </div>
      <div class="function medianCutPalette clearfix">
        <h3>Palette</h3>
        <div class="swatches clearfix"></div>
      </div>
    </div>
  </div>
  {{/images}}
</script>

<script>
$(document).ready(function(){

  // Use mustache.js templating to create layout
  
  var imageArray = { images: [
    {"file": "3.jpg"},
    {"file": "4.jpg"},
    {"file": "5.jpg"},
    {"file": "logo1.png"},
    {"file": "icon1.png", "colorCount": "4", "class": "fbIcon"}
  ]};

var html = Mustache.to_html($('#template').html(), imageArray);
$('#main').append(html);

  // Use lettering.js to give letter by letter styling control for the h1 title
  $("h1").lettering();


  // Once images are loaded, loop through each one, getting dominant color
  // and palette and displaying them.
  $('img').imagesLoaded(function(){

    $('img').each(function(index){

      var imageSection = $(this).closest('.imageSection'),
          swatchEl;

      // Dominant Color
var dominantColor = getDominantColor(this);

swatchEl = $('<div>', {
'class': 'swatch'
}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
imageSection.find('.dominantColor .swatches').append(swatchEl);



      // Palette
      var colorCount = $(this).attr('data-colorcount')? $(this).data('colorcount'): 10;
var medianPalette = createPalette(this, colorCount);

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)');
medianCutPalette.append(swatchEl);
});

});

});
});
  
</script>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-2196019-1";
urchinTracker();
</script>

</body>
</html>
Something went wrong with that request. Please try again.