Unique Colors

by Luca De Nardi

HTML

<div class="output form-horizontal" >
  <hr>
     <div id="colors"></div>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
body {
  padding: 20px;
}

JavaScript

var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);

		var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
	var colors = [];
  debugger;
for (var i=0;i<data.length;i+=4)
  {
    var c = [];
  c.push(data[i]);
  c.push(data[i+1]);
  c.push(data[i+2]);
c.push(data[i+3]);
colors.push(c);
  }
  var uniqueColors ={};
  /*for(var i = 0; i < colors.length; i++){
  	uniqueColors[colors[i].join("")] = colors[i];
  }*/
  
  for(var i = 0; i < colors.length - 1; i++){
    for(var j = i + 1; j < colors.length; j++){
	    var dr = Math.abs(colors[i][0] - colors[j][0]);
	    var dg = Math.abs(colors[i][1] - colors[j][1]);
	    var db = Math.abs(colors[i][2] - colors[j][2]);
      var distance = (dr / 255 + dg / 255 + bg / 255) / 3*100;
      if(distance > 20){
      	uniqueColors[colors[j].join("")] = colors[j];
      }
  }
  
  for(var i in uniqueColors){
  var col = uniqueColors[i][0] + "," + uniqueColors[i][1] + "," + uniqueColors[i][2] + "," + uniqueColors[i][0] / 100;
  	var newCol = "<div style='width:100px;height:100px;background:rgba(" + col + ")'></div>";
    $('#colors').append(newCol);
  }
  
  
  };
  img.src = "http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png";