This gist extracts the dominant color of an image using the Javascript color-thief library. By refreshing the gist an image is randomly picked among ten abstract images downloaded from Lorempixel.com.
The colors returned are good. Unfortunately, the library does not work using remotely hosted images.
| /* | |
| * Color Thief v2.0 | |
| * by Lokesh Dhakar - http://www.lokeshdhakar.com | |
| * | |
| * Thanks | |
| * ------ | |
| * Nick Rabinowitz - For creating quantize.js. | |
| * John Schulz - For clean up and optimization. @JFSIII | |
| * Nathan Spady - For adding drag and drop support to the demo page. | |
| * | |
| * License | |
| * ------- | |
| * Copyright 2011, 2015 Lokesh Dhakar | |
| * Released under the MIT license | |
| * https://raw.githubusercontent.com/lokesh/color-thief/master/LICENSE | |
| * | |
| * @license | |
| */ | |
| var CanvasImage=function(a){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),document.body.appendChild(this.canvas),this.width=this.canvas.width=a.width,this.height=this.canvas.height=a.height,this.context.drawImage(a,0,0,this.width,this.height)};CanvasImage.prototype.clear=function(){this.context.clearRect(0,0,this.width,this.height)},CanvasImage.prototype.update=function(a){this.context.putImageData(a,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)},CanvasImage.prototype.removeCanvas=function(){this.canvas.parentNode.removeChild(this.canvas)};var ColorThief=function(){};/*! | |
| * quantize.js Copyright 2008 Nick Rabinowitz. | |
| * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php | |
| * @license | |
| */ | |
| /*! | |
| * Block below copied from Protovis: http://mbostock.github.com/protovis/ | |
| * Copyright 2010 Stanford Visualization Group | |
| * Licensed under the BSD License: http://www.opensource.org/licenses/bsd-license.php | |
| * @license | |
| */ | |
| if(ColorThief.prototype.getColor=function(a,b){var c=this.getPalette(a,5,b),d=c[0];return d},ColorThief.prototype.getPalette=function(a,b,c){"undefined"==typeof b&&(b=10),("undefined"==typeof c||c<1)&&(c=10);for(var d,e,f,g,h,i=new CanvasImage(a),j=i.getImageData(),k=j.data,l=i.getPixelCount(),m=[],n=0;n<l;n+=c)d=4*n,e=k[d+0],f=k[d+1],g=k[d+2],h=k[d+3],h>=125&&(e>250&&f>250&&g>250||m.push([e,f,g]));var o=MMCQ.quantize(m,b),p=o?o.palette():null;return i.removeCanvas(),p},!pv)var pv={map:function(a,b){var c={};return b?a.map(function(a,d){return c.index=d,b.call(c,a)}):a.slice()},naturalOrder:function(a,b){return a<b?-1:a>b?1:0},sum:function(a,b){var c={};return a.reduce(b?function(a,d,e){return c.index=e,a+b.call(c,d)}:function(a,b){return a+b},0)},max:function(a,b){return Math.max.apply(null,b?pv.map(a,b):a)}};var MMCQ=function(){function a(a,b,c){return(a<<2*i)+(b<<i)+c}function b(a){function b(){c.sort(a),d=!0}var c=[],d=!1;return{push:function(a){c.push(a),d=!1},peek:function(a){return d||b(),void 0===a&&(a=c.length-1),c[a]},pop:function(){return d||b(),c.pop()},size:function(){return c.length},map:function(a){return c.map(a)},debug:function(){return d||b(),c}}}function |
(Sorry about that, but we can’t show files that are this big right now.)
(Sorry about that, but we can’t show files that are this big right now.)
