diff --git a/color-thief.js b/color-thief.js index 3c53a73..13ae407 100644 --- a/color-thief.js +++ b/color-thief.js @@ -1,147 +1 @@ -import quantize from '../node_modules/quantize/dist/index.mjs'; -import core from './core.js'; - -/* - * Color Thief v2.3.2 - * 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 Lokesh Dhakar - * Released under the MIT license - * https://raw.githubusercontent.com/lokesh/color-thief/master/LICENSE - * - * @license - */ - - -/* - 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. -*/ - -const CanvasImage = function (image) { - this.canvas = document.createElement('canvas'); - this.context = this.canvas.getContext('2d'); - this.width = this.canvas.width = image.naturalWidth; - this.height = this.canvas.height = image.naturalHeight; - this.context.drawImage(image, 0, 0, this.width, this.height); -}; - -CanvasImage.prototype.getImageData = function () { - return this.context.getImageData(0, 0, this.width, this.height); -}; - -var ColorThief = function () {}; - -/* - * getColor(sourceImage[, quality]) - * returns {r: num, g: num, b: num} - * - * Use the median cut algorithm provided by quantize.js to cluster similar - * colors and return the base color from the largest cluster. - * - * Quality is an optional argument. It needs to be an integer. 1 is the highest quality settings. - * 10 is the default. There is a trade-off between quality and speed. The bigger the number, the - * faster a color will be returned but the greater the likelihood that it will not be the visually - * most dominant color. - * - * */ -ColorThief.prototype.getColor = function(sourceImage, quality = 10) { - const palette = this.getPalette(sourceImage, 5, quality); - const dominantColor = palette[0]; - return dominantColor; -}; - - -/* - * getPalette(sourceImage[, colorCount, quality]) - * returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...] - * - * Use the median cut algorithm provided by quantize.js to cluster similar colors. - * - * colorCount determines the size of the palette; the number of colors returned. If not set, it - * defaults to 10. - * - * quality is an optional argument. It needs to be an integer. 1 is the highest quality settings. - * 10 is the default. There is a trade-off between quality and speed. The bigger the number, the - * faster the palette generation but the greater the likelihood that colors will be missed. - * - * - */ -ColorThief.prototype.getPalette = function(sourceImage, colorCount, quality) { - const options = core.validateOptions({ - colorCount, - quality - }); - - // Create custom CanvasImage object - const image = new CanvasImage(sourceImage); - const imageData = image.getImageData(); - const pixelCount = image.width * image.height; - - const pixelArray = core.createPixelArray(imageData.data, pixelCount, options.quality); - - // Send array to quantize function which clusters values - // using median cut algorithm - const cmap = quantize(pixelArray, options.colorCount); - const palette = cmap? cmap.palette() : null; - - return palette; -}; - -ColorThief.prototype.getColorFromUrl = function(imageUrl, callback, quality) { - const sourceImage = document.createElement("img"); - - sourceImage.addEventListener('load' , () => { - const palette = this.getPalette(sourceImage, 5, quality); - const dominantColor = palette[0]; - callback(dominantColor, imageUrl); - }); - sourceImage.src = imageUrl -}; - - -ColorThief.prototype.getImageData = function(imageUrl, callback) { - let xhr = new XMLHttpRequest(); - xhr.open('GET', imageUrl, true); - xhr.responseType = 'arraybuffer'; - xhr.onload = function() { - if (this.status == 200) { - let uInt8Array = new Uint8Array(this.response); - i = uInt8Array.length; - let binaryString = new Array(i); - for (let i = 0; i < uInt8Array.length; i++){ - binaryString[i] = String.fromCharCode(uInt8Array[i]); - } - let data = binaryString.join(''); - let base64 = window.btoa(data); - callback ('data:image/png;base64,' + base64); - } - } - xhr.send(); -}; - -ColorThief.prototype.getColorAsync = function(imageUrl, callback, quality) { - const thief = this; - this.getImageData(imageUrl, function(imageData){ - const sourceImage = document.createElement("img"); - sourceImage.addEventListener('load' , function(){ - const palette = thief.getPalette(sourceImage, 5, quality); - const dominantColor = palette[0]; - callback(dominantColor, this); - }); - sourceImage.src = imageData; - }); -}; - - -export default ColorThief; +!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):t.ColorThief=r()}(this,function(){if(!t)var t={map:function(t,r){var n={};return r?t.map(function(t,o){return n.index=o,r.call(n,t)}):t.slice()},naturalOrder:function(t,r){return tr?1:0},sum:function(t,r){var n={};return t.reduce(r?function(t,o,e){return n.index=e,t+r.call(n,o)}:function(t,r){return t+r},0)},max:function(r,n){return Math.max.apply(null,n?t.map(r,n):r)}};var r=function(){var r=5,n=8-r,o=1e3;function e(t,n,o){return(t<<2*r)+(n<f/2){for(e=n.copy(),i=n.copy(),u=(r=a-n[s])<=(o=n[h]-a)?Math.min(n[h]-1,~~(a+o/2)):Math.max(n[s],~~(a-1-r/2));!v[u];)u++;for(c=l[u];!c&&v[u-1];)c=l[--u];return e[h]=u,i[s]=e[h]+1,[e,i]}}(u==o?"r":u==i?"g":"b")}}return u.prototype={volume:function(t){return this._volume&&!t||(this._volume=(this.r2-this.r1+1)*(this.g2-this.g1+1)*(this.b2-this.b1+1)),this._volume},count:function(t){var r=this.histo;if(!this._count_set||t){var n,o,i,u=0;for(n=this.r1;n<=this.r2;n++)for(o=this.g1;o<=this.g2;o++)for(i=this.b1;i<=this.b2;i++)u+=r[e(n,o,i)]||0;this._count=u,this._count_set=!0}return this._count},copy:function(){return new u(this.r1,this.r2,this.g1,this.g2,this.b1,this.b2,this.histo)},avg:function(t){var n=this.histo;if(!this._avg||t){var o,i,u,a,s=0,h=1<<8-r,c=0,f=0,v=0;for(i=this.r1;i<=this.r2;i++)for(u=this.g1;u<=this.g2;u++)for(a=this.b1;a<=this.b2;a++)s+=o=n[e(i,u,a)]||0,c+=o*(i+.5)*h,f+=o*(u+.5)*h,v+=o*(a+.5)*h;this._avg=s?[~~(c/s),~~(f/s),~~(v/s)]:[~~(h*(this.r1+this.r2+1)/2),~~(h*(this.g1+this.g2+1)/2),~~(h*(this.b1+this.b2+1)/2)]}return this._avg},contains:function(t){var r=t[0]>>n;return gval=t[1]>>n,bval=t[2]>>n,r>=this.r1&&r<=this.r2&&gval>=this.g1&&gval<=this.g2&&bval>=this.b1&&bval<=this.b2}},a.prototype={push:function(t){this.vboxes.push({vbox:t,color:t.avg()})},palette:function(){return this.vboxes.map(function(t){return t.color})},size:function(){return this.vboxes.size()},map:function(t){for(var r=this.vboxes,n=0;n251&&e[1]>251&&e[2]>251&&(r[o].color=[255,255,255])}},{quantize:function(h,c){if(!h.length||c<2||c>256)return!1;var f=function(t){var o,i=new Array(1<<3*r);return t.forEach(function(t){o=e(t[0]>>n,t[1]>>n,t[2]>>n),i[o]=(i[o]||0)+1}),i}(h);f.forEach(function(){});var v=function(t,r){var o,e,i,a=1e6,s=0,h=1e6,c=0,f=1e6,v=0;return t.forEach(function(t){(o=t[0]>>n)s&&(s=o),(e=t[1]>>n)c&&(c=e),(i=t[2]>>n)v&&(v=i)}),new u(a,s,h,c,f,v,r)}(h,f),l=new i(function(r,n){return t.naturalOrder(r.count(),n.count())});function g(t,r){for(var n,e=t.size(),i=0;i=r)return;if(i++>o)return;if((n=t.pop()).count()){var u=s(f,n),a=u[0],h=u[1];if(!a)return;t.push(a),h&&(t.push(h),e++)}else t.push(n),i++}}l.push(v),g(l,.75*c);for(var p=new i(function(r,n){return t.naturalOrder(r.count()*r.volume(),n.count()*n.volume())});l.size();)p.push(l.pop());g(p,c);for(var d=new a;p.size();)d.push(p.pop());return d}}}().quantize,n=function(t){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.width=this.canvas.width=t.naturalWidth,this.height=this.canvas.height=t.naturalHeight,this.context.drawImage(t,0,0,this.width,this.height)};n.prototype.getImageData=function(){return this.context.getImageData(0,0,this.width,this.height)};var o=function(){};return o.prototype.getColor=function(t,r){return void 0===r&&(r=10),this.getPalette(t,5,r)[0]},o.prototype.getPalette=function(t,o,e){var i=function(t){var r=t.colorCount,n=t.quality;if(void 0!==r&&Number.isInteger(r)){if(1===r)throw new Error("colorCount should be between 2 and 20. To get one color, call getColor() instead of getPalette()");r=Math.max(r,2),r=Math.min(r,20)}else r=10;return(void 0===n||!Number.isInteger(n)||n<1)&&(n=10),{colorCount:r,quality:n}}({colorCount:o,quality:e}),u=new n(t),a=function(t,r,n){for(var o=t,e=[],i=0,u=void 0,a=void 0,s=void 0,h=void 0,c=void 0;i=125)&&(a>250&&s>250&&h>250||e.push([a,s,h]));return e}(u.getImageData().data,u.width*u.height,i.quality),s=r(a,i.colorCount);return s?s.palette():null},o.prototype.getColorFromUrl=function(t,r,n){var o=this,e=document.createElement("img");e.addEventListener("load",function(){var i=o.getPalette(e,5,n);r(i[0],t)}),e.src=t},o.prototype.getImageData=function(t,r){var n=new XMLHttpRequest;n.open("GET",t,!0),n.responseType="arraybuffer",n.onload=function(){if(200==this.status){var t=new Uint8Array(this.response);i=t.length;for(var n=new Array(i),o=0;o