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

Merge branch 'release-1.0'

Browse Source
This commit is contained in:
Lokesh Dhakar
2012-04-23 17:16:04 -04:00
parent 80d4f00208 d6181e84cc
commit 4f41b5afcf
4 changed files with 170 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
README.markdown
View File

@@ -1,30 +1,41 @@
# Color Thief #Color Thief
A script for grabbing the dominant color or a representative color palette from an image. Uses javascript and canvas.
###[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 ```js
getDominantColor(sourceImage) 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 Uses the median cut algorithm provided by quantize.js to cluster similar
colors and return the base color from the largest cluster. colors and return the base color from the largest cluster.
####Create Palette ###Create Palette
```js ```js
createPalette(sourceImage, colorCount) 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 Use the median cut algorithm provided by quantize.js to cluster similar
colors. 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 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/)
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.

265
css/app.css
View File

@@ -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, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@@ -20,85 +20,59 @@ time, mark, audio, video {
vertical-align: baseline; 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 { body {
line-height: 1; 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 { ol, ul {
list-style: none; 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 { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; 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 { caption, th, td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle; 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 { q, blockquote {
quotes: none; 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 { q:before, q:after, blockquote:before, blockquote:after {
content: ""; content: "";
content: none; 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 { a img {
border: none; 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 { article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; display: block;
} }
/* float clearing for IE6 */ /* line 5, ../sass/app.sass */
/* 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 */
body, input, textarea { body, input, textarea {
margin: 40px; margin: 40px;
color: #888888; color: #888888;
background: #222222; background: #222222;
font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif; font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif;
font-weight: 400; -wbkite-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
} }
/* line 18, ../sass/app.sass */ /* line 12, ../sass/app.sass */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: white; color: white;
font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif; font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif;
@@ -107,197 +81,223 @@ h1, h2, h3, h4, h5, h6 {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
/* line 25, ../sass/app.sass */ /* line 19, ../sass/app.sass */
h1 { h1 {
font-size: 72px; font-size: 72px;
line-height: 0.5em; line-height: 0.5em;
margin-bottom: 0.3em; margin-bottom: 0.3em;
} }
/* line 29, ../sass/app.sass */ /* line 23, ../sass/app.sass */
h1 small { h1 small {
font-size: 20px; font-size: 20px;
} }
/* line 31, ../sass/app.sass */ /* line 25, ../sass/app.sass */
h1 span { h1 span {
-moz-transition: color 1s;
-webkit-transition: color 1s; -webkit-transition: color 1s;
-moz-transition: color 1s;
-ms-transition: color 1s;
-o-transition: color 1s; -o-transition: color 1s;
transition: color 1s; transition: color 1s;
} }
/* line 34, ../sass/app.sass */ /* line 28, ../sass/app.sass */
h1:hover .char1 { h1:hover .char1 {
-moz-transition: color 0.2s;
-webkit-transition: color 0.2s; -webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-ms-transition: color 0.2s;
-o-transition: color 0.2s; -o-transition: color 0.2s;
transition: color 0.2s; transition: color 0.2s;
color: red; color: red;
} }
/* line 37, ../sass/app.sass */ /* line 31, ../sass/app.sass */
h1:hover .char2 { h1:hover .char2 {
-moz-transition: color 0.2s 0.1s;
-webkit-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; -o-transition: color 0.2s 0.1s;
transition: color 0.2s 0.1s; transition: color 0.2s 0.1s;
color: orange; color: orange;
} }
/* line 40, ../sass/app.sass */ /* line 34, ../sass/app.sass */
h1:hover .char3 { h1:hover .char3 {
-moz-transition: color 0.2s 0.2s;
-webkit-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; -o-transition: color 0.2s 0.2s;
transition: color 0.2s 0.2s; transition: color 0.2s 0.2s;
color: yellow; color: yellow;
} }
/* line 43, ../sass/app.sass */ /* line 37, ../sass/app.sass */
h1:hover .char4 { h1:hover .char4 {
-moz-transition: color 0.2s 0.3s;
-webkit-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; -o-transition: color 0.2s 0.3s;
transition: color 0.2s 0.3s; transition: color 0.2s 0.3s;
color: green; color: green;
} }
/* line 46, ../sass/app.sass */ /* line 40, ../sass/app.sass */
h1:hover .char5 { h1:hover .char5 {
-moz-transition: color 0.2s 0.4s;
-webkit-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; -o-transition: color 0.2s 0.4s;
transition: color 0.2s 0.4s; transition: color 0.2s 0.4s;
color: blue; color: blue;
} }
/* line 49, ../sass/app.sass */ /* line 43, ../sass/app.sass */
h1:hover .char6 { h1:hover .char6 {
-moz-transition: color 0.2s 0.5s;
-webkit-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; -o-transition: color 0.2s 0.5s;
transition: color 0.2s 0.5s; transition: color 0.2s 0.5s;
color: indigo; color: indigo;
} }
/* line 52, ../sass/app.sass */ /* line 46, ../sass/app.sass */
h1:hover .char7 { h1:hover .char7 {
-moz-transition: color 0.2s 0.6s;
-webkit-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; -o-transition: color 0.2s 0.6s;
transition: color 0.2s 0.6s; transition: color 0.2s 0.6s;
color: violet; color: violet;
} }
/* line 55, ../sass/app.sass */ /* line 49, ../sass/app.sass */
h1:hover .char8 { h1:hover .char8 {
-moz-transition: color 0.2s 0.7s;
-webkit-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; -o-transition: color 0.2s 0.7s;
transition: color 0.2s 0.7s; transition: color 0.2s 0.7s;
color: red; color: red;
} }
/* line 58, ../sass/app.sass */ /* line 52, ../sass/app.sass */
h1:hover .char9 { h1:hover .char9 {
-moz-transition: color 0.2s 0.8s;
-webkit-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; -o-transition: color 0.2s 0.8s;
transition: color 0.2s 0.8s; transition: color 0.2s 0.8s;
color: orange; color: orange;
} }
/* line 61, ../sass/app.sass */ /* line 55, ../sass/app.sass */
h1:hover .char10 { h1:hover .char10 {
-moz-transition: color 0.2s 0.9s;
-webkit-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; -o-transition: color 0.2s 0.9s;
transition: color 0.2s 0.9s; transition: color 0.2s 0.9s;
color: yellow; color: yellow;
} }
/* line 64, ../sass/app.sass */ /* line 58, ../sass/app.sass */
h1:hover .char11 { h1:hover .char11 {
-moz-transition: color 0.2s 1s;
-webkit-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; -o-transition: color 0.2s 1s;
transition: color 0.2s 1s; transition: color 0.2s 1s;
color: green; color: green;
} }
/* line 69, ../sass/app.sass */ /* line 62, ../sass/app.sass */
h2 { h2 {
font-size: 40px; font-size: 40px;
line-height: 1.2em; line-height: 1.2em;
text-align: center; text-align: center;
} }
/* line 74, ../sass/app.sass */ /* line 67, ../sass/app.sass */
h3 { h3 {
font-size: 16px; font-size: 16px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
} }
/* line 79, ../sass/app.sass */ /* line 72, ../sass/app.sass */
h4 { h4 {
font-size: 20px; font-size: 20px;
margin-bottom: 1.25em; margin-bottom: 1.25em;
} }
/* line 83, ../sass/app.sass */ /* line 76, ../sass/app.sass */
p { p {
margin-bottom: 1.25em; margin-bottom: 1.25em;
} }
/* line 86, ../sass/app.sass */ /* line 80, ../sass/app.sass */
strong { strong {
font-weight: bold; font-weight: bold;
} }
/* Forms */ /* Forms */
/* line 92, ../sass/app.sass */ /* line 86, ../sass/app.sass */
input[type=text], input[type=text], input[type=password] {
input[type=password],
textarea {
background: #fafafa; 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); -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); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
border: 1px solid #dddddd; border: 1px solid #dddddd;
color: #888888; color: #888888;
-moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-o-border-radius: 4px; -moz-border-radius: 4px;
-ms-border-radius: 4px; -ms-border-radius: 4px;
-khtml-border-radius: 4px; -o-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
} }
/* line 103, ../sass/app.sass */ /* line 93, ../sass/app.sass */
input[type=text]:focus, textarea {
textarea:focus { 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; color: #373737;
} }
/* line 107, ../sass/app.sass */ /* line 103, ../sass/app.sass */
textarea { textarea {
padding-left: 3px; padding-left: 3px;
width: 98%; width: 98%;
} }
/* line 104, ../sass/app.sass */
textarea:focus {
color: #373737;
}
/* line 111, ../sass/app.sass */ /* line 109, ../sass/app.sass */
input[type=text] { input[type=text] {
padding: 3px; padding: 3px;
} }
/* Links */ /* Links */
/* line 115, ../sass/app.sass */ /* line 114, ../sass/app.sass */
a { a {
color: #09a1ec; color: #09a1ec;
text-decoration: none; text-decoration: none;
} }
/* line 118, ../sass/app.sass */ /* line 117, ../sass/app.sass */
a:hover { a:hover {
color: #7fd2fa; color: #7fd2fa;
} }
/* line 122, ../sass/app.sass */ /* line 120, ../sass/app.sass */
#container { #container {
width: 900px; width: 900px;
margin: 0 auto; margin: 0 auto;
} }
/* line 126, ../sass/app.sass */ /* line 124, ../sass/app.sass */
header { header {
padding-bottom: 40px; padding-bottom: 40px;
text-align: center; text-align: center;
@@ -305,35 +305,39 @@ header {
margin: 0 auto; margin: 0 auto;
} }
/* line 132, ../sass/app.sass */ /* line 130, ../sass/app.sass */
.medianCutPalette h3 { .medianCutPalette h3 {
margin-top: 20px; margin-top: 20px;
} }
/* line 135, ../sass/app.sass */ /* line 133, ../sass/app.sass */
.imageSection { .imageSection {
margin-bottom: 80px; margin-bottom: 80px;
background: #111111; background: #111111;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
-o-border-radius: 10px; -moz-border-radius: 10px;
-ms-border-radius: 10px; -ms-border-radius: 10px;
-khtml-border-radius: 10px; -o-border-radius: 10px;
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 { .imageSection .imageWrap {
-moz-border-radius-topleft: 10px; -moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px;
-o-border-top-left-radius: 10px;
-ms-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; border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px;
-o-border-bottom-left-radius: 10px;
-ms-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; border-bottom-left-radius: 10px;
width: 400px; width: 400px;
height: 300px; height: 300px;
@@ -341,106 +345,113 @@ header {
margin-right: 20px; margin-right: 20px;
background: url(../img/dark_checkered_bg.png); background: url(../img/dark_checkered_bg.png);
} }
/* line 146, ../sass/app.sass */ /* line 145, ../sass/app.sass */
.imageSection .imageWrap .targetImage { .imageSection .imageWrap .targetImage {
-moz-border-radius-topleft: 10px; -moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px;
-o-border-top-left-radius: 10px;
-ms-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; border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px;
-o-border-bottom-left-radius: 10px;
-ms-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; border-bottom-left-radius: 10px;
} }
/* line 148, ../sass/app.sass */ /* line 147, ../sass/app.sass */
.imageSection .colors { .imageSection .colors {
margin-top: 20px; margin-top: 20px;
width: 400px; width: 400px;
float: left; float: left;
} }
/* line 152, ../sass/app.sass */ /* line 151, ../sass/app.sass */
.imageSection .colors .function { .imageSection .colors .function {
clear: left; clear: left;
margin-bottom: 10px; 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 { .imageSection .colors .function .swatches .swatch {
width: 40px; width: 40px;
height: 20px; height: 20px;
margin-right: 2px; margin-right: 2px;
background: #dddddd; background: #dddddd;
float: left; float: left;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s; -webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s; -o-transition: all 0.5s;
transition: all 0.5s; transition: all 0.5s;
} }
/* line 163, ../sass/app.sass */ /* line 162, ../sass/app.sass */
.imageSection .colors .function .swatches .swatch:hover { .imageSection .colors .function .swatches .swatch:hover {
-moz-transition: none;
-webkit-transition: none; -webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none; -o-transition: none;
transition: none; transition: none;
-moz-transform: scale(1.2, 1.2);
-webkit-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); -ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
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; -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; box-shadow: 0 1px 10px black;
} }
/* line 167, ../sass/app.sass */ /* line 166, ../sass/app.sass */
.imageSection .colors .function .swatches .swatch:first-child { .imageSection .colors .function .swatches .swatch:first-child {
-moz-border-radius-topleft: 4px; -moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px; -webkit-border-top-left-radius: 4px;
-o-border-top-left-radius: 4px;
-ms-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; border-top-left-radius: 4px;
-moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
-ms-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; border-bottom-left-radius: 4px;
} }
/* line 169, ../sass/app.sass */ /* line 168, ../sass/app.sass */
.imageSection .colors .function .swatches .swatch:last-child { .imageSection .colors .function .swatches .swatch:last-child {
-moz-border-radius-topright: 4px; -moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px; -webkit-border-top-right-radius: 4px;
-o-border-top-right-radius: 4px;
-ms-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; border-top-right-radius: 4px;
-moz-border-radius-bottomright: 4px; -moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
-ms-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; border-bottom-right-radius: 4px;
} }
/* Hardcoding the offset for the FB icon example */ /* Hardcoding the offset for the FB icon example */
/* line 175, ../sass/app.sass */ /* line 172, ../sass/app.sass */
.fbIcon .imageWrap .targetImage { .fbIcon .imageWrap .targetImage {
-moz-border-radius: 0;
-webkit-border-radius: 0; -webkit-border-radius: 0;
-o-border-radius: 0; -moz-border-radius: 0;
-ms-border-radius: 0; -ms-border-radius: 0;
-khtml-border-radius: 0; -o-border-radius: 0;
border-radius: 0; border-radius: 0;
position: relative; position: relative;
top: 142px; top: 142px;
left: 192px; left: 192px;
} }
/* line 182, ../sass/app.sass */ /* line 178, ../sass/app.sass */
canvas { canvas {
display: none; display: none;
} }
/* line 181, ../sass/app.sass */
img {
width: 100px;
height: 100px;
}

8
index.html
View File

@@ -46,18 +46,18 @@
<!-- Using Mustache templating --> <!-- Using Mustache templating -->
<script id='template' type='text/x-mustache'> <script id='template' type='text/x-mustache'>
{{#images}} {{#images}}
<div class="imageSection clearfix {{class}} "> <div class="imageSection {{class}} ">
<div class="imageWrap"> <div class="imageWrap">
<img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" /> <img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" />
</div> </div>
<div class="colors"> <div class="colors">
<div class="function dominantColor clearfix"> <div class="function dominantColor">
<h3>Dominant Color</h3> <h3>Dominant Color</h3>
<div class="swatches clearfix"></div> <div class="swatches"></div>
</div> </div>
<div class="function medianCutPalette clearfix"> <div class="function medianCutPalette clearfix">
<h3>Palette</h3> <h3>Palette</h3>
<div class="swatches clearfix"></div> <div class="swatches"></div>
</div> </div>
</div> </div>
</div> </div>

10
js/color-thief.js
View File

@@ -1,5 +1,5 @@
/* /*
* Image Palette v1.0 * Color Thief v1.0
* by Lokesh Dhakar - http://www.lokeshdhakar.com * by Lokesh Dhakar - http://www.lokeshdhakar.com
* *
* Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ * Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
@@ -28,17 +28,17 @@
*/ */
var CanvasImage = function (image) { var CanvasImage = function (image) {
// If jquery object is passed in, get html element // If jquery object is passed in, get html element
this.imgEl = (image.jquery) ? image[0] : image; imgEl = (image.jquery) ? image[0] : image;
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d'); this.context = this.canvas.getContext('2d');
document.body.appendChild(this.canvas); document.body.appendChild(this.canvas);
this.width = this.canvas.width = $(this.imgEl).width(); this.width = this.canvas.width = imgEl.width;
this.height = this.canvas.height = $(this.imgEl).height(); this.height = this.canvas.height = imgEl.height;
this.context.drawImage(this.imgEl, 0, 0); this.context.drawImage(imgEl, 0, 0, this.width, this.height);
}; };
CanvasImage.prototype.clear = function () { CanvasImage.prototype.clear = function () {