https://imagesplitter.tools/_next/static/chunks/4635.f9b9caf161d52ccc.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4635],{19335:(e,t,r)=>{r.d(t,{l:()=>a});var n=r(68786),l=r(60766);function a(e){let t=(0,n.useRef)(e);t.current=e;let r=(0,n.useRef)(null),a=(0,n.useRef)(!1);(0,n.useEffect)(()=>{let e=!0;return null!=r.current||(r.current=(0,l.P)()),r.current.then(r=>{e&&r&&!a.current&&(a.current=!0,t.current(r))}),()=>{e=!1}},[])}},34635:(e,t,r)=>{r.r(t),r.d(t,{ImageColorPaletteEditor:()=>f});var n=r(58682),l=r(68786),a=r(96243),i=r(77297),o=r(19335),c=r(39139);let u=(e,t)=>(e.r-t.r)**2+(e.g-t.g)**2+(e.b-t.b)**2;var s=r(77697);let d="rounded-lg border px-4 py-2 text-sm font-medium hover:bg-muted disabled:opacity-40";function f(){let e=(0,a.c3)("image_color_palette"),t=(0,i.Ym)(),[r,f]=(0,l.useState)(null),[h,g]=(0,l.useState)(5),[m,p]=(0,l.useState)(null),[x,b]=(0,l.useState)(!1),[w,v]=(0,l.useState)(!1),[y,j]=(0,l.useState)(""),[E,N]=(0,l.useState)(!1),_=(0,l.useRef)(0),R=(0,l.useRef)(0),k=(0,l.useRef)(null),M=(0,l.useRef)(null);async function U(e){let t=++_.current;R.current++,v(!1),b(!0),j(""),N(!1);try{let r=await (0,s.K)(e);try{if(t!==_.current)return;let n=document.createElement("canvas"),l=Math.min(1,256/Math.max(r.naturalWidth,r.naturalHeight));n.width=Math.max(1,Math.round(r.naturalWidth*l)),n.height=Math.max(1,Math.round(r.naturalHeight*l));let a=n.getContext("2d",{willReadFrequently:!0});if(!a)throw Error();a.drawImage(r,0,0,n.width,n.height);let i=a.getImageData(0,0,n.width,n.height).data,o=n.width,c=n.height;n.width=n.height=1,k.current&&URL.revokeObjectURL(k.current),k.current=URL.createObjectURL(e),f({file:e,url:k.current,data:i,width:o,height:c,generation:t})}finally{r.src=""}}catch(e){t===_.current&&(j("ui.error"),f(e=>e?{...e,generation:t}:null),b(!1))}}(0,l.useEffect)(()=>()=>{_.current++,k.current&&URL.revokeObjectURL(k.current)},[]),(0,o.l)(e=>{U(e)});let C=(0,l.useRef)(U);async function L(e){let t=_.current;try{var r;if(!(null==(r=navigator.clipboard)?void 0:r.writeText))throw Error();await navigator.clipboard.writeText(e),t===_.current&&(N(!0),j(""))}catch(e){t===_.current&&j("ui.copy_error")}}async function S(n){let l;if(!(null==m?void 0:m.colors.length)||!r)return;let a=_.current,i=++R.current;v(!0),j("");try{let o=r.file.name.replace(/\.[^.]*$/,"").replace(/[\\/\x00-\x1f]/g,"_")||"image";if("json"===n){let e={schemaVersion:1,method:"deterministic-rgb-clustering",sampleSize:{width:r.width,height:r.height},visibleSampleCount:m.sampleCount,requestedMaximumColors:h,percentageBasis:"visible_pixels_in_downscaled_sample",fullyTransparentPixels:"excluded",colors:m.colors};(0,c.lw)(new Blob([JSON.stringify(e,null,2)+"\n"],{type:"application/json"}),"".concat(o,"-palette.json"))}else{l=function(e,t,r){let n=arguments.length>3&&void 0!==arguments[3]&&arguments[3];if(!e.length||e.length>10)throw Error("empty_palette");let l=document.createElement("canvas");l.width=1200,l.height=180+260*Math.ceil(e.length/5);let a=l.getContext("2d");if(!a)throw Error("encode_failed");a.fillStyle="#f7f5f0",a.fillRect(0,0,l.width,l.height),a.fillStyle="#171717",a.direction=n?"rtl":"ltr",a.textAlign=n?"right":"left",a.font="bold 34px sans-serif",a.fillText(t,n?1160:40,65,1120),a.font="18px sans-serif",a.fillText(r,n?1160:40,103,1120),a.direction="ltr",a.textAlign="left";let i=Math.min(e.length,5),o=(1120-(i-1)*16)/i;return e.forEach((e,t)=>{let r=40+(n?i-1-t%5:t%5)*(o+16),l=135+260*Math.floor(t/5);a.fillStyle=e.hex,a.fillRect(r,l,o,142),a.fillStyle="#ffffff",a.fillRect(r,l+142,o,96),a.fillStyle="#171717",a.font="bold 22px monospace",a.fillText(e.hex,r+12,l+174,o-24),a.font="15px monospace",a.fillText("".concat(e.percentage,"%"),r+12,l+204,o-24)}),l}(m.colors,e("title"),e("ui.sample"),"ar"===t);let r=await (0,c.DI)(l,"png");if("image/png"!==r.type)throw Error();if(a!==_.current||i!==R.current)return;(0,c.lw)(r,"".concat(o,"-palette.png"))}}catch(e){a===_.current&&i===R.current&&j("ui.export_error")}finally{l&&(l.width=l.height=1),a===_.current&&i===R.current&&v(!1)}}return C.current=U,(0,l.useEffect)(()=>{let e=e=>{var t,r,n;if(null==(t=e.target)?void 0:t.closest('input,textarea,[contenteditable="true"],[role="textbox"]'))return;let l=Array.from(null!=(n=null==(r=e.clipboardData)?void 0:r.files)?n:[]).find(e=>e.type.startsWith("image/"));l&&(e.preventDefault(),C.current(l))};return window.addEventListener("paste",e),()=>window.removeEventListener("paste",e)},[]),(0,l.useEffect)(()=>

1{if(!r||r.generation!==_.current)return;let e=!0;b(!0),p(null);let t=setTimeout(()=>{try{let t=function(e,t){if(!Number.isInteger(t)||t<3||t>10||e.length%4||e.length>4e6)throw Error("invalid_palette");let r=new Map,n=0;for(let t=0;t<e.length;t+=4){if(0===e[t+3])continue;n++;let l=e[t],a=e[t+1],i=e[t+2],o=(l>>3)*1024+(a>>3)*32+(i>>3),c=r.get(o);c?(c.r+=l,c.g+=a,c.b+=i,c.count++):r.set(o,{r:l,g:a,b:i,count:1})}if(!n)return{colors:[],sampleCount:0};let l=[...r.entries()].sort((e,t)=>e[0]-t[0]).map(e=>{let[,t]=e;return{...t,r:t.r/t.count,g:t.g/t.count,b:t.b/t.count}}),a=[{...l.reduce((e,t)=>t.count>e.count?t:e)}];for(;a.length<Math.min(t,l.length);){let e,t=0;for(let r of l){let n=Math.min(...a.map(e=>u(r,e)))*Math.sqrt(r.count);n>t&&(t=n,e=r)}if(!e)break;a.push({...e})}let i=[];for(let e=0;e<20;e++){let e=l.map(e=>{let t=0;for(let r=1;r<a.length;r++)u(e,a[r])<u(e,a[t])&&(t=r);return t}),t=a.map(()=>({r:0,g:0,b:0,count:0}));l.forEach((r,n)=>{let l=t[e[n]];l.r+=r.r*r.count,l.g+=r.g*r.count,l.b+=r.b*r.count,l.count+=r.count});let r=e.every((e,t)=>e===i[t]);if(i=e,a=t.map((e,t)=>e.count?{r:e.r/e.count,g:e.g/e.count,b:e.b/e.count,count:e.count}:{...a[t],count:0}),r)break}let o=new Map;for(let e of a){if(!e.count)continue;let t=Math.round(e.r),r=Math.round(e.g),n=Math.round(e.b),l="#"+[t,r,n].map(e=>e.toString(16).padStart(2,"0")).join("").toUpperCase(),a=o.get(l);a?a.count+=e.count:o.set(l,{r:t,g:r,b:n,count:e.count})}let c=[...o.entries()].sort((e,t)=>t[1].count-e[1].count||e[0].localeCompare(t[0])),s=c.map(e=>{let[,t]=e;return Math.floor(t.count/n*1e3)}),d=1e3-s.reduce((e,t)=>e+t,0),f=c.map((e,t)=>{let[,r]=e;return{i:t,value:r.count/n*1e3-s[t]}}).sort((e,t)=>t.value-e.value||e.i-t.i);for(let e=0;e<d;e++)s[f[e].i]++;return{sampleCount:n,colors:c.map((e,t)=>{let[r,n]=e;return{hex:r,rgb:{r:n.r,g:n.g,b:n.b},hsl:function(e,t,r){let n=[e,t,r].map(e=>e/255),l=Math.max(...n),a=Math.min(...n),i=l-a,o=(l+a)/2,c=0,u=0;return i&&(u=i/(1-Math.abs(2*o-1)),c=(60*(c=l===n[0]?(n[1]-n[2])/i%6:l===n[1]?(n[2]-n[0])/i+2:(n[0]-n[1])/i+4)%360+360)%360),{h:Math.round(c)%360,s:Math.round(100*u),l:Math.round(100*o)}}(n.r,n.g,n.b),percentage:s[t]/10}})}}(r.data,h);e&&r.generation===_.current&&(p(t),b(!1))}catch(t){e&&r.generation===_.current&&(j("ui.error"),b(!1))}},30);return()=>{e=!1,clearTimeout(t)}},[r,h]),(0,n.jsxs)("section",{className:"mx-auto max-w-6xl space-y-6 px-4 py-6",children:[(0,n.jsxs)("div",{className:"focus-within:ring-primary cursor-pointer rounded-2xl border-2 border-dashed p-6 text-center focus-within:ring-2",onDragOver:e=>e.preventDefault(),onDrop:e=>{e.preventDefault();let t=e.dataTransfer.files[0];t&&U(t)},children:[(0,n.jsx)("button",{className:d,onClick:()=>{var e;return null==(e=M.current)?void 0:e.click()},children:e("ui.upload")}),(0,n.jsx)("input",{ref:M,type:"file",className:"sr-only","aria-label":e("ui.upload"),accept:"image/png,image/jpeg,image/webp",onChange:e=>{var t;(null==(t=e.target.files)?void 0:t[0])&&U(e.target.files[0]),e.target.value=""}}),(0,n.jsx)("p",{className:"text-muted-foreground mt-3 text-sm",children:e("ui.limits")}),(0,n.jsx)("p",{className:"mt-2 text-sm",children:e("ui.empty")})]}),(0,n.jsxs)("div",{className:"flex flex-wrap items-end gap-4",children:[(0,n.jsxs)("label",{className:"grid gap-2 text-sm font-medium",children:[(0,n.jsx)("span",{children:e("ui.count")}),(0,n.jsx)("select",{"aria-label":e("ui.count"),className:"bg-background rounded-lg border px-4 py-2",value:h,onChange:e=>{R.current++,v(!1),b(!!r),g(Number(e.target.value)),N(!1)},children:Array.from({length:8},(e,t)=>t+3).map(e=>(0,n.jsx)("option",{value:e,children:e},e))})]}),(0,n.jsx)("button",{className:d,disabled:!r&&!x,onClick:()=>{_.current++,R.current++,k.current&&URL.revokeObjectURL(k.current),k.current=null,f(null),p(null),b(!1),v(!1),j(""),N(!1)},children:e("ui.clear")})]}),y&&(0,n.jsx)("p",{role:"alert",className:"text-destructive",children:e(y)}),(0,n.jsx)("div",{"aria-live":"polite",children:x?(0,n.jsx)("p",{children:e("ui.working")}):E?(0,n.jsx)("p",{children:e("ui.copied")}):null}),r&&(0,n.jsxs)("div",{className:"grid gap-6 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)

1]",children:[(0,n.jsxs)("div",{className:"min-w-0",children:[(0,n.jsx)("div",{className:"flex min-h-48 items-center justify-center rounded-xl border p-4",style:{backgroundImage:"conic-gradient(#ddd 25%,#fff 0 50%,#ddd 0 75%,#fff 0)",backgroundSize:"16px 16px"},children:(0,n.jsx)("img",{src:r.url,alt:e("ui.input"),className:"max-h-[480px] max-w-full object-contain"})}),(0,n.jsx)("p",{className:"text-muted-foreground mt-2 text-sm break-all",children:r.file.name})]}),(0,n.jsxs)("div",{className:"min-w-0 space-y-4",children:[!x&&m&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("p",{className:"font-medium",children:e("ui.summary",{count:m.colors.length,pixels:m.sampleCount})}),m.colors.length?(0,n.jsx)("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2",children:m.colors.map(r=>{let l=[r.hex,"rgb(".concat(r.rgb.r,", ").concat(r.rgb.g,", ").concat(r.rgb.b,")"),"hsl(".concat(r.hsl.h,", ").concat(r.hsl.s,"%, ").concat(r.hsl.l,"%)")];return(0,n.jsxs)("article",{className:"overflow-hidden rounded-xl border",children:[(0,n.jsx)("div",{className:"h-20",style:{backgroundColor:r.hex}}),(0,n.jsxs)("div",{className:"space-y-2 p-3",children:[(0,n.jsx)("p",{className:"text-sm font-semibold",children:new Intl.NumberFormat(t,{style:"percent",maximumFractionDigits:1}).format(r.percentage/100)}),l.map(t=>(0,n.jsx)("button",{dir:"ltr",title:e("ui.copy",{value:t}),"aria-label":e("ui.copy",{value:t}),className:"hover:bg-muted block w-full rounded border px-2 py-1 text-start font-mono text-xs break-all select-text",onClick:()=>void L(t),children:t},t))]})]},r.hex)})}):(0,n.jsx)("p",{children:e("ui.no_colors")})]}),(0,n.jsx)("p",{className:"text-muted-foreground text-sm",children:e("ui.note")}),(0,n.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,n.jsx)("button",{className:d,disabled:x||w||!(null==m?void 0:m.colors.length),onClick:()=>void S("png"),children:e("ui.png")}),(0,n.jsx)("button",{className:d,disabled:x||w||!(null==m?void 0:m.colors.length),onClick:()=>void S("json"),children:e("ui.json")})]})]})]})]})}},39139:(e,t,r)=>{function n(e,t){if(![e,t].every(e=>Number.isSafeInteger(e)&&e>0))throw Error("invalid_size");if(e>8192||t>8192||e*t>16e6)throw Error("output_limit")}function l(e){if("image/png"===e.type)return"png";if("image/jpeg"===e.type)return"jpg";if("image/webp"===e.type)return"webp";throw Error("encode_failed")}function a(e,t,r){let n=e.replace(/\.[^.]+$/,"").replace(/[\\/\x00-\x1f]/g,"_")||"image",l="".concat(n,"-padded.").concat(t),a=2;for(;r.has(l.toLowerCase());)l="".concat(n,"-padded-").concat(a++,".").concat(t);return r.add(l.toLowerCase()),l}async function i(e,t){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.92;n(e.width,e.height);let a=await new Promise((n,l)=>{e.toBlob(e=>e?n(e):l(Error("encode_failed")),"image/".concat(t),r)});return l(a),a}function o(e,t){let r=URL.createObjectURL(e),n=document.createElement("a");n.href=r,n.download=t,document.body.appendChild(n),n.click(),n.remove(),setTimeout(()=>URL.revokeObjectURL(r),3e4)}r.d(t,{DI:()=>i,NT:()=>n,c:()=>l,g1:()=>a,lw:()=>o})},60766:(e,t,r)=>{r.d(t,{P:()=>c,R:()=>o});let n="handoff",l="pending-image";function a(){return new Promise((e,t)=>{let r=indexedDB.open("imagesplitter",1);r.onupgradeneeded=()=>{r.result.objectStoreNames.contains(n)||r.result.createObjectStore(n)},r.onsuccess=()=>e(r.result),r.onerror=()=>t(r.error)})}function i(e,t,r){return new Promise((l,a)=>{let i,o=e.transaction(n,t),c=r(o.objectStore(n));c.onsuccess=()=>{i=c.result},c.onerror=()=>a(c.error),o.oncomplete=()=>l(i),o.onabort=()=>{var e;return a(null!=(e=o.error)?e:Error("handoff_aborted"))},o.onerror=()=>{var e;return a(null!=(e=o.error)?e:Error("handoff_failed"))}})}async function o(e){let t;if("undefined"==typeof indexedDB)return!1;try{t=await a();let r={file:e,at:Date.now()};return await i(t,"readwrite",e=>e.put(r,l)),!0}catch(e){return!1}finally{null==t||t.close()}}async function c(){if("undefined"==typeof indexedDB)return null;try{let e=await a(),t=await i(e,"readonly",e=>e.get(l));if(await i(e,"readwrite",e=>e.delete(l)),e.close(),!(null==t?void 0:t.file)||Date.now()-t.at>3e5)return null;return t.file}catch(e){return null}}},77697:(e,t,r)=>{function n(e){let t=new DataView(e.buffer,e.byteOffset,e.byteLength),r=(t,r)=>String.fromCharCode(...e.subarray(t,t+r)),n=0,l=0;if(e.length>=33&&137===e[0]&&"PNG\r\n\x1a\n"===r(1,7)&&"IHDR"===r(12,4)){n=t.getUint32(16),l=t.getUint32(20);for(let n=8;n+12<=e.length;){let l=t.getUint32(n);if("acTL"===r(n+4,4))throw Error("animated");if(n+l+12>e.length)throw Error("decode_failed");n+=l+12}}else if(e.length>=30&&"RIFF"===r(0,4)&&"WEBP"===r(8,4))for(let a=12;a+8<=e.length;){let i=r(a,4),o=t.getUint32(a+4,!0),c=a+8;if(c+o>e.length)throw Error("decode_failed");if("ANIM"===i||"ANMF"===i)throw Error("animated");if("VP8X"===i&&o>=10){if(2&e[c])throw Error("animated");

1n=1+e[c+4]+(e[c+5]<<8)+(e[c+6]<<16),l=1+e[c+7]+(e[c+8]<<8)+(e[c+9]<<16)}else if(!n&&"VP8 "===i&&o>=10)n=16383&t.getUint16(c+6,!0),l=16383&t.getUint16(c+8,!0);else if(!n&&"VP8L"===i&&o>=5&&47===e[c]){let e=t.getUint32(c+1,!0);n=(16383&e)+1,l=(e>>>14&16383)+1}a=c+o+o%2}else if(e.length>4&&255===e[0]&&216===e[1])for(let r=2;r+4<=e.length;){if(255!==e[r++])throw Error("decode_failed");for(;255===e[r];)r++;let a=e[r++];if(217===a||218===a)break;if(1===a||a>=208&&a<=215)continue;if(r+2>e.length)break;let i=t.getUint16(r);if(i<2||r+i>e.length)throw Error("decode_failed");if([192,193,194,195,197,198,199,201,202,203,205,206,207].includes(a)&&i>=7){l=t.getUint16(r+3),n=t.getUint16(r+5);break}r+=i}else throw Error("invalid_type");if(!n||!l)throw Error("decode_failed");if(n*l>25e6||Math.max(n,l)>32768)throw Error("input_limit");return{width:n,height:l}}async function l(e){if(e.size>0x1400000)throw Error("file_limit");n(new Uint8Array(await e.arrayBuffer()));let t=URL.createObjectURL(e);try{let e=new Image;if(e.src=t,await e.decode(),!e.naturalWidth||!e.naturalHeight||e.naturalWidth*e.naturalHeight>25e6)throw Error("input_limit");return e}finally{URL.revokeObjectURL(t)}}r.d(t,{K:()=>l,a:()=>n})},96243:(e,t,r)=>{r.d(t,{c3:()=>a});var n=r(77297);function l(e,t){return(...e)=>{try{return t(...e)}catch{throw Error(void 0)}}}let a=l(0,n.c3);l(0,n.kc)}}]);