https://pr-cy.io/assets/node/features-tools-images-changeColors.d70e41421f4734992037.js

1(globalThis.__LOADABLE_LOADED_CHUNKS__=globalThis.__LOADABLE_LOADED_CHUNKS__||[]).push([[200],{7816:(e,t,r)=>{var o;r.d(t,{A:()=>i});var n=r(96540);let a=0;const l={...o||(o=r.t(n,2))}.useId,i=l?function(e){const t=l();return e||t}:function(e){const[t,r]=n.useState("ssr-id");return n.useEffect((()=>{const e=a;a+=1,r(`rc_unique_${e}`)}),[]),e||t}},6963:(e,t,r)=>{r.d(t,{A:()=>n});var o=r(96540);const n=function(e,t){const[r,n]=(0,o.useState)(e);return(0,o.useEffect)((()=>{const r=setTimeout((()=>{n(e)}),t);return()=>{clearTimeout(r)}}),[e,t]),r}},76541:(e,t,r)=>{r.d(t,{A:()=>a});var o=r(96540),n=r(46512);const a=function(e){let{translations:t}=e;return o.createElement(n.mg,null,o.createElement("title",null,t.title),o.createElement("meta",{name:"description",content:t.description}),o.createElement("meta",{property:"og:title",content:t.title}),t.image&&o.createElement("meta",{property:"og:image",content:t.image}),o.createElement("meta",{property:"og:image:width",content:"600"}),o.createElement("meta",{property:"og:image:height",content:"320"}),o.createElement("meta",{property:"og:type",content:"website"}),t.canonical&&o.createElement("meta",{property:"og:url",content:t.canonical}),o.createElement("meta",{property:"og:description",content:t.description}),t.canonical&&o.createElement("link",{rel:"canonical",href:t.canonical}))}},87478:(e,t,r)=>{r.r(t),r.d(t,{default:()=>_});var o=r(96540),n=r(6442),a=r(93598),l=r(49237),i=r(47152),s=r(16370),c=r(50400),m=r(12828),d=r(35307),g=r(6531),u=r(10864),p=r(97072),h=r(50924);function f(e,t,r){const o=r/100*Math.sqrt(Math.pow(255,2)+Math.pow(255,2)+Math.pow(255,2));return n=e,a=t,Math.sqrt(Math.pow(n[0]-a[0],2)+Math.pow(n[1]-a[1],2)+Math.pow(n[2]-a[2],2))<=o;var n,a}const E=(e,t,r)=>"#"+[e,t,r].map((e=>{const t=e.toString(16);return 1===t.length?"0"+t:t})).join(""),b=e=>{const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?[parseInt(t[1],16),parseInt(t[2],16),parseInt(t[3],16)]:null};var y=r(76541),x=r(45538),C=r(96689),w=r(63767),v=r(40885),A=r(98120),R=r(13419),k=r(21271),M=r(74420),I=r(6963);const L={open:!1},S=60,U=e=>{const t=e.match(/\d+/g);return!t||t.length<3?null:[Number(t[0]),Number(t[1]),Number(t[2])]},B=()=>o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2"},o.createElement("path",{d:"m2 22 2-2h3l7-7M4 20v-3l7-7"}),o.createElement("path",{d:"M14.29 13.3a1 1 0 0 0 1.41 0l.8-.8c.27-.27.27-.72 0-1s-.28-.72 0-1l4.08-4.08a2 2 0 0 0 0-2.83l-.17-.17a2 2 0 0 0-2.83 0L13.5 7.51c-.28.27-.73.27-1 0s-.73-.28-1 0l-.8.79a1 1 0 0 0 0 1.41l3.59 3.59z"}));const _=function(){const[e,t]=(0,o.useState)(null),[r,_]=(0,o.useState)(!1),[j,O]=(0,o.useState)(null),[$,D]=(0,o.useState)(null),[T,P]=(0,o.useState)([{fromColor:"rgb(0,0,0)",toColor:"rgb(0,255,0)",similarity:10}]),[N,W]=(0,o.useState)(null),[z,F]=(0,o.useState)(null),[H,q]=(0,o.useState)("rgb(0,0,0)"),K=(0,o.useRef)(null),X=(0,o.useRef)(null),Y=(0,o.useRef)(null),G=(0,n.A)(),J=(0,I.A)(T,500);(0,o.useEffect)((()=>{if(j){const e=URL.createObjectURL(j);return D(e),()=>URL.revokeObjectURL(e)}D(null)}),[j]),(0,o.useEffect)((()=>{const t=async()=>{if(!e)return;_(!0);const t=[];for(const e of J){const r=U(e.fromColor),o=U(e.toColor);r&&o&&t.push({fromColor:r,toColor:o,similarity:e.similarity})}0!==t.length?(await(async(e,t,r)=>{if(0===t.length)return;if("image/svg+xml"===e.type){const o=new FileReader;return o.onload=o=>{if(!o.target?.result)return;let n=o.target.result;for(const{fromColor:e,toColor:r,similarity:o}of t){const t=E(r[0],r[1],r[2]),a=new RegExp("#[0-9a-f]{3}\\b","gi"),l=new RegExp("#[0-9a-f]{6}\\b","gi");n=n.replace(a,(r=>{const n="#"+r[1]+r[1]+r[2]+r[2]+r[3]+r[3],a=b(n);return a&&f(a,e,o)?t:r})),n=n.replace(l,(r=>{const n=b(r);return n&&f(n,e,o)?t:r}));const i=new RegExp("rgb\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)","gi");n=n.replace(i,((t,n,a,l)=>f([parseInt(n),parseInt(a),parseInt(l)],e,o)?`rgb(${r[0]}, ${r[1]}, ${r[2]})`:t));const s=new RegExp("rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*([\\d.]+)\\s*\\)","gi");n=n.replace(s,((t,n,a,l,i)=>f([parseInt(n),parseInt(a),parseInt(l)],e,o)?`rgba(${r[0]}, ${r[1]}, ${r[2]}, ${i})`:t));const c={red:[255,0,0],green:[0,128,0],blue:[0,0,255],black:[0,0,0],white:[255,255,255]};

1Object.entries(c).forEach((r=>{let[a,l]=r;if(f(l,e,o)){const e=new RegExp(`\\b${a}\\b`,"gi");n=n.replace(e,t)}}))}const a=new File([n],e.name,{type:"image/svg+xml"});r(a)},void o.readAsText(e)}const o=document.createElement("canvas"),n=o.getContext("2d");if(null==n)return;const a=await(0,h.g)(e);if(!a)return;o.width=a.width,o.height=a.height,n.drawImage(a,0,0),URL.revokeObjectURL(a.src);const l=n.getImageData(0,0,o.width,o.height),i=l.data;for(let e=0;e<i.length;e+=4){const r=[i[e],i[e+1],i[e+2]];for(const{fromColor:o,toColor:n,similarity:a}of t)if(f(r,o,a)){i[e]=n[0],i[e+1]=n[1],i[e+2]=n[2];break}}n.putImageData(l,0,0),o.toBlob((t=>{if(t){const o=new File([t],e.name,{type:e.type});r(o)}}),e.type)})(e,t,O),_(!1)):_(!1)};e&&t()}),[e,J]);const Q=(0,o.useCallback)(((e,t,r)=>{P((o=>o[e]?.[t]===r?o:o.map(((o,n)=>n===e?{...o,[t]:r}:o))))}),[]),V=(0,o.useCallback)(((e,t)=>{const r=K.current,o=X.current;if(!r||!o)return;const n=r.getContext("2d"),a=o.getContext("2d");if(!n||!a)return;const l=r.getBoundingClientRect(),i=r.width/l.width,s=r.height/l.height,c=(e-l.left)*i,m=(t-l.top)*s,d=120;o.width=d,o.height=d,a.save(),a.beginPath(),a.arc(S,S,S,0,2*Math.PI),a.clip();const g=Math.floor(c),u=Math.floor(m),p=8*(c-g),h=8*(m-u);a.imageSmoothingEnabled=!1,a.drawImage(r,g-Math.ceil(7.5),u-Math.ceil(7.5),16,16,-p,-h,128,128),a.strokeStyle="rgba(255,255,255,0.9)",a.lineWidth=1.5,a.shadowColor="rgba(0,0,0,0.6)",a.shadowBlur=1,a.beginPath(),a.moveTo(50,S),a.lineTo(70,S),a.stroke(),a.beginPath(),a.moveTo(S,50),a.lineTo(S,70),a.stroke(),a.restore(),a.beginPath(),a.arc(S,S,59,0,2*Math.PI),a.strokeStyle="rgba(255,255,255,0.8)",a.lineWidth=2,a.shadowColor="rgba(0,0,0,0.4)",a.shadowBlur=4,a.stroke()}),[]);(0,o.useEffect)((()=>{if(!N)return;const e=e=>{const t=K.current,r=Y.current;if(!t||!r)return;const o=t.getBoundingClientRect(),n=r.getBoundingClientRect(),a=Math.max(o.left,Math.min(e.clientX,o.right)),l=Math.max(o.top,Math.min(e.clientY,o.bottom)),i=a-n.left,s=l-n.top;F({x:i,y:s});const c=((e,t,r)=>{const o=e.getContext("2d");if(!o)return"rgb(0,0,0)";const n=e.getBoundingClientRect(),a=e.width/n.width,l=e.height/n.height,i=(t-n.left)*a,s=(r-n.top)*l;try{const e=o.getImageData(Math.round(i),Math.round(s),1,1).data;return`rgb(${e[0]},${e[1]},${e[2]})`}catch{return"rgb(0,0,0)"}})(t,a,l);q(c),V(a,l),Q(N.index,N.field,c)};return document.addEventListener("mousemove",e),()=>{document.removeEventListener("mousemove",e)}}),[N,V]);const Z=(0,o.useCallback)((()=>{N&&(W(null),F(null))}),[N]);(0,o.useEffect)((()=>{if(e&&K.current){const t=K.current.getContext("2d"),r=new Image;return r.onload=()=>{K.current&&t&&(K.current.width=r.width,K.current.height=r.height,t.clearRect(0,0,r.width,r.height),t.drawImage(r,0,0))},r.src=URL.createObjectURL(e),()=>{URL.revokeObjectURL(r.src)}}}),[e]);const ee=e=>N?.index===e&&"fromColor"===N?.field,te=e=>N?.index===e&&"toColor"===N?.field,re=(e,t)=>{N?.index===e&&N?.field===t?(W(null),F(null)):W({index:e,field:t})};return o.createElement(o.Fragment,null,o.createElement(y.A,{translations:{title:G.formatMessage({id:"tools.images.changeColors.meta.title"}),description:G.formatMessage({id:"tools.images.changeColors.meta.description"})}}),o.createElement(A.A,{title:G.formatMessage({id:"tools.images.changeColors.title"}),description:G.formatMessage({id:"tools.images.changeColors.description"})},o.createElement(i.A,{gutter:[20,20]},o.createElement(s.A,{xs:{span:24},md:{span:12}},e?o.createElement(o.Fragment,null,o.createElement("div",{ref:Y,style:{position:"relative",marginBottom:"10px"}},o.createElement("canvas",{ref:K,onClick:Z,style:{maxWidth:"100%",cursor:N?"none":"default",border:"1px solid var(--border-color)",borderRadius:"8px",display:"block"}}),N&&z&&(()=>{const e=z.y<156?z.y+24:z.y-148-8,t=K.current,r=t?t.getBoundingClientRect().width:300,n=Math.max(0,Math.min(z.x-S,r-120));return o.createElement("div",{style:{position:"absolute",left:n,top:e,pointerEvents:"none",zIndex:10,display:"flex",flexDirection:"column",alignItems:"center",gap:"4px"}},o.createElement("canvas",{ref:X,width:120,height:120,style:{borderRadius:"50%",boxShadow:"0 2px 12px rgba(0,0,0,0.3)",border:`3px solid ${H}`}}),o.createElement("div",{style:{background:H,color:(()=>{const e=H.match(/\d+/g);if(!e)return"#fff";return.299*Number(e[0])+.587*Number(e[1])+.114*Number(e[2])>150?"#000":"#fff"})(),padding:"2px 8px",borderRadius:"4px",fontSize:"11px",fontWeight:500,whiteSpace:"nowrap",boxShadow:"0 1px 4px rgba(0,0,0,0.2)"}},H))})()),o.createElement("div",{style:{display:"flex",justifyContent:"flex-end",marginBottom:"16

1px"}},o.createElement(c.Ay,{onClick:()=>{t(null),O(null),P([{fromColor:"rgb(0,0,0)",toColor:"rgb(0,255,0)",similarity:10}]),W(null),F(null)}},G.formatMessage({id:"common.reset"})))):o.createElement("div",{style:{marginBottom:"32px"}},o.createElement(m.A.Dragger,{accept:"image/*",showUploadList:!1,beforeUpload:e=>(e=>(t(e),!1))(e),height:200},o.createElement("div",{style:{padding:"20px"}},o.createElement("p",{className:"ant-upload-text",style:{margin:0}},G.formatMessage({id:"common.dragAndDrop"}))))),o.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"16px"}},T.map(((e,t)=>o.createElement("div",{key:t,style:{padding:"24px",background:"var(--background-color)",borderRadius:"8px",border:"1px solid var(--border-color)",position:"relative"}},T.length>1&&o.createElement(c.Ay,{type:"text",size:"small",icon:o.createElement(a.A,null),onClick:()=>(e=>{P((t=>t.filter(((t,r)=>r!==e)))),N&&N.index===e&&(W(null),F(null))})(t),style:{position:"absolute",top:"8px",right:"8px",color:"var(--text-secondary-color)"}}),o.createElement(i.A,{gutter:[16,24]},o.createElement(s.A,{span:12},o.createElement("h3",{style:{marginBottom:"16px",fontSize:"16px",fontWeight:500}},G.formatMessage({id:"tools.images.changeColors.fromColor"})),o.createElement("div",{style:{display:"flex",alignItems:"center",gap:"12px"}},o.createElement(d.A,{showText:!0,onChange:e=>Q(t,"fromColor",e.toRgbString()),value:e.fromColor}),o.createElement(c.Ay,{icon:o.createElement(B,null),onClick:()=>re(t,"fromColor"),type:ee(t)?"primary":"default"}))),o.createElement(s.A,{span:12},o.createElement("h3",{style:{marginBottom:"16px",fontSize:"16px",fontWeight:500}},G.formatMessage({id:"tools.images.changeColors.toColor"})),o.createElement("div",{style:{display:"flex",alignItems:"center",gap:"12px"}},o.createElement(d.A,{showText:!0,onChange:e=>Q(t,"toColor",e.toRgbString()),value:e.toColor}),o.createElement(c.Ay,{icon:o.createElement(B,null),onClick:()=>re(t,"toColor"),type:te(t)?"primary":"default"}))),o.createElement(s.A,{span:24},o.createElement("h3",{style:{marginBottom:"16px",fontSize:"16px",fontWeight:500}},G.formatMessage({id:"tools.images.changeColors.similarity"})),o.createElement("div",{style:{display:"flex",gap:"16px"}},o.createElement(g.A,{onChange:e=>Q(t,"similarity",e),value:e.similarity,min:1,max:100,tooltip:L,style:{flex:1}}),o.createElement(u.A,{onChange:e=>Q(t,"similarity",e),value:e.similarity,min:1,max:100,style:{width:"80px"}}))))))),o.createElement(c.Ay,{type:"dashed",onClick:()=>{P((e=>[...e,{fromColor:"rgb(0,0,0)",toColor:"rgb(0,255,0)",similarity:10}]))},icon:o.createElement(l.A,null),block:!0},G.formatMessage({id:"tools.images.changeColors.addColor"})))),o.createElement(s.A,{xs:{span:24},md:{span:12}},o.createElement("div",{style:{border:"1px solid var(--border-color)",borderRadius:"8px",overflow:"hidden",minHeight:"200px",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--background-color)"}},$&&!r?o.createElement("img",{src:$,alt:"result",style:{maxWidth:"100%",display:"block"}}):r?o.createElement("div",{style:{padding:"20px",width:"100%"}},o.createElement(p.A,{active:!0,loading:!0,paragraph:{rows:5}})):null),o.createElement("div",{style:{marginTop:"10px"}},o.createElement(c.Ay,{type:"primary",onClick:()=>j&&(0,x.A)(j),disabled:!j||r},G.formatMessage({id:"common.download"})))))),o.createElement(k.A,null,o.createElement(w.A,{tool:"backgroundRemover",titleId:"tools.images.aiPromoBg.title",descId:"tools.images.aiPromoBg.desc",buttonId:"tools.images.aiPromoBg.button",moreLabelId:"tools.images.aiPromoBg.more",tools:["aiImageEditor","upscale","eraser"]}),o.createElement(v.A,null,o.createElement(M.A,{id:"tools.images.changeColors.content"})),o.createElement(R.A,{category:["imageEdit","ai"],exclude:["backgroundRemover","aiImageEditor","upscale","eraser"]})),o.createElement(C.A,{expanded:!0}))}},50924:(e,t,r)=>{r.d(t,{g:()=>o});const o=async e=>{const t=new Image;t.src=URL.createObjectURL(e);try{return await t.decode(),t}catch{return URL.revokeObjectURL(t.src),null}}},45538:(e,t,r)=>{function o(e){if(e){let t=e.name;const r=new Blob([e],{type:e.type}),o=window.URL.createObjectURL(r),n=document.createElement("a");n.href=o,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n),window.URL.revokeObjectURL(o)}}r.d(t,{A:()=>

1o})},74420:(e,t,r)=>{r.d(t,{A:()=>i});var o=r(96540),n=r(6442),a=r(36384);const l={},i=e=>{let{id:t,defaultMessage:r="–",values:i=l}=e;const s=(0,n.A)(),c=(0,a.A)({breaks:!0});return o.createElement("div",{dangerouslySetInnerHTML:{__html:c.render(s.formatMessage({id:t,defaultMessage:r},i))}})}}}]);