diff --git a/index.html b/index.html index 0a5d3cf..4f1779a 100755 --- a/index.html +++ b/index.html @@ -115,9 +115,57 @@ - - - + + + + diff --git a/js/app.js b/js/app.js deleted file mode 100644 index 21e92f5..0000000 --- a/js/app.js +++ /dev/null @@ -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 = $('
', { - '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 = $('
', { - 'class': 'swatch' - }).css('background-color','rgba('+value[0]+','+value[1]+ ','+value[2]+', 1)'); - medianCutPalette.append(swatchEl); - }); - - }); - - }); - -}); \ No newline at end of file diff --git a/js/canvasimage.js b/js/canvasimage.js deleted file mode 100644 index ae157bc..0000000 --- a/js/canvasimage.js +++ /dev/null @@ -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); -} - diff --git a/js/color-thief.js b/js/color-thief.js index 005627e..b170e97 100644 --- a/js/color-thief.js +++ b/js/color-thief.js @@ -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}