From 79d4c708382d3812229c84c8f9823b1deebb2de4 Mon Sep 17 00:00:00 2001 From: Lokesh Dhakar Date: Mon, 23 Apr 2012 17:13:05 -0400 Subject: [PATCH] FIX: issue #9 - applying css attribs over img ruins the palette function. FIX: issue #3- update README regarding createPalette return val --- README.markdown | 35 +++--- css/app.css | 265 ++++++++++++++++++++++++---------------------- index.html | 8 +- js/color-thief.js | 8 +- 4 files changed, 169 insertions(+), 147 deletions(-) diff --git a/README.markdown b/README.markdown index a8bb288..4e062d6 100644 --- a/README.markdown +++ b/README.markdown @@ -1,30 +1,41 @@ -# Color Thief -A script for grabbing the dominant color or a representative color palette from an image. Uses javascript and canvas. +#Color Thief -###[See a Demo](http://lokeshdhakar.com/projects/color-thief) +A script for grabbing the dominant color or color palette from an image. Uses javascript and canvas. -###Usage +[See a Demo](http://lokeshdhakar.com/projects/color-thief) | [Read more on my blog](http://lokeshdhakar.com/color-thief) -####Get Dominant Color +##Usage + +###Get Dominant Color ```js getDominantColor(sourceImage) ``` -returns {r: num, g: num, b: num} + +```js +returns [num, num, num] +``` Uses the median cut algorithm provided by quantize.js to cluster similar colors and return the base color from the largest cluster. -####Create Palette +###Create Palette ```js createPalette(sourceImage, colorCount) - ``` -returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...] + +```js +returns [ [num, num, num], [num, num, num], ... ] +``` Use the median cut algorithm provided by quantize.js to cluster similar colors. -BUGGY: Function does not always return the requested amount of colors. It can be +/- 2. +##License +by Lokesh Dhakar | [lokeshdhakar.com](http://www.lokeshdhakar.com) | [twitter.com/lokeshdhakar](http://twitter.com/lokeshdhakar) -###License -Licensed under the [Creative Commons Attribution 2.5 License](http://creativecommons.org/licenses/by/2.5/) \ No newline at end of file +Thanks to [jfsiii](https://github.com/jfsiii) for a large number of code improvements and other for submitting issues and fixes. + +Licensed under the [Creative Commons Attribution 2.5 License](http://creativecommons.org/licenses/by/2.5/) + +* Free for use in both personal and commercial projects. +* Attribution requires leaving author name, author homepage link, and the license info intact. \ No newline at end of file diff --git a/css/app.css b/css/app.css index eabfab5..0014d7b 100644 --- a/css/app.css +++ b/css/app.css @@ -1,4 +1,4 @@ -/* line 17, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.11.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 17, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -20,85 +20,59 @@ time, mark, audio, video { vertical-align: baseline; } -/* line 20, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.11.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 20, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ body { line-height: 1; } -/* line 22, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.11.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 24, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.11.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 26, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.11.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 28, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.11.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } -/* line 101, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.11.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 101, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 30, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.11.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 114, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.11.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ +/* line 114, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } -/* float clearing for IE6 */ -/* line 17, ../sass/_base.sass */ -* html .clearfix { - height: 1%; - overflow: visible; -} - -/* float clearing for IE7 */ -/* line 23, ../sass/_base.sass */ -* + html .clearfix { - min-height: 1%; -} - -/* float clearing for everyone else */ -/* line 28, ../sass/_base.sass */ -.clearfix:after { - clear: both; - content: "."; - display: block; - height: 0; - visibility: hidden; - font-size: 0; -} - -/* =Global */ -/* line 9, ../sass/app.sass */ +/* line 5, ../sass/app.sass */ body, input, textarea { margin: 40px; color: #888888; background: #222222; font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif; - font-weight: 400; - -webkit-font-smoothing: antialiased; + -wbkite-font-smoothing: antialiased; } -/* line 18, ../sass/app.sass */ +/* line 12, ../sass/app.sass */ h1, h2, h3, h4, h5, h6 { color: white; font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif; @@ -107,197 +81,223 @@ h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5em; } -/* line 25, ../sass/app.sass */ +/* line 19, ../sass/app.sass */ h1 { font-size: 72px; line-height: 0.5em; margin-bottom: 0.3em; } -/* line 29, ../sass/app.sass */ +/* line 23, ../sass/app.sass */ h1 small { font-size: 20px; } -/* line 31, ../sass/app.sass */ +/* line 25, ../sass/app.sass */ h1 span { - -moz-transition: color 1s; -webkit-transition: color 1s; + -moz-transition: color 1s; + -ms-transition: color 1s; -o-transition: color 1s; transition: color 1s; } -/* line 34, ../sass/app.sass */ +/* line 28, ../sass/app.sass */ h1:hover .char1 { - -moz-transition: color 0.2s; -webkit-transition: color 0.2s; + -moz-transition: color 0.2s; + -ms-transition: color 0.2s; -o-transition: color 0.2s; transition: color 0.2s; color: red; } -/* line 37, ../sass/app.sass */ +/* line 31, ../sass/app.sass */ h1:hover .char2 { - -moz-transition: color 0.2s 0.1s; -webkit-transition: color 0.2s 0.1s; + -moz-transition: color 0.2s 0.1s; + -ms-transition: color 0.2s 0.1s; -o-transition: color 0.2s 0.1s; transition: color 0.2s 0.1s; color: orange; } -/* line 40, ../sass/app.sass */ +/* line 34, ../sass/app.sass */ h1:hover .char3 { - -moz-transition: color 0.2s 0.2s; -webkit-transition: color 0.2s 0.2s; + -moz-transition: color 0.2s 0.2s; + -ms-transition: color 0.2s 0.2s; -o-transition: color 0.2s 0.2s; transition: color 0.2s 0.2s; color: yellow; } -/* line 43, ../sass/app.sass */ +/* line 37, ../sass/app.sass */ h1:hover .char4 { - -moz-transition: color 0.2s 0.3s; -webkit-transition: color 0.2s 0.3s; + -moz-transition: color 0.2s 0.3s; + -ms-transition: color 0.2s 0.3s; -o-transition: color 0.2s 0.3s; transition: color 0.2s 0.3s; color: green; } -/* line 46, ../sass/app.sass */ +/* line 40, ../sass/app.sass */ h1:hover .char5 { - -moz-transition: color 0.2s 0.4s; -webkit-transition: color 0.2s 0.4s; + -moz-transition: color 0.2s 0.4s; + -ms-transition: color 0.2s 0.4s; -o-transition: color 0.2s 0.4s; transition: color 0.2s 0.4s; color: blue; } -/* line 49, ../sass/app.sass */ +/* line 43, ../sass/app.sass */ h1:hover .char6 { - -moz-transition: color 0.2s 0.5s; -webkit-transition: color 0.2s 0.5s; + -moz-transition: color 0.2s 0.5s; + -ms-transition: color 0.2s 0.5s; -o-transition: color 0.2s 0.5s; transition: color 0.2s 0.5s; color: indigo; } -/* line 52, ../sass/app.sass */ +/* line 46, ../sass/app.sass */ h1:hover .char7 { - -moz-transition: color 0.2s 0.6s; -webkit-transition: color 0.2s 0.6s; + -moz-transition: color 0.2s 0.6s; + -ms-transition: color 0.2s 0.6s; -o-transition: color 0.2s 0.6s; transition: color 0.2s 0.6s; color: violet; } -/* line 55, ../sass/app.sass */ +/* line 49, ../sass/app.sass */ h1:hover .char8 { - -moz-transition: color 0.2s 0.7s; -webkit-transition: color 0.2s 0.7s; + -moz-transition: color 0.2s 0.7s; + -ms-transition: color 0.2s 0.7s; -o-transition: color 0.2s 0.7s; transition: color 0.2s 0.7s; color: red; } -/* line 58, ../sass/app.sass */ +/* line 52, ../sass/app.sass */ h1:hover .char9 { - -moz-transition: color 0.2s 0.8s; -webkit-transition: color 0.2s 0.8s; + -moz-transition: color 0.2s 0.8s; + -ms-transition: color 0.2s 0.8s; -o-transition: color 0.2s 0.8s; transition: color 0.2s 0.8s; color: orange; } -/* line 61, ../sass/app.sass */ +/* line 55, ../sass/app.sass */ h1:hover .char10 { - -moz-transition: color 0.2s 0.9s; -webkit-transition: color 0.2s 0.9s; + -moz-transition: color 0.2s 0.9s; + -ms-transition: color 0.2s 0.9s; -o-transition: color 0.2s 0.9s; transition: color 0.2s 0.9s; color: yellow; } -/* line 64, ../sass/app.sass */ +/* line 58, ../sass/app.sass */ h1:hover .char11 { - -moz-transition: color 0.2s 1s; -webkit-transition: color 0.2s 1s; + -moz-transition: color 0.2s 1s; + -ms-transition: color 0.2s 1s; -o-transition: color 0.2s 1s; transition: color 0.2s 1s; color: green; } -/* line 69, ../sass/app.sass */ +/* line 62, ../sass/app.sass */ h2 { font-size: 40px; line-height: 1.2em; text-align: center; } -/* line 74, ../sass/app.sass */ +/* line 67, ../sass/app.sass */ h3 { font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; } -/* line 79, ../sass/app.sass */ +/* line 72, ../sass/app.sass */ h4 { font-size: 20px; margin-bottom: 1.25em; } -/* line 83, ../sass/app.sass */ +/* line 76, ../sass/app.sass */ p { margin-bottom: 1.25em; } -/* line 86, ../sass/app.sass */ +/* line 80, ../sass/app.sass */ strong { font-weight: bold; } /* Forms */ -/* line 92, ../sass/app.sass */ -input[type=text], -input[type=password], -textarea { +/* line 86, ../sass/app.sass */ +input[type=text], input[type=password] { background: #fafafa; - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); - -o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); border: 1px solid #dddddd; color: #888888; - -moz-border-radius: 4px; -webkit-border-radius: 4px; - -o-border-radius: 4px; + -moz-border-radius: 4px; -ms-border-radius: 4px; - -khtml-border-radius: 4px; + -o-border-radius: 4px; border-radius: 4px; } -/* line 103, ../sass/app.sass */ -input[type=text]:focus, -textarea:focus { +/* line 93, ../sass/app.sass */ +textarea { + background: #fafafa; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); + border: 1px solid #dddddd; + color: #888888; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; +} + +/* line 100, ../sass/app.sass */ +input[type=text]:focus { color: #373737; } -/* line 107, ../sass/app.sass */ +/* line 103, ../sass/app.sass */ textarea { padding-left: 3px; width: 98%; } +/* line 104, ../sass/app.sass */ +textarea:focus { + color: #373737; +} -/* line 111, ../sass/app.sass */ +/* line 109, ../sass/app.sass */ input[type=text] { padding: 3px; } /* Links */ -/* line 115, ../sass/app.sass */ +/* line 114, ../sass/app.sass */ a { color: #09a1ec; text-decoration: none; } -/* line 118, ../sass/app.sass */ +/* line 117, ../sass/app.sass */ a:hover { color: #7fd2fa; } -/* line 122, ../sass/app.sass */ +/* line 120, ../sass/app.sass */ #container { width: 900px; margin: 0 auto; } -/* line 126, ../sass/app.sass */ +/* line 124, ../sass/app.sass */ header { padding-bottom: 40px; text-align: center; @@ -305,35 +305,39 @@ header { margin: 0 auto; } -/* line 132, ../sass/app.sass */ +/* line 130, ../sass/app.sass */ .medianCutPalette h3 { margin-top: 20px; } -/* line 135, ../sass/app.sass */ +/* line 133, ../sass/app.sass */ .imageSection { margin-bottom: 80px; background: #111111; - -moz-border-radius: 10px; -webkit-border-radius: 10px; - -o-border-radius: 10px; + -moz-border-radius: 10px; -ms-border-radius: 10px; - -khtml-border-radius: 10px; + -o-border-radius: 10px; border-radius: 10px; + *zoom: 1; } -/* line 139, ../sass/app.sass */ +/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ +.imageSection:after { + content: ""; + display: table; + clear: both; +} +/* line 138, ../sass/app.sass */ .imageSection .imageWrap { -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; - -o-border-top-left-radius: 10px; -ms-border-top-left-radius: 10px; - -khtml-border-top-left-radius: 10px; + -o-border-top-left-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; - -o-border-bottom-left-radius: 10px; -ms-border-bottom-left-radius: 10px; - -khtml-border-bottom-left-radius: 10px; + -o-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; width: 400px; height: 300px; @@ -341,106 +345,113 @@ header { margin-right: 20px; background: url(../img/dark_checkered_bg.png); } -/* line 146, ../sass/app.sass */ +/* line 145, ../sass/app.sass */ .imageSection .imageWrap .targetImage { -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; - -o-border-top-left-radius: 10px; -ms-border-top-left-radius: 10px; - -khtml-border-top-left-radius: 10px; + -o-border-top-left-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; - -o-border-bottom-left-radius: 10px; -ms-border-bottom-left-radius: 10px; - -khtml-border-bottom-left-radius: 10px; + -o-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; } -/* line 148, ../sass/app.sass */ +/* line 147, ../sass/app.sass */ .imageSection .colors { margin-top: 20px; width: 400px; float: left; } -/* line 152, ../sass/app.sass */ +/* line 151, ../sass/app.sass */ .imageSection .colors .function { clear: left; margin-bottom: 10px; + *zoom: 1; } -/* line 156, ../sass/app.sass */ +/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ +.imageSection .colors .function:after { + content: ""; + display: table; + clear: both; +} +/* line 155, ../sass/app.sass */ .imageSection .colors .function .swatches .swatch { width: 40px; height: 20px; margin-right: 2px; background: #dddddd; float: left; - -moz-transition: all 0.5s; -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } -/* line 163, ../sass/app.sass */ +/* line 162, ../sass/app.sass */ .imageSection .colors .function .swatches .swatch:hover { - -moz-transition: none; -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; -o-transition: none; transition: none; - -moz-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); - -o-transform: scale(1.2, 1.2); + -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); + -o-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); - -moz-box-shadow: 0 1px 10px black; -webkit-box-shadow: 0 1px 10px black; - -o-box-shadow: 0 1px 10px black; + -moz-box-shadow: 0 1px 10px black; box-shadow: 0 1px 10px black; } -/* line 167, ../sass/app.sass */ +/* line 166, ../sass/app.sass */ .imageSection .colors .function .swatches .swatch:first-child { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; - -o-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; - -khtml-border-top-left-radius: 4px; + -o-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; - -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; - -khtml-border-bottom-left-radius: 4px; + -o-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } -/* line 169, ../sass/app.sass */ +/* line 168, ../sass/app.sass */ .imageSection .colors .function .swatches .swatch:last-child { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; - -o-border-top-right-radius: 4px; -ms-border-top-right-radius: 4px; - -khtml-border-top-right-radius: 4px; + -o-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; - -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; - -khtml-border-bottom-right-radius: 4px; + -o-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } /* Hardcoding the offset for the FB icon example */ -/* line 175, ../sass/app.sass */ +/* line 172, ../sass/app.sass */ .fbIcon .imageWrap .targetImage { - -moz-border-radius: 0; -webkit-border-radius: 0; - -o-border-radius: 0; + -moz-border-radius: 0; -ms-border-radius: 0; - -khtml-border-radius: 0; + -o-border-radius: 0; border-radius: 0; position: relative; top: 142px; left: 192px; } -/* line 182, ../sass/app.sass */ +/* line 178, ../sass/app.sass */ canvas { display: none; } + +/* line 181, ../sass/app.sass */ +img { + width: 100px; + height: 100px; +} diff --git a/index.html b/index.html index 0d9ab23..2b8e931 100755 --- a/index.html +++ b/index.html @@ -46,18 +46,18 @@