Merge branch 'release-1.0'

2025-11-25 13:54:25 +00:00 · 2012-04-23 17:16:04 -04:00
parent 80d4f00208 d6181e84cc
commit 4f41b5afcf
4 changed files with 170 additions and 148 deletions
--- 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/)
+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.
--- 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;
+}
--- a/index.html
+++ b/index.html
@@ -46,18 +46,18 @@
 <!-- Using Mustache templating -->
 <script id='template' type='text/x-mustache'>
  {{#images}}
-  <div class="imageSection clearfix {{class}} ">
+  <div class="imageSection {{class}} ">
    <div class="imageWrap">
      <img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" />
    </div>
    <div class="colors">
-      <div class="function dominantColor clearfix">
+      <div class="function dominantColor">
        <h3>Dominant Color</h3>
-        <div class="swatches clearfix"></div>
+        <div class="swatches"></div>
      </div>
      <div class="function medianCutPalette clearfix">
        <h3>Palette</h3>
-        <div class="swatches clearfix"></div>
+        <div class="swatches"></div>
      </div>
    </div>
  </div>
--- a/js/color-thief.js
+++ b/js/color-thief.js
@@ -1,5 +1,5 @@
 /*
- * Image Palette v1.0
+ * Color Thief v1.0
 * by Lokesh Dhakar - http://www.lokeshdhakar.com
 *
 * Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
@@ -28,17 +28,17 @@
 */
 var CanvasImage = function (image) {
    // 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.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.width = this.canvas.width = imgEl.width;
+    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 () {