react-extract-colors/dist/index.cjs.js

A react component to extract dominant colors from an image

var r=require('react');function o(r,o,t,n){return new(t||(t=Promise))(((e,a)=>{function l(r){try{i(n.next(r))}catch(r){a(r)}}function s(r){try{i(n.throw(r))}catch(r){a(r)}}function i(r){var o;r.done?e(r.value):(o=r.value,o instanceof t?o:new t((r=>{r(o)}))).then(l,s)}i((n=n.apply(r,o||[])).next())}))}'function'==typeof SuppressedError&&SuppressedError;const t={maxColors:3,format:'rgba',maxSize:18,colorSimilarityThreshold:50,sortBy:'dominance'};const n=r=>{if(!r)return'rgba(0,0,0,0)';const{r:o,g:t,b:n,a:e}=r;return`rgba(${o},${t},${n},${e})`},e=r=>{if(!r)return'#000000';const{r:o,g:t,b:n}=r;return`#${((1<<24)+(o<<16)+(t<<8)+n).toString(16).slice(1)}`},a=r=>{if(!r)return'rgb(0,0,0)';const{r:o,g:t,b:n}=r;return`rgb(${o},${t},${n})`},l=r=>{if(!r)return'hsl(0,0%,0%)';const o=r.r/255,t=r.g/255,n=r.b/255,e=Math.max(o,t,n),a=Math.min(o,t,n),l=e-a;let s=0,i=0;const c=(e+a)/2;if(0!==l){switch(i=c>.5?l/(2-e-a):l/(e+a),e){case o:s=(t-n)/l+(t<n?6:0);break;case t:s=(n-o)/l+2;break;case n:s=(o-t)/l+4}s/=6}return`hsl(${Math.round(360*s)}, ${Math.round(100*i)}%, ${Math.round(100*c)}%)`},s=r=>{if(!r)return'hsv(0,0%,0%)';const o=r.r/255,t=r.g/255,n=r.b/255,e=Math.max(o,t,n),a=Math.min(o,t,n),l=e-a;let s,i;const c=e;if(0===e)return i=0,s=0,`hsv(${s}, ${i}%, ${100*c}%)`;if(i=l/e,e===a)s=0;else{switch(e){case o:s=(t-n)/l+(t<n?6:0);break;case t:s=(n-o)/l+2;break;case n:s=(o-t)/l+4;break;default:s=0}s/=6}return`hsv(${Math.round(360*s)}, ${Math.round(100*i)}%, ${Math.round(100*c)}%)`},i=(r,o)=>{const[t,n,e]=r,[a,l,s]=o;return Math.sqrt(Math.pow(t-a,2)+Math.pow(n-l,2)+Math.pow(e-s,2))},c=r=>{const o=r.match(/hsv\((\d+),\s*(\d+)%?,\s*(\d+)%?\)/);if(!o)throw new Error('Invalid HSV string format');return{h:parseInt(o[1],10)/360,s:parseInt(o[2],10)/100,v:parseInt(o[3],10)/100}};exports.useExtractColors=(u,h={})=>{const d=Object.assign(Object.assign({},t),h),[m,g]=r.useState([]),[C,f]=r.useState(null),[b,p]=r.useState(null),[M,$]=r.useState(null),[k,v]=r.useState(!0),[w,x]=r.useState(null);return r.useEffect((()=>{let r=!0;return o(void 0,void 0,void 0,(function*(){try{if(r){const r=yield function(r,t){return o(this,void 0,void 0,(function*(){const{maxSize:o,colorSimilarityThreshold:n,sortBy:e}=t;return new Promise(((t,a)=>{const l=new Image;l.crossOrigin='Anonymous',l.onload=()=>{const r=document.createElement('canvas'),u=r.getContext('2d');if(!u)return void a(new Error('Failed to get canvas context'));const{width:h,height:d}=l,m=Math.min(1,o/Math.max(h,d));r.width=h*m,r.height=d*m,u.drawImage(l,0,0,r.width,r.height);const g=((r,o,t)=>{const n={},e={};for(let a=0;a<r.length;a+=4){const l=r[a],s=r[a+1],c=r[a+2],u=r[a+3];if(u>=125){const r=[l,s,c,u];let a=!1;for(const l in e){const s=e[l];if(i(r,s)<o){'dominance'===t&&n[l]++,a=!0;break}}if(!a){const o=`${l},${s},${c},${u}`;e[o]=r,n[o]=1}}}return n})(u.getImageData(0,0,r.width,r.height).data,n,e),C=Object.keys(g).map((r=>{const[o,t,n,e]=r.split(',').map(Number),a=s({r:o,g:t,b:n,a:e}),{s:l,v:i}=c(a);return{r:o,g:t,b:n,a:e,count:g[r],saturation:l*i}})).sort(((r,o)=>'dominance'===e?o.count-r.count:o.saturation-r.saturation));let f=null,b=null,p=null;C.length>0&&(f=C[0],b=(r=>{const{r:o,g:t,b:n,a:e}=r,a=Math.max(0,o-50),l=Math.max(0,t-50),s=Math.max(0,n-50);return{r:a,g:l,b:s,a:e,count:r.count}})(f),p=(r=>{const{r:o,g:t,b:n,a:e}=r,a=Math.min(255,o+30),l=Math.min(255,t+30),s=Math.min(255,n+30);return{r:a,g:l,b:s,a:e,count:r.count}})(f)),t({dominantColor:f,darkerColor:b,lighterColor:p,colors:C})},l.onerror=r=>{a(r)},l.src=r}))}))}(u,d),t=((r,o)=>{const{format:t,maxColors:i}=o;switch(t){case'hex':return{dominantColor:e(r.dominantColor),darkerColor:e(r.darkerColor),lighterColor:e(r.lighterColor),colors:r.colors.slice(0,i).map((r=>e(r)))};case'rgb':return{dominantColor:a(r.dominantColor),darkerColor:a(r.darkerColor),lighterColor:a(r.lighterColor),colors:r.colors.slice(0,i).map((r=>a(r)))};case'hsl':return{dominantColor:l(r.dominantColor),darkerColor:l(r.darkerColor),lighterColor:l(r.lighterColor),colors:r.colors.slice(0,i).map((r=>l(r)))};case'hsv':return{dominantColor:s(r.dominantColor),darkerColor:s(r.darkerColor),lighterColor:s(r.lighterColor),colors:r.colors.slice(0,i).map((r=>s(r)))};default:return{dominantColor:n(r.dominantColor),darkerColor:n(r.darkerColor),lighterColor:n(r.lighterColor),colors:r.colors.slice(0,i).map((r=>n(r)))}}})(r,d);f(t.dominantColor),p(t.darkerColor),$(t.lighterColor),g(t.colors)}}catch(o){r&&x(o)}finally{r&&v(!1)}})),()=>{r=!1}}),[u]),{dominantColor:C,darkerColor:b,lighterColor:M,loading:k,error:w,colors:m}};