https://conversiontab.com/build/assets/image-color-picker-page-DQWxO_xh.js

1import{d as Nt,a as Kt,b as Jt,c as Qt,r as te,G as ee}from"./colorcodes-Dfh5dT81.js";import{w as ne,c as ut}from"./fileDropzone-CA_uaFcV.js";import{F as Tt}from"./transientNotice-Ds_di7lD.js";const R="empty",ft="image",oe="locked",ie=50*1024*1024,Ht=.5,Yt=4,Rt=1.25,Xt=1.12,ce=`<svg xmlns="http://www.w3.org/2000/svg" width="640" height="420" viewBox="0 0 640 420" role="img" aria-label="Colorful abstract gradient sample for trying the image color picker">
2  <defs>
3    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
4      <stop offset="0%" stop-color="#e74c3c"/>
5      <stop offset="25%" stop-color="#f39c12"/>
6      <stop offset="50%" stop-color="#2ecc71"/>
7      <stop offset="75%" stop-color="#3498db"/>
8      <stop offset="100%" stop-color="#9b59b6"/>
9    </linearGradient>
10    <radialGradient id="g2" cx="70%" cy="30%" r="45%">
11      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"/>
12      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
13    </radialGradient>
14  </defs>
15  <rect width="640" height="420" fill="url(#g1)"/>
16  <circle cx="480" cy="100" r="120" fill="url(#g2)"/>
17  <rect x="40" y="280" width="180" height="90" rx="12" fill="#1a1a2e" opacity="0.85"/>
18  <rect x="260" y="60" width="140" height="140" rx="70" fill="#ff6b6b"/>
19  <rect x="120" y="80" width="90" height="90" rx="8" fill="#ffd93d"/>
20</svg>`;function X(c){const r=document.getElementById("ctImgPickToastBody"),i=document.getElementById("ctImgPickToast");if(!r||!i||typeof bootstrap>"u"){window.alert(c);return}r.textContent=c,bootstrap.Toast.getOrCreateInstance(i).show()}function N(c,r){c&&(c.textContent=r)}function se(c,r,i){var l,k,L;if(c.disabled=!0,N(i,`${r.replace(/^Copy\s*/i,"")} copied to clipboard`),c.classList.contains("ct-img-pick__copy-btn")){c.classList.add("ct-img-pick__copy-btn--success"),(l=c.querySelector(".ct-img-pick__copy-ic--default"))==null||l.classList.add("d-none"),(k=c.querySelector(".ct-img-pick__copy-ic--done"))==null||k.classList.remove("d-none"),window.setTimeout(()=>{var x,$;c.classList.remove("ct-img-pick__copy-btn--success"),(x=c.querySelector(".ct-img-pick__copy-ic--default"))==null||x.classList.remove("d-none"),($=c.querySelector(".ct-img-pick__copy-ic--done"))==null||$.classList.add("d-none"),c.disabled=!1},1600);return}const d=c.querySelector(".ct-img-pick__btn-label"),g=c.getAttribute("data-copy-label")||((L=d==null?void 0:d.textContent)==null?void 0:L.trim())||"Copy";d&&(d.textContent="Copied"),window.setTimeout(()=>{d&&(d.textContent=g),c.disabled=!1},1600)}function re(c,r){const i=c.naturalWidth,p=c.naturalHeight;if(i<1||p<1)return{width:1,height:1};const d=Math.max(48,r.clientWidth-8),g=Math.max(48,r.clientHeight-8),l=Math.min(d/i,g/p,1);return{width:Math.max(1,Math.round(i*l)),height:Math.max(1,Math.round(p*l))}}function ae(c,r,i,p,d,g,l,k,L){const x=d-l.left,$=g-l.top,o=Math.max(0,i-k),h=Math.max(0,p-L);return{scrollLeft:Math.min(o,Math.max(0,c*i-x)),scrollTop:Math.min(h,Math.max(0,r*p-$))}}function le(c,r,i){return i.width<=0||i.height<=0?{normX:.5,normY:.5}:{normX:Math.max(0,Math.min(1,(c-i.left)/i.width)),normY:Math.max(0,Math.min(1,(r-i.top)/i.height))}}function ct(c,r){const i=r.getBoundingClientRect(),p=r.width,d=r.height;if(p<1||d<1||i.width<1||i.height<1)return{x:0,y:0};let g=Math.floor((c.clientX-i.left)*p/i.width),l=Math.floor((c.clientY-i.top)*d/i.height);return g=Math.max(0,Math.min(p-1,g)),l=Math.max(0,Math.min(d-1,l)),{x:g,y:l}}function pt(c){const{r,g:i,b:p}=c,d=Nt(c),g=Kt(c),l=Jt(c),k=Qt(c),L=te(c);let x="—";try{x=ee(d)}catch{x="—"}return{hex:d,rgb:`${r}, ${i}, ${p}`,hue:`${L}°`,hsl:`${g.h}, ${g.s}%, ${g.l}%`,hsv:`${l.h}, ${l.s}%, ${l.v}%`,cmyk:`${k.c}%, ${k.m}%, ${k.y}%, ${k.k}%`,name:x}}function ge(){const c=document.getElementById("ct-image-color-picker-root");if(!c)return;const r=document.getElementById("ctImgPickFile"),i=document.getElementById("ctImgPickDrop"),p=document.getElementById("ctImgPickDropCaption"),d=document.getElementById("ctImgPickDropContent"),g=document.getElementById("ctImgPickDropLoading"),l=document.getElementById("ctImgPickDropError"),k=document.getElementById("ctImgPickViewportLoading"),L=document.getElementById("ctImgPickChooseBtn"),x=document.getElementById("ctImgPickSampleBtn"),$=document.getElementById("ctImgPickEmptyState"),o=document.getElementById("ctImgPickCanvas"),h=document.getElementById("ctImgPickCanvasViewport"),w=document.getElementById("ctImgPickCanvasWrap"),v=document.getElementById("ctImgPickCanvasStage"),C=document.getElementById("ctImgPickCrosshair"),_=document.getElementById("ctImgPickLockMarker"),I=document.getElementById("ctImgPickCoords"),E=document.getElementById("ctImgPickZoom"),D=document.getElementById("ctImgPickZoomIn"),O=document.getElementById("ctImgPickZoomOut"),z=document.getElementById("ctImgPickZoomReset"),yt=document.getElementById("ctImgPickZoomLevel"),S=document.getElementById("ctImgPickSwatchLive"),W=document.getElementById("ctImgPickSwatchLocked"),F=document.getElementById("ctImgPickClear"),st=document.getElementById("ctImgPickReplace"),T=document.getElementById("ctImgPickCopyAll"),K=document.getElementById("ctImgPickSelectHint"),kt=document.getElementById("ctImgPickSelectedCard"),Z=document.getElementById("ctImgPickLive"),y={name:document.getElementById("ctImgPickName"),hex:document.getElementById("ctImgPickHex"),rgb:document.getElementById("ctImgPickRgb"),hue:document.getElementById("ctImgPickHue"),hsl

20:document.getElementById("ctImgPickHsl"),hsv:document.getElementById("ctImgPickHsv"),cmyk:document.getElementById("ctImgPickCmyk")};if(!r||!o||!h||!w||!v||!S||!W||!$||!i)return;const M=o.getContext("2d",{willReadFrequently:!0});if(!M)return;let V=null,P=null,f=1,wt=0,xt=0,G=!1,It=R,J={hex:""},m={hex:"",rgb:"",hue:"",hsl:"",hsv:"",cmyk:"",name:""},H=null,b=null,Q=!1;function q(){i==null||i.classList.remove("ct-img-pick__dropzone--error"),l==null||l.classList.add("d-none"),l&&(l.textContent="")}function rt(t){!i||!l||(i.classList.add("ct-img-pick__dropzone--error"),i.classList.remove("ct-img-pick__dropzone--active","border-primary"),l.textContent=t,l.classList.remove("d-none"),N(Z,t))}function tt(t){Q=t;const e=!$.classList.contains("d-none");i==null||i.classList.toggle("ct-img-pick__dropzone--loading",t&&e),g==null||g.classList.toggle("d-none",!t||!e),k==null||k.classList.toggle("d-none",!t||e),d==null||d.classList.toggle("d-none",t&&e),t&&q()}function at(){V&&(URL.revokeObjectURL(V),V=null)}function At(){return Math.abs(f-1)>.001||w.scrollLeft>0||w.scrollTop>0}function A(){const t=`${Math.round(f*100)}%`;yt&&(yt.textContent=t);const e=It!==R;D&&(D.disabled=!e||f>=Yt-.001),O&&(O.disabled=!e||f<=Ht+.001),z&&(z.disabled=!e||!At())}let lt={w:0,h:0};function Dt(){return window.matchMedia("(min-width: 992px)").matches?Math.min(440,Math.floor(window.innerHeight*.48)):Math.min(320,Math.floor(window.innerHeight*.38))}function et(){if(!h)return;const t=`${Dt()}px`;h.style.height!==t&&(h.style.height=t)}function dt(){h&&(lt={w:h.clientWidth,h:h.clientHeight})}function U(t){It=t,c.dataset.ctState=t;const e=t!==R;$.classList.toggle("d-none",e),w.classList.toggle("ct-img-pick__canvas-wrap--inactive",!e),o.setAttribute("aria-hidden",e?"false":"true"),t===R?(S.style.background="#e9ecef",S.setAttribute("aria-label","Live preview color"),K&&(K.textContent="Upload an image, hover to preview a color, then click a pixel to lock its exact values.")):t===ft&&K&&(K.textContent="Click anywhere on the image to lock that pixel color.");const n=t===R;F instanceof HTMLButtonElement&&(F.disabled=n),A()}function nt(){if(!P||!h)return;const t=re(P,h),e=Math.max(1,Math.round(t.width*f)),n=Math.max(1,Math.round(t.height*f));if(o.width=e,o.height=n,M.setTransform(1,0,0,1,0,0),M.clearRect(0,0,e,n),M.drawImage(P,0,0,e,n),o.style.width=`${e}px`,o.style.height=`${n}px`,o.style.maxWidth="none",v&&(v.style.width=`${e}px`,v.style.height=`${n}px`),A(),G&&H){const s=Math.max(0,Math.min(o.width-1,Math.floor(H.normX*o.width))),a=Math.max(0,Math.min(o.height-1,Math.floor(H.normY*o.height)));H.x=s,H.y=a;const u=M.getImageData(s,a,1,1).data;m=pt({r:u[0],g:u[1],b:u[2]}),vt(m),Mt(s,a)}mt()}function mt(){if(!b||!o)return;const t=o.getBoundingClientRect();if(!(b.clientX>=t.left&&b.clientX<=t.right&&b.clientY>=t.top&&b.clientY<=t.bottom))return;const{x:n,y:s}=ct({clientX:b.clientX,clientY:b.clientY},o),a=M.getImageData(n,s,1,1).data;Lt(a[0],a[1],a[2]),Ct(n,s),I&&(I.textContent=`X: ${n} · Y: ${s}`,I.classList.remove("d-none"))}function Ot(){if(b&&o){const e=o.getBoundingClientRect(),{clientX:n,clientY:s}=b;if(n>=e.left&&n<=e.right&&s>=e.top&&s<=e.bottom)return{clientX:n,clientY:s}}if(o){const e=o.getBoundingClientRect();return{clientX:e.left+e.width/2,clientY:e.top+e.height/2}}const t=w.getBoundingClientRect();return{clientX:t.left+t.width/2,clientY:t.top+t.height/2}}function ht(){w.scrollLeft=0,w.scrollTop=0}function ot(t,e=null){const n=Math.max(Ht,Math.min(Yt,Math.round(t*100)/100));if(Math.abs(n-f)<.001)return;const s=e??Ot(),a=o.getBoundingClientRect(),{normX:u,normY:Y}=le(s.clientX,s.clientY,a);f=n,nt();const B=ae(u,Y,o.width,o.height,s.clientX,s.clientY,w.getBoundingClientRect(),w.clientWidth,w.clientHeight);w.scrollLeft=B.scrollLeft,w.scrollTop=B.scrollTop,mt(),A(),N(Z,`Image zoom ${Math.round(f*100)} percent`)}function zt(){et(),dt(),P&&nt()}if(typeof ResizeObserver<"u"&&new ResizeObserver(()=>{window.clearTimeout(wt),wt=window.setTimeout(()=>{if(!h)return;const e=h.clientWidth,n=h.clientHeight;e===lt.w&&n===lt.h||zt()},120)}).observe(h),et(),dt(),U(R),w.addEventListener("scroll",()=>A(),{passive:!0}),i){ne({input:r,drop:i,captionEl:p??void 0,onInvalidFile:n=>{rt(n||Tt),X(n||Tt)}});const t=n=>{Q||i.classList.contains("ct-img-pick__dropzone--error")||i.classList.toggle("ct-img-pick__dropzone--active",n)};i.addEventListener("dragenter",()=>t(!0)),i.addEventListener("dragover",()=>t(!0)),i.addEventListener("dragleave",n=>{const s=n.relatedTarget;s instanceof Node&&i.contains(s)||t(!1)}),i.addEventListener("drop",()=>t(!1)),new MutationObserver(()=>{i.classList.contains("border-primary")&&t(!0)}).observe(i,{attributes:!0,attributeFilter:["class"]})}L==null||L.addEventListener("click",t=>{t.preventDefault(),t.stopPropagation(),!Q&&(q(),r.click())}),D==null||D.addEventListener("click",t=>{t.preventDefault(),ot(f*Rt)}),O==null||O.addEventListener("click",t=>{t.preventDefault(),ot(f/Rt)}),z==null||z.addEventListener("click",()=>{f=1,nt(),ht(),mt(),A(),N(Z,"Image zoom reset to 100 percent")}),h==null||h.addEventListener("wheel",t=>{if(!P)return;t.preventDefault();const e={clientX:t.clientX,clientY:t.clientY};t.deltaY<0?ot(f*Xt,e):t.deltaY>0&&ot(f/Xt,e)},{passive:!1}),st==null||st.addEventListener("click",()=>r.click()),x==null||x.addEventListener("click",t=>{if(t.preventDefault(),t.stopPropagation(),Q)return;q();const e=new Blob([ce],{type:"image/svg+xml"});$t(new File([e],"sample-gradient.svg",{type:"image/svg+xml"}))});function bt(t){document.querySelectorAll("[data-ct-img-pick-copy]").forEach(e

20=>{e instanceof HTMLButtonElement&&(e.disabled=!t)}),T&&(T.disabled=!t)}function vt(t){y.name&&(y.name.textContent=t.name),y.hex&&(y.hex.textContent=t.hex),y.rgb&&(y.rgb.textContent=t.rgb),y.hue&&(y.hue.textContent=t.hue),y.hsl&&(y.hsl.textContent=t.hsl),y.hsv&&(y.hsv.textContent=t.hsv),y.cmyk&&(y.cmyk.textContent=t.cmyk),W.style.background=t.hex,W.setAttribute("aria-label",`Selected color swatch: ${t.name}, ${t.hex}`)}function Et(){G=!1,H=null,m={hex:"",rgb:"",hue:"",hsl:"",hsv:"",cmyk:"",name:""},Object.values(y).forEach(t=>{t&&(t.textContent="—")}),W.style.background="#dee2e6",W.setAttribute("aria-label","Selected color swatch"),_==null||_.classList.add("d-none"),bt(!1),P&&U(ft)}function Lt(t,e,n){J=pt({r:t,g:e,b:n}),S.style.background=J.hex,S.setAttribute("aria-label",`Live preview color: ${J.hex}`)}function Ct(t,e){if(!C||!o||!v)return;const n=o.width,s=o.height;if(n<1||s<1)return;const a=o.getBoundingClientRect(),u=v.getBoundingClientRect();if(a.width<1||a.height<1)return;const Y=a.left-u.left+t/n*a.width,B=a.top-u.top+e/s*a.height;C.style.left=`${Y}px`,C.style.top=`${B}px`,C.classList.remove("d-none")}function Mt(t,e){if(!_||!o||!v)return;const n=o.width,s=o.height;if(n<1||s<1)return;const a=o.getBoundingClientRect(),u=v.getBoundingClientRect();if(a.width<1||a.height<1)return;const Y=a.left-u.left+t/n*a.width,B=a.top-u.top+e/s*a.height;_.style.left=`${Y}px`,_.style.top=`${B}px`,_.classList.remove("d-none")}function Wt(t){if(!E)return;const e=performance.now();if(e-xt<90)return;xt=e;const{x:n,y:s}=ct(t,o);try{const Vt=o.toDataURL("image/jpeg",.85);E.style.backgroundImage=`url(${Vt})`;const it=4,Gt=140,qt=140,Ut=n*it-Gt/2,jt=s*it-qt/2;E.style.backgroundSize=`${o.width*it}px ${o.height*it}px`,E.style.backgroundPosition=`-${Ut}px -${jt}px`}catch{E.style.backgroundImage="none"}E.classList.remove("d-none");const a=t.pointerType==="touch",u=a?24:14,Y=a?-160:u;let B=t.clientX+u,j=t.clientY+Y;const _t=140,St=140;B+_t>window.innerWidth-8&&(B=t.clientX-_t-u),j<8&&(j=t.clientY+u),j+St>window.innerHeight-8&&(j=Math.max(8,t.clientY-St-u)),E.style.left=`${Math.max(8,B)}px`,E.style.top=`${Math.max(8,j)}px`}function gt(){E==null||E.classList.add("d-none"),C==null||C.classList.add("d-none"),b=null,I==null||I.classList.add("d-none")}function Pt(t){if(!P)return;b={clientX:t.clientX,clientY:t.clientY};const{x:e,y:n}=ct(t,o),s=M.getImageData(e,n,1,1).data;Lt(s[0],s[1],s[2]),Ct(e,n),Wt(t),I&&(I.textContent=`X: ${e} · Y: ${n}`,I.classList.remove("d-none"))}function Ft(t){if(!P)return;const{x:e,y:n}=ct(t,o),s=M.getImageData(e,n,1,1).data;m=pt({r:s[0],g:s[1],b:s[2]}),G=!0,H={x:e,y:n,normX:e/o.width,normY:n/o.height},vt(m),Mt(e,n),bt(!0),U(oe),N(Z,`Selected color locked: ${m.name}, ${m.hex}`),window.matchMedia("(max-width: 991.98px)").matches&&kt&&window.requestAnimationFrame(()=>{kt.scrollIntoView({behavior:"smooth",block:"nearest"})})}o.addEventListener("pointermove",t=>{(t.pointerType==="mouse"||o.hasPointerCapture(t.pointerId))&&Pt(t)}),o.addEventListener("pointerdown",t=>{o.setPointerCapture(t.pointerId),Pt(t)}),o.addEventListener("pointerup",t=>{Ft(t);try{o.releasePointerCapture(t.pointerId)}catch{}t.pointerType==="touch"&&gt()}),o.addEventListener("pointerleave",t=>{t.pointerType==="mouse"&&gt()});async function Bt(t,e,n){if(!t||t==="—"){X("Nothing to copy yet.");return}try{await navigator.clipboard.writeText(t),e instanceof HTMLButtonElement&&se(e,n,Z)}catch{X("Copy failed.")}}document.querySelectorAll("[data-ct-img-pick-copy]").forEach(t=>{t instanceof HTMLButtonElement&&t.addEventListener("click",async()=>{const e=t.getAttribute("data-ct-img-pick-copy"),n=t.getAttribute("data-copy-label")||t.getAttribute("aria-label")||"Copy";if(!G){X("Click the image to lock a color first.");return}const s={name:m.name,hex:m.hex,rgb:`rgb(${m.rgb})`,hue:m.hue,hsl:`hsl(${m.hsl})`,hsv:`hsv(${m.hsv})`,cmyk:`cmyk(${m.cmyk})`};await Bt(s[e]??"",t,n)})}),T==null||T.addEventListener("click",async()=>{if(!G){X("Click the image to lock a color first.");return}const t=[`Color name: ${m.name}`,`HEX: ${m.hex}`,`RGB: rgb(${m.rgb})`,`Hue: ${m.hue}`,`HSL: hsl(${m.hsl})`,`HSV: hsv(${m.hsv})`,`CMYK: cmyk(${m.cmyk})`].join(`
21`);await Bt(t,T,T.getAttribute("data-copy-label")||"Copy all")});function Zt(){gt(),at(),P=null,f=1,ht(),C==null||C.classList.add("d-none"),I==null||I.classList.add("d-none"),M.setTransform(1,0,0,1,0,0),M.clearRect(0,0,o.width,o.height),o.width=1,o.height=1,o.style.width="",o.style.height="",v&&(v.style.width="",v.style.height=""),et(),A(),Et(),tt(!1),q(),J={hex:"",rgb:"",hue:"",hsl:"",hsv:"",cmyk:"",name:""},S.style.background="#e9ecef",S.setAttribute("aria-label","Live preview color"),b=null,U(R)}F==null||F.addEventListener("click",()=>{ut(r),Zt()});function $t(t){if(q(),t.size>ie){const n="File exceeds 50 MB.";rt(n),X(n),ut(r);return}at(),Et(),tt(!0),V=URL.createObjectURL(t);const e=new Image;e.onload=()=>{P=e,f=1,et(),dt(),nt(),ht(),tt(!1),U(ft)},e.onerror=()=>{const n="Could not load image.";tt(!1),rt(n),X(n),ut(r),at()},e.src=V}r.addEventListener("change",()=>{var e;const t=(e=r.files)==null?void 0:e[0];t&&$t(t)})}export{ge as initImageColorPickerPage};