Browse files

consolidated js into color-thief.js

  • Loading branch information...
1 parent 16894c2 commit a32716930d38d4bfca7ba7b600f16463624ff922 @lokesh committed Nov 3, 2011
Showing with 94 additions and 86 deletions.
  1. +51 −3 index.html
  2. +0 −46 js/app.js
  3. +0 −37 js/canvasimage.js
  4. +43 −0 js/color-thief.js
View
54 index.html
@@ -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>
View
46 js/app.js
@@ -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);
- });
-
- });
-
- });
-
-});
View
37 js/canvasimage.js
@@ -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);
-}
-
View
43 js/color-thief.js
@@ -7,12 +7,55 @@
* 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);
+}
/*

0 comments on commit a327169

Please sign in to comment.