extract-colors - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

lib/color/Color.d.ts

 /**
  * Informations like saturation or count of pixels in image.
  *
- * @module Color
- */
-/**
  * @class
@@ -8,0 +5,0 @@ * @classdesc Calculate some informations and store data about color.

lib/color/RootGroup.d.ts

@@ -6,5 +6,2 @@ import Color from './Color';
  *
- * @module RootGroup
- */
-/**
  * @class
@@ -11,0 +8,0 @@ * @classdesc Manage list of colors or groups.

lib/extract-colors.browser.es.d.ts

@@ -6,3 +6,7 @@ import { FinalColor } from "./types/Color";
  */
-declare const extractColorsFromImageData: (imageData: ImageData, options?: NodeOptions) => FinalColor[];
+declare const extractColorsFromImageData: (imageData: ImageData | {
+    data: Uint8ClampedArray | number[];
+    width?: number;
+    height?: number;
+}, options?: NodeOptions) => FinalColor[];
 /**
@@ -20,4 +24,8 @@ * Extract colors from an HTMLImageElement.
  */
-declare const extractColors: (picture: string | HTMLImageElement | ImageData, options?: BrowserOptions) => Promise<FinalColor[]>;
+declare const extractColors: (picture: string | HTMLImageElement | ImageData | {
+    data: Uint8ClampedArray | number[];
+    width?: number;
+    height?: number;
+}, options?: BrowserOptions) => Promise<FinalColor[]>;
 export { extractColorsFromImageData, extractColorsFromImage, extractColorsFromSrc, extractColors };
 export default extractColors;

lib/extract-colors.browser.es.js

@@ -371,3 +371,6 @@ const createFinalColor = (color, pixels) => {
 const extractColors = (picture, options) => {
-  if (picture instanceof ImageData) {
+  if (picture instanceof Image) {
+    return extractColorsFromImage(picture, options);
+  }
+  if (picture instanceof ImageData || picture instanceof Object && picture.data) {
     return new Promise((resolve) => {
@@ -377,8 +380,8 @@ resolve(extractColorsFromImageData(picture, options));
   }
-  if (picture instanceof Image) {
-    return extractColorsFromImage(picture, options);
+  if (typeof picture === "string") {
+    return extractColorsFromSrc(picture, options);
   }
-  return extractColorsFromSrc(picture, options);
+  throw new Error(`Can not analyse picture`);
 };
 export { extractColors as default, extractColors, extractColorsFromImage, extractColorsFromImageData, extractColorsFromSrc };
 //# sourceMappingURL=extract-colors.browser.es.js.map

lib/extract-colors.browser.umd.d.ts

@@ -6,3 +6,7 @@ import { FinalColor } from "./types/Color";
  */
-declare const extractColorsFromImageData: (imageData: ImageData, options?: NodeOptions) => FinalColor[];
+declare const extractColorsFromImageData: (imageData: ImageData | {
+    data: Uint8ClampedArray | number[];
+    width?: number;
+    height?: number;
+}, options?: NodeOptions) => FinalColor[];
 /**
@@ -20,4 +24,8 @@ * Extract colors from an HTMLImageElement.
  */
-declare const extractColors: (picture: string | HTMLImageElement | ImageData, options?: BrowserOptions) => Promise<FinalColor[]>;
+declare const extractColors: (picture: string | HTMLImageElement | ImageData | {
+    data: Uint8ClampedArray | number[];
+    width?: number;
+    height?: number;
+}, options?: BrowserOptions) => Promise<FinalColor[]>;
 export { extractColorsFromImageData, extractColorsFromImage, extractColorsFromSrc, extractColors };
 export default extractColors;

lib/extract-colors.browser.umd.js

@@ -1,2 +0,2 @@
-(function(h,g){typeof exports=="object"&&typeof module!="undefined"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(h=typeof globalThis!="undefined"?globalThis:h||self,g(h.ExtractColors={}))})(this,function(h){"use strict";const g=(e,t)=>({hex:`#${"0".repeat(6-e.hex.toString(16).length)}${e.hex.toString(16)}`,red:e.red,green:e.green,blue:e.blue,area:e.count/t,hue:e.hue,saturation:e.saturation,lightness:e.lightness,intensity:e.intensity});class C{constructor(t,s,r,n=t<<16|s<<8|r){this.count=1,this._saturation=-1,this._hue=-1,this._lightness=-1,this._intensity=-1,this.red=t,this.green=s,this.blue=r,this.hex=n}static distance(t,s){return(Math.abs(s.red-t.red)+Math.abs(s.green-t.green)+Math.abs(s.blue-t.blue))/(3*255)}updateHSL(){const t=this.red/255,s=this.green/255,r=this.blue/255,n=Math.max(t,s,r),o=Math.min(t,s,r);if(this._lightness=(n+o)/2,n===o)this._hue=0,this._saturation=0,this._intensity=0;else{const i=n-o;switch(this._saturation=this._lightness>.5?i/(2-n-o):i/(n+o),this._intensity=this._saturation*((.5-Math.abs(.5-this._lightness))*2),n){case t:this._hue=((s-r)/i+(s<r?6:0))/6;break;case s:this._hue=((r-t)/i+2)/6;break;case r:this._hue=((t-s)/i+4)/6;break}}}get hue(){return this._hue===-1&&this.updateHSL(),this._hue}get saturation(){return this._saturation===-1&&this.updateHSL(),this._saturation}get lightness(){return this._lightness===-1&&this.updateHSL(),this._lightness}get intensity(){return this._intensity===-1&&this.updateHSL(),this._intensity}}class E{constructor(){this.count=1,this.children={}}addColor(t,s,r,n){return this.children[t]?this.children[t].count++:this.children[t]=new C(s,r,n,t),this.children[t]}getList(){return Object.keys(this.children).map(t=>this.children[t])}getMaxWeight(t){if(this.maxWeight===void 0){const s=this.getList().map(r=>r.count/t);s.sort((r,n)=>n-r),this.maxWeight=s[0]||0}return this.maxWeight}getMaxWeightColor(t){const s=this.getList();return s.sort((r,n)=>n.count/t-r.count/t),s[0]}getMaxCountColor(){return this.getList().reduce((r,n)=>r.count>=n.count?r:n)}}class x{constructor(){this.isColor=!1,this.count=1,this.children={}}addRootGroup(t){return this.children[t]?this.children[t].count++:this.children[t]=new x,this.children[t]}getList(){return Object.keys(this.children).map(t=>this.children[t])}addBudGroup(t){return this.children[t]?this.children[t].count++:this.children[t]=new E,this.children[t]}getMaxWeight(t){if(this.maxWeight===void 0){const s=this.getList().map(r=>r.count/t);s.sort((r,n)=>n-r),this.maxWeight=s[0]||0}return this.maxWeight}getMaxWeightColor(t){const s=this.getList();return s.sort((r,n)=>n.count/t-r.count/t),s[0].getMaxWeightColor(t)}getMaxCountColor(){return this.getList().reduce((r,n)=>r.getMaxCountColor().count>=n.getMaxCountColor().count?r:n).getMaxCountColor()}getColors(t,s){const r=this.getList().map(o=>{const{count:i}=o,a=o.getMaxCountColor();return a.count=i,a});r.sort((o,i)=>i.count/s-o.count/s);const n=[];return r.forEach(o=>{const i=n.find(a=>C.distance(a,o)<t);i?i.count+=o.count:n.push(o)}),n}}const G=(e,t,s=0,r=Number.MAX_SAFE_INTEGER)=>{if(!Number.isInteger(t)||t<s||t>r)throw new Error(`${e} is invalid (${t})`);return t},w=(e,t,s=0,r=Number.MAX_VALUE)=>{if(Number(t)!==t||t<s||t>r)throw new Error(`${e} is invalid (${t})`);return t},P=(e,t)=>{if(!t||{}.toString.call(t)!=="[object Function]")throw new Error(`${e} is invalid (${t})`);return t},c=class{constructor({pixels:e=c.pixelsDefault,distance:t=c.distanceDefault,splitPower:s=c.splitPowerDefault,colorValidator:r=c.colorValidatorDefault}={}){var n,o,i,a;this.pixels=(n=G("pixels",e,1))!=null?n:c.pixelsDefault,this.splitPower=(o=w("splitPower",s,2,15))!=null?o:c.splitPowerDefault,this.distance=(i=w("distance",t,0,1))!=null?i:c.distanceDefault,this.colorValidator=(a=P("colorValidator",r))!=null?a:c.colorValidatorDefault}process({data:e,width:t,height:s}){const r=new x,n=this.splitPower,o=t&&s&&Math.floor(Math.sqrt(t*s)/this.pixels)||1;for(let i=0;i<e.length;i+=4*o){const a=e[i],u=e[i+1],l=e[i+2],p=e[i+3];if(this.colorValidator(a,u,l,p)){const y=a<<16|u<<8|l,$=(a>>4&15)<<2|(u>>4&15)<<1|l>>4&15,V=Math.round(a*(n-1)/255)*(n*n)+Math.round(u*(n-1)/255)*n+Math.round(l*(n-1)/255);r.addRootGroup(V).addBudGroup($).addColor(y,a,u,l)}}return r.getColors(this.distance,this.pixels)}};let d=c;d.pixelsDefault=1e4,d.distanceDefault=.12,d.splitPowerDefault=10,d.colorValidatorDefault=(e,t,s,r)=>(r!=null?r:255)>250;const f=(e,t)=>Math.abs(e-t),v=(e,t)=>Math.min(f(e,t),f((e+.5)%1,(t+.5)%1));class I{constructor(){this.colors=[],this._average=null}addColor(t){this.colors.push(t),this._average=null}isSamePalette(t,s,r,n){for(let o=0;o<this.colors.length;o++){const i=this.colors[o];if(!(v(i.hue,t.hue)<s&&f(i.saturation,t.saturation)<r&&f(i.lightness,t.lightness)<n))return!1}return!0}get average(){if(!this._average){const{red:t,green:s,blue:r}=this.colors.reduce((o,i)=>(o.red+=i.red,o.green+=i.green,o.blue+=i.blue,o),{red:0,green:0,blue:0}),n=this.colors.reduce((o,i)=>o+i.count,0);this._average=new C(Math.round(t/this.colors.length),Math.round(s/this.colors.length),Math.round(r/this.colors.length)),this._average.count=n}return this._average}}const m=class{constructor({hue:e=m.hueDefault,saturation:t=m.saturationDefault,lightness:s=m.lightnessDefault}={}){this._groups=[],this.hue=e,this.saturation=t,this.lightness=s}addColor(e){const t=this._groups.find(s=>s.isSamePalette(e,this.hue,this.saturation,this.lightness));if(t)t.addColor(e);else{const s=new I;s.addColor(e),this._groups.push(s)}}getGroups(){return this._groups.map(e=>e.average)}};let _=m;_.hueDefault=1/12,_.saturationDefault=1/5,_.lightnessDefault=1/5;var F=(e,t,{saturationDistance:s,lightnessDistance:r,hueDistance:n}={})=>{const o=new _({hue:n,saturation:s,lightness:r});e.forEach(a=>o.addColor(a));const i=o.getGroups();return i.sort((a,u)=>{const l=(u.intensity+.1)*(.9-u.count/t),p=(a.intensity+.1)*(.9-a.count/t);return l-p}),i};const W=(e,t)=>{const s=e.width*e.height,r=s<t?e.width:Math.round(e.width*Math.sqrt(t/s)),n=s<t?e.height:Math.round(e.height*Math.sqrt(t/s)),o=document.createElement("canvas");o.width=r,o.height=n;const i=o.getContext("2d");return i.drawImage(e,0,0,e.width,e.height,0,0,r,n),i.getImageData(0,0,r,n)},b=(e,t,s)=>F(e,t,s).map(n=>g(n,t)),D=(e,t)=>{const s=new d(t),r=s.process(e);return b(r,s.pixels,t)},M=(e,t)=>(e.crossOrigin=(t==null?void 0:t.crossOrigin)||null,new Promise(s=>{const r=(n,o)=>{const i=new d(o),a=W(n,i.pixels),u=i.process(a);s(b(u,i.pixels,o))};if(e.complete)r(e,t);else{const n=()=>{e.removeEventListener("load",n),r(e,t)};e.addEventListener("load",n)}})),L=(e,t)=>{const s=new Image;return s.src=e,M(s,t)},S=(e,t)=>e instanceof ImageData?new Promise(s=>{s(D(e,t))}):e instanceof Image?M(e,t):L(e,t);h.default=S,h.extractColors=S,h.extractColorsFromImage=M,h.extractColorsFromImageData=D,h.extractColorsFromSrc=L,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(h,g){typeof exports=="object"&&typeof module!="undefined"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(h=typeof globalThis!="undefined"?globalThis:h||self,g(h.ExtractColors={}))})(this,function(h){"use strict";const g=(e,t)=>({hex:`#${"0".repeat(6-e.hex.toString(16).length)}${e.hex.toString(16)}`,red:e.red,green:e.green,blue:e.blue,area:e.count/t,hue:e.hue,saturation:e.saturation,lightness:e.lightness,intensity:e.intensity});class C{constructor(t,s,r,n=t<<16|s<<8|r){this.count=1,this._saturation=-1,this._hue=-1,this._lightness=-1,this._intensity=-1,this.red=t,this.green=s,this.blue=r,this.hex=n}static distance(t,s){return(Math.abs(s.red-t.red)+Math.abs(s.green-t.green)+Math.abs(s.blue-t.blue))/(3*255)}updateHSL(){const t=this.red/255,s=this.green/255,r=this.blue/255,n=Math.max(t,s,r),o=Math.min(t,s,r);if(this._lightness=(n+o)/2,n===o)this._hue=0,this._saturation=0,this._intensity=0;else{const i=n-o;switch(this._saturation=this._lightness>.5?i/(2-n-o):i/(n+o),this._intensity=this._saturation*((.5-Math.abs(.5-this._lightness))*2),n){case t:this._hue=((s-r)/i+(s<r?6:0))/6;break;case s:this._hue=((r-t)/i+2)/6;break;case r:this._hue=((t-s)/i+4)/6;break}}}get hue(){return this._hue===-1&&this.updateHSL(),this._hue}get saturation(){return this._saturation===-1&&this.updateHSL(),this._saturation}get lightness(){return this._lightness===-1&&this.updateHSL(),this._lightness}get intensity(){return this._intensity===-1&&this.updateHSL(),this._intensity}}class E{constructor(){this.count=1,this.children={}}addColor(t,s,r,n){return this.children[t]?this.children[t].count++:this.children[t]=new C(s,r,n,t),this.children[t]}getList(){return Object.keys(this.children).map(t=>this.children[t])}getMaxWeight(t){if(this.maxWeight===void 0){const s=this.getList().map(r=>r.count/t);s.sort((r,n)=>n-r),this.maxWeight=s[0]||0}return this.maxWeight}getMaxWeightColor(t){const s=this.getList();return s.sort((r,n)=>n.count/t-r.count/t),s[0]}getMaxCountColor(){return this.getList().reduce((r,n)=>r.count>=n.count?r:n)}}class x{constructor(){this.isColor=!1,this.count=1,this.children={}}addRootGroup(t){return this.children[t]?this.children[t].count++:this.children[t]=new x,this.children[t]}getList(){return Object.keys(this.children).map(t=>this.children[t])}addBudGroup(t){return this.children[t]?this.children[t].count++:this.children[t]=new E,this.children[t]}getMaxWeight(t){if(this.maxWeight===void 0){const s=this.getList().map(r=>r.count/t);s.sort((r,n)=>n-r),this.maxWeight=s[0]||0}return this.maxWeight}getMaxWeightColor(t){const s=this.getList();return s.sort((r,n)=>n.count/t-r.count/t),s[0].getMaxWeightColor(t)}getMaxCountColor(){return this.getList().reduce((r,n)=>r.getMaxCountColor().count>=n.getMaxCountColor().count?r:n).getMaxCountColor()}getColors(t,s){const r=this.getList().map(o=>{const{count:i}=o,a=o.getMaxCountColor();return a.count=i,a});r.sort((o,i)=>i.count/s-o.count/s);const n=[];return r.forEach(o=>{const i=n.find(a=>C.distance(a,o)<t);i?i.count+=o.count:n.push(o)}),n}}const G=(e,t,s=0,r=Number.MAX_SAFE_INTEGER)=>{if(!Number.isInteger(t)||t<s||t>r)throw new Error(`${e} is invalid (${t})`);return t},b=(e,t,s=0,r=Number.MAX_VALUE)=>{if(Number(t)!==t||t<s||t>r)throw new Error(`${e} is invalid (${t})`);return t},P=(e,t)=>{if(!t||{}.toString.call(t)!=="[object Function]")throw new Error(`${e} is invalid (${t})`);return t},c=class{constructor({pixels:e=c.pixelsDefault,distance:t=c.distanceDefault,splitPower:s=c.splitPowerDefault,colorValidator:r=c.colorValidatorDefault}={}){var n,o,i,a;this.pixels=(n=G("pixels",e,1))!=null?n:c.pixelsDefault,this.splitPower=(o=b("splitPower",s,2,15))!=null?o:c.splitPowerDefault,this.distance=(i=b("distance",t,0,1))!=null?i:c.distanceDefault,this.colorValidator=(a=P("colorValidator",r))!=null?a:c.colorValidatorDefault}process({data:e,width:t,height:s}){const r=new x,n=this.splitPower,o=t&&s&&Math.floor(Math.sqrt(t*s)/this.pixels)||1;for(let i=0;i<e.length;i+=4*o){const a=e[i],u=e[i+1],l=e[i+2],w=e[i+3];if(this.colorValidator(a,u,l,w)){const W=a<<16|u<<8|l,$=(a>>4&15)<<2|(u>>4&15)<<1|l>>4&15,V=Math.round(a*(n-1)/255)*(n*n)+Math.round(u*(n-1)/255)*n+Math.round(l*(n-1)/255);r.addRootGroup(V).addBudGroup($).addColor(W,a,u,l)}}return r.getColors(this.distance,this.pixels)}};let d=c;d.pixelsDefault=1e4,d.distanceDefault=.12,d.splitPowerDefault=10,d.colorValidatorDefault=(e,t,s,r)=>(r!=null?r:255)>250;const f=(e,t)=>Math.abs(e-t),v=(e,t)=>Math.min(f(e,t),f((e+.5)%1,(t+.5)%1));class I{constructor(){this.colors=[],this._average=null}addColor(t){this.colors.push(t),this._average=null}isSamePalette(t,s,r,n){for(let o=0;o<this.colors.length;o++){const i=this.colors[o];if(!(v(i.hue,t.hue)<s&&f(i.saturation,t.saturation)<r&&f(i.lightness,t.lightness)<n))return!1}return!0}get average(){if(!this._average){const{red:t,green:s,blue:r}=this.colors.reduce((o,i)=>(o.red+=i.red,o.green+=i.green,o.blue+=i.blue,o),{red:0,green:0,blue:0}),n=this.colors.reduce((o,i)=>o+i.count,0);this._average=new C(Math.round(t/this.colors.length),Math.round(s/this.colors.length),Math.round(r/this.colors.length)),this._average.count=n}return this._average}}const m=class{constructor({hue:e=m.hueDefault,saturation:t=m.saturationDefault,lightness:s=m.lightnessDefault}={}){this._groups=[],this.hue=e,this.saturation=t,this.lightness=s}addColor(e){const t=this._groups.find(s=>s.isSamePalette(e,this.hue,this.saturation,this.lightness));if(t)t.addColor(e);else{const s=new I;s.addColor(e),this._groups.push(s)}}getGroups(){return this._groups.map(e=>e.average)}};let _=m;_.hueDefault=1/12,_.saturationDefault=1/5,_.lightnessDefault=1/5;var y=(e,t,{saturationDistance:s,lightnessDistance:r,hueDistance:n}={})=>{const o=new _({hue:n,saturation:s,lightness:r});e.forEach(a=>o.addColor(a));const i=o.getGroups();return i.sort((a,u)=>{const l=(u.intensity+.1)*(.9-u.count/t),w=(a.intensity+.1)*(.9-a.count/t);return l-w}),i};const F=(e,t)=>{const s=e.width*e.height,r=s<t?e.width:Math.round(e.width*Math.sqrt(t/s)),n=s<t?e.height:Math.round(e.height*Math.sqrt(t/s)),o=document.createElement("canvas");o.width=r,o.height=n;const i=o.getContext("2d");return i.drawImage(e,0,0,e.width,e.height,0,0,r,n),i.getImageData(0,0,r,n)},p=(e,t,s)=>y(e,t,s).map(n=>g(n,t)),D=(e,t)=>{const s=new d(t),r=s.process(e);return p(r,s.pixels,t)},M=(e,t)=>(e.crossOrigin=(t==null?void 0:t.crossOrigin)||null,new Promise(s=>{const r=(n,o)=>{const i=new d(o),a=F(n,i.pixels),u=i.process(a);s(p(u,i.pixels,o))};if(e.complete)r(e,t);else{const n=()=>{e.removeEventListener("load",n),r(e,t)};e.addEventListener("load",n)}})),L=(e,t)=>{const s=new Image;return s.src=e,M(s,t)},S=(e,t)=>{if(e instanceof Image)return M(e,t);if(e instanceof ImageData||e instanceof Object&&e.data)return new Promise(s=>{s(D(e,t))});if(typeof e=="string")return L(e,t);throw new Error("Can not analyse picture")};h.default=S,h.extractColors=S,h.extractColorsFromImage=M,h.extractColorsFromImageData=D,h.extractColorsFromSrc=L,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
 //# sourceMappingURL=extract-colors.browser.umd.js.map

lib/extract-colors.node.cjs.d.ts

@@ -14,3 +14,7 @@ import { FinalColor } from './types/Color';
  */
-declare const extractColors: (imageData: ImageData, options?: NodeOptions) => Promise<FinalColor[]>;
+declare const extractColors: (imageData: ImageData | {
+    data: Uint8ClampedArray | number[];
+    width?: number;
+    height?: number;
+}, options?: NodeOptions) => Promise<FinalColor[]>;
 declare const extractColorsFromImage: () => never;
@@ -17,0 +21,0 @@ declare const extractColorsFromSrc: () => never;

lib/extract-colors.node.es.d.ts

@@ -14,3 +14,7 @@ import { FinalColor } from './types/Color';
  */
-declare const extractColors: (imageData: ImageData, options?: NodeOptions) => Promise<FinalColor[]>;
+declare const extractColors: (imageData: ImageData | {
+    data: Uint8ClampedArray | number[];
+    width?: number;
+    height?: number;
+}, options?: NodeOptions) => Promise<FinalColor[]>;
 declare const extractColorsFromImage: () => never;
@@ -17,0 +21,0 @@ declare const extractColorsFromSrc: () => never;

package.json

 {
   "name": "extract-colors",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Extract color palettes from images",
@@ -5,0 +5,0 @@ "main": "lib/extract-colors.node.cjs.js",

readme.md

@@ -86,3 +86,7 @@ # Extract Colors
   if(!err) {
-    extractColors(pixels)
+    const data = [...pixels.data]
+    const width = Math.round(Math.sqrt(data.length / 4))
+    const height = width
+
+    extractColors({ data, width, height })
       .then(console.log)
@@ -89,0 +93,0 @@ .catch(console.log)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

198900

increased by0.09%

Lines of code

1113

increased by2.02%

Number of lines in readme file

211

increased by1.93%

No dependency changes