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

consolidated js into color-thief.js

Browse Source
This commit is contained in:
Lokesh Dhakar
2011-11-03 15:43:04 -04:00
parent 16894c23f4
commit a32716930d
4 changed files with 94 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
index.html
View File

@@ -115,9 +115,57 @@
<script src="js/libs/jquery.imagesloaded.js"></script>
<script src="js/libs/mustache.js"></script>
<script src="js/canvasimage.js"></script>
<script src="js/functions.js"></script>
<script src="js/app.js"></script>
<script src="js/color-thief.js"></script>
<script>
$(document).ready(function(){
var view = {
title: "Joe",
calc: function() {
return 2 + 4;
}
}
var template = "{{title}} spends {{calc}}";
var html = Mustache.to_html(template, view);
$('body').prepend(html);
$('img').imagesLoaded(function(){
$('img').each(function(index){
var dominantColor = getDominantColor(this);
var medianPalette = createPalette(this, 10);
var imageSection = $(this).closest('.imageSection');
var switchEl;
swatchEl = $('<div>', {
'class': 'swatch'
}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
imageSection.find('.dominantColor').append(swatchEl);
var medianCutPalette = imageSection.find('.medianCutPalette');
$.each(medianPalette, function(index, value){
swatchEl = $('<div>', {
'class': 'swatch'
}).css('background-color','rgba('+value[0]+','+value[1]+ ','+value[2]+', 1)');
medianCutPalette.append(swatchEl);
});
});
});
});
</script>
</body>
</html>

46
js/app.js
View File

@@ -1,46 +0,0 @@
$(document).ready(function(){
var view = {
title: "Joe",
calc: function() {
return 2 + 4;
}
}
var template = "{{title}} spends {{calc}}";
var html = Mustache.to_html(template, view);
$('body').prepend(html);
$('img').imagesLoaded(function(){
$('img').each(function(index){
var dominantColor = getDominantColor(this);
var medianPalette = createPalette(this, 10);
var imageSection = $(this).closest('.imageSection');
var switchEl;
swatchEl = $('<div>', {
'class': 'swatch'
}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
imageSection.find('.dominantColor').append(swatchEl);
var medianCutPalette = imageSection.find('.medianCutPalette');
$.each(medianPalette, function(index, value){
swatchEl = $('<div>', {
'class': 'swatch'
}).css('background-color','rgba('+value[0]+','+value[1]+ ','+value[2]+', 1)');
medianCutPalette.append(swatchEl);
});
});
});
});

37
js/canvasimage.js
View File

@@ -1,37 +0,0 @@
/*
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
this.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 = $(this.imgEl).width(),
this.height = this.canvas.height = $(this.imgEl).height();
this.context.drawImage(this.imgEl, 0, 0);
}
CanvasImage.prototype.clear = function() {
this.context.clearRect(0, 0, this.width, this.height);
}
CanvasImage.prototype.update = function(imageData) {
console.log('worked');
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);
}

43
js/color-thief.js
View File

@@ -7,14 +7,57 @@
* The median cut palette function uses quantize.js which is written by Nick Rabinowitz
* and licensed under the MIT license. Big props to Nick as this is where the magic happens.
*
* == Classes
* CanvasImage
* == Functions
* getDominantColor()
* createPalette()
* getAverageRGB()
* createAreaBasedPalette()
*
* 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
this.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 = $(this.imgEl).width(),
this.height = this.canvas.height = $(this.imgEl).height();
this.context.drawImage(this.imgEl, 0, 0);
}
CanvasImage.prototype.clear = function() {
this.context.clearRect(0, 0, this.width, this.height);
}
CanvasImage.prototype.update = function(imageData) {
console.log('worked');
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);
}
/*
* getDominantColor(sourceImage)
* returns {r: num, g: num, b: num}