https://www.imageinverter.app/_next/static/chunks/5057-14ed9dcc2fbd8fc9.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5057],{13340:(e,t,r)=>{r.d(t,{A:()=>a});let a=(0,r(13243).A)("Trash2",[["path",{d:"M3 6h18",key:"d0wm0j"}],["path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6",key:"4alrt4"}],["path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2",key:"v07s0e"}],["line",{x1:"10",x2:"10",y1:"11",y2:"17",key:"1uufr5"}],["line",{x1:"14",x2:"14",y1:"11",y2:"17",key:"xtxkd"}]])},23358:(e,t,r)=>{r.d(t,{A:()=>a});let a=(0,r(13243).A)("RotateCcw",[["path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",key:"1357e3"}],["path",{d:"M3 3v5h5",key:"1xhq8a"}]])},31540:(e,t,r)=>{r.d(t,{A:()=>o});var a=r(73220),l=r(34184),s=r(76919),n=r(66253),i=r(23358),d=r(13340);function o({outputFormat:e,onOutputFormatChange:t,onDownload:r,onReset:o,onStartOver:c,isDownloadDisabled:m=!1,isResetDisabled:p=!1,resetLabel:h="Reset",startOverLabel:g="Start Over",downloadLabel:u,menuTitle:x="Download Settings",extraMenuContent:b}){let[f,y]=(0,l.useState)(!1),w=(0,l.useRef)(null);return(0,l.useEffect)(()=>{if(!f)return;let e=e=>{w.current?.contains(e.target)||y(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[f]),(0,a.jsxs)("div",{className:"flex flex-wrap gap-3 justify-center",children:[(0,a.jsxs)("div",{className:"relative",ref:w,children:[(0,a.jsxs)("div",{className:"inline-flex rounded-lg overflow-hidden border border-emerald-500/70",children:[(0,a.jsxs)("button",{onClick:r,disabled:m,className:"px-5 py-3 bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 inline-flex items-center gap-2",children:[(0,a.jsx)(s.A,{className:"w-5 h-5"}),u??`Download ${e.toUpperCase()}`]}),(0,a.jsx)("button",{type:"button",onClick:()=>y(e=>!e),className:"px-3 py-3 bg-emerald-700 text-white hover:bg-emerald-800 transition-colors duration-200 border-l border-emerald-500/70","aria-label":"Open download settings","aria-expanded":f,children:(0,a.jsx)(n.A,{className:"w-4 h-4"})})]}),f&&(0,a.jsxs)("div",{className:`absolute bottom-full left-0 z-20 mb-2 rounded-lg border border-gray-700 bg-gray-900 p-3 shadow-xl ${b?"w-72":"w-44"}`,children:[(0,a.jsx)("p",{className:"text-sm font-medium text-white mb-3",children:x}),(0,a.jsx)("div",{className:"space-y-1",children:["png","jpg","webp"].map(r=>(0,a.jsx)("button",{onClick:()=>{t(r),y(!1)},className:`w-full text-left px-3 py-2 rounded-md text-sm uppercase transition-colors ${e===r?"bg-emerald-500/25 text-emerald-200":"text-gray-300 hover:bg-gray-800"}`,children:r},r))}),b&&(0,a.jsx)("div",{className:"mt-4 pt-4 border-t border-gray-700",children:b})]})]}),(0,a.jsxs)("button",{onClick:o,disabled:p,className:"px-6 py-3 bg-gray-700 text-white rounded-lg hover:bg-gray-600 disabled:opacity-50 transition-colors duration-200 inline-flex items-center gap-2",children:[(0,a.jsx)(i.A,{className:"w-5 h-5"}),h]}),(0,a.jsxs)("button",{onClick:c,className:"px-6 py-3 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors duration-200 inline-flex items-center gap-2",children:[(0,a.jsx)(d.A,{className:"w-5 h-5"}),g]})]})}},58662:(e,t,r)=>{r.d(t,{A:()=>a});let a=(0,r(13243).A)("CircleCheck",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]])},66253:(e,t,r)=>{r.d(t,{A:()=>a});let a=(0,r(13243).A)("ChevronDown",[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]])},85057:(e,t,r)=>{r.d(t,{default:()=>y});var a=r(73220),l=r(34184),s=r(58662),n=r(13243);let i=(0,n.A)("Files",[["path",{d:"M20 7h-3a2 2 0 0 1-2-2V2",key:"x099mo"}],["path",{d:"M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z",key:"18t6ie"}],["path",{d:"M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8",key:"1nja0z"}]]);var d=r(2110),o=r(32920),c=r(51712),m=r(99139);let p=(0,n.A)("Archive",[["rect",{width:"20",height:"5",x:"2",y:"3",rx:"1",key:"1wp1u1"}],["path",{d:"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8",key:"1s80jp"}],["path",{d:"M10 12h4",key:"a56b0p"}]]);var h=r(31540);let g=[{value:"png",label:"PNG",mime:"image/png",extension:"png"},{value:"jpg",label:"JPG",mime:"image/jpeg",extension:"jpg"},{value:"webp",label:"WebP",mime:"image/webp",extension:"webp"}];function u(e){return g.find(t=>t.value===e)||g[0]}function x(e){return e.replace(/\.[^.]+$/,"").replace(/[^a-z0-9-_]+/gi,"-").replace(/^-+|-+$/g,"")||"image"}async function b(e,t){let r=await new Promise((t,r)=>{let a=new window.Image;a.onload=()=>t(a),a.onerror=r,a.src=e}),a=document.createElement("canvas"),l=a.getContext("2d");if(!l)throw Error("Canvas is not supported in this browser");

1a.width=r.naturalWidth||r.width,a.height=r.naturalHeight||r.height,l.clearRect(0,0,a.width,a.height),l.drawImage(r,0,0);let s=l.getImageData(0,0,a.width,a.height),n=s.data;for(let e=0;e<n.length;e+=4)n[e]=255-n[e],n[e+1]=255-n[e+1],n[e+2]=255-n[e+2];return l.putImageData(s,0,0),{invertedUrl:function(e,t){let r=u(t);if("jpg"===t){let t=document.createElement("canvas");t.width=e.width,t.height=e.height;let a=t.getContext("2d");return a?(a.fillStyle="#ffffff",a.fillRect(0,0,t.width,t.height),a.drawImage(e,0,0),t.toDataURL(r.mime,.92)):e.toDataURL(r.mime,.92)}return e.toDataURL(r.mime,"webp"===t?.92:void 0)}(a,t),width:a.width,height:a.height}}async function f(e,t){let r=await new Promise((t,r)=>{let a=new FileReader;a.onload=e=>t(e.target?.result),a.onerror=()=>r(a.error),a.readAsDataURL(e)}),a=await b(r,t);return{id:`${e.name}-${e.size}-${Date.now()}-${Math.random().toString(36).slice(2)}`,sourceKey:`${e.name}-${e.size}-${e.lastModified}`,name:e.name,originalUrl:r,invertedUrl:a.invertedUrl,width:a.width,height:a.height}}function y(){let[e,t]=(0,l.useState)([]),[n,g]=(0,l.useState)(0),[y,w]=(0,l.useState)("png"),[v,j]=(0,l.useState)(!1),[N,k]=(0,l.useState)(!1),[A,$]=(0,l.useState)(!1),C=(0,l.useRef)(null),D=(0,l.useRef)(!1),U=e[n]||null,P=u(y),R=async r=>{let a=r.filter(e=>e.type.startsWith("image/"));if(0===a.length||D.current)return;let l=new Set(e.map(e=>e.sourceKey)),s=a.filter(e=>{let t=`${e.name}-${e.size}-${e.lastModified}`;return!l.has(t)&&(l.add(t),!0)});if(0!==s.length){D.current=!0,j(!0);try{let r=await Promise.all(s.map(e=>f(e,y))),a=e.length;t(e=>[...e,...r]),g(a)}finally{D.current=!1,j(!1)}}},M=async r=>{if(r!==y&&(w(r),0!==e.length)){j(!0);try{let a=await Promise.all(e.map(async e=>{let t=await b(e.originalUrl,r);return{...e,invertedUrl:t.invertedUrl,width:t.width,height:t.height}}));t(a)}finally{j(!1)}}},S=async()=>{if(!D.current){D.current=!0,j(!0);try{let e=await fetch("/examples/image-inverter-sample-original.webp"),r=await e.blob(),a=new File([r],"image-inverter-sample.webp",{type:r.type||"image/webp"}),l=await f(a,y);t([l]),g(0)}finally{D.current=!1,j(!1)}}},L=(e=U)=>{if(!e)return;let t=document.createElement("a");t.download=`${x(e.name)}-inverted.${P.extension}`,t.href=e.invertedUrl,t.click()},I=async()=>{if(0!==e.length){$(!0);try{let{default:t}=await Promise.all([r.e(1399),r.e(9718)]).then(r.t.bind(r,89718,23)),a=new t,l=new Map;for(let t of e){let e=await fetch(t.invertedUrl),r=await e.blob(),s=`${x(t.name)}-inverted`,n=l.get(s)||0;l.set(s,n+1);let i=0===n?`${s}.${P.extension}`:`${s}-${n+1}.${P.extension}`;a.file(i,r)}let s=await a.generateAsync({type:"blob"}),n=URL.createObjectURL(s),i=document.createElement("a");i.download=`inverted-images-${P.extension}.zip`,i.href=n,i.click(),URL.revokeObjectURL(n)}finally{$(!1)}}},O=async()=>{await M("png")};return(0,a.jsxs)("div",{className:"mx-auto max-w-6xl",children:[(0,a.jsx)("input",{ref:C,type:"file",accept:"image/*",multiple:!0,onChange:e=>{R(Array.from(e.target.files||[])),e.target.value=""},className:"hidden","aria-label":"Choose images to invert"}),(0,a.jsx)("div",{className:"mb-6",children:(0,a.jsxs)("div",{className:"flex flex-wrap justify-center gap-2 text-sm text-gray-300",children:[(0,a.jsxs)("span",{className:"inline-flex items-center gap-2 rounded-full border border-green-500/30 bg-green-500/10 px-3 py-1",children:[(0,a.jsx)(s.A,{className:"h-4 w-4 text-green-400"}),"Local browser processing"]}),(0,a.jsxs)("span",{className:"inline-flex items-center gap-2 rounded-full border border-cyan-500/30 bg-cyan-500/10 px-3 py-1",children:[(0,a.jsx)(s.A,{className:"h-4 w-4 text-cyan-400"}),"Transparency preserved for PNG/WebP"]}),(0,a.jsxs)("span",{className:"inline-flex items-center gap-2 rounded-full border border-purple-500/30 bg-purple-500/10 px-3 py-1",children:[(0,a.jsx)(i,{className:"h-4 w-4 text-purple-300"}),"Batch-ready"]})]})}),0===e.length?(0,a.jsx)("div",{className:`rounded-3xl border-2 border-dashed bg-gray-800/50 p-8 backdrop-blur-sm transition-all md:p-12 ${N?"border-purple-500 bg-purple-500/10":"border-gray-700"}`,onDrop:e=>{e.preventDefault(),k(!1),R(Array.from(e.dataTransfer.files||[]))},onDragOver:e=>{e.preventDefault(),k(!0)},onDragLeave:()=>k(!1),children:(0,a.jsxs)("div",{className:"text-center",children:[(0,a.jsx)("div",{className:"mb-6",children:(0,a.jsx)("div",{className:"mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 to-pink-500",children:(0,a.jsx)(d.A,{className:"h-12 w-12 text-white"})})}),(0,a.jsx)("h3",{className:"mb-2 text-2xl font-bold text-white",children:"Upload Your Image"}),(0,a.jsx)("p",{className:"mb-6 text-gray-400",children:"Drag and drop images or choose one or more files."}),(0,a.jsxs)("div",{className:"flex flex-wrap justify-center gap-3",children:[(0,a.jsxs)("button",{type:"button",onClick:()=>C.current?.click(),disabled:v,className:"inline-flex cursor-pointer items-center rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-3 font-semibold text-white transition-all hover:from-purple-600 hover:to-pink-600",children:[(0,a.jsx)(o.A,{className:"mr-2 h-5 w-5"}),"Choose Images"]}),(0,a.jsxs)("button",{type:"button",onClick:S,disabled:v,className:"inline-flex items-center rounded-xl border border-purple-500/60 bg-purple-500/10 px-6 py-3 font-semibold text-purple-100 transition-colors hover:bg-purple-500/20 disabled:cursor-not-allowed disabled:opacity-60",children:[(0,a.jsx)(c.A,{className:"mr-2 h-5 w-5"}),"Try Sample Image"]})]}),(0,a.jsx)("div",{className:"mt-4 text-sm text-gray-500",children:"Supports PNG, JPG, WebP and batch uploads. JPG exports use a solid background for transparent pixels."})]})}):(0,a.jsxs)("div",{className:"space-y-6",children:[(0,a.jsxs)("div",{className:"grid grid-cols-1 gap-6 lg:grid-cols-2",children:[(0,a.jsxs)("div",{className:"rounded-3xl border border-gray-700 bg-gray-800/50 p-6 backdrop-blur-sm",children:[(0,a.jsx)("h3",{className:"mb-4 text-lg font-semibold text-white",children:"Original"}),(0,a.jsx)("div",{className:"relative aspect-video overflow-hidden rounded-xl bg-gray-900",children:(0,a.jsx)("img",{src:U?.originalUrl,alt:U?`Original ${U.name}`:"Original image",className:"h-full w-full object-contain"})})]}),(0,a.jsxs)("div",{className:"rounded-3xl border border-gray-700 bg-gray-800/50 p-6 backdrop-blur-sm",children:[(0,a.jsx)("h3",{className:"mb-4 text-lg font-semibold text-white",children:"Inverted"}),(0,a.jsx)("div",{className:"relative aspect-video overflow-hidden rounded-xl bg-gray-900",children:v?(0,a.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,a.jsx)("div",{className:"h-12 w-12 animate-spin rounded-full border-4 border-purple-500 border-t-transparent"})}):(0,a.jsx)("img",{src:U?.invertedUrl,alt:U?`Inverted ${U.name}`:"Inverted image",className:"h-full w-full object-contain"})})]})]}),e.length>1&&(0,a.jsxs)("div",{className:"rounded-2xl border border-gray-700 bg-gray-900/60 p-4",children:[(0,a.jsxs)("div",{className:"mb-3 flex items-center justify-between gap-3",children:[(0,a.jsx)("h3",{className:"font-semibold text-white",children:"Batch images"}),(0,a.jsxs)("span",{className:"text-sm text-gray-400",children:[e.length," images processed"]})]}),(0,a.jsx)("div",{className:"grid gap-3 sm:grid-cols-2 lg:grid-cols-3",children:e.map((e,t)=>(0,a.jsxs)("button",{type:"button",onClick:()=>g(t),className:`flex items-center gap-3 rounded-xl border p-3 text-left transition-colors ${n===t?"border-purple-500 bg-purple-500/10":"border-gray-700 bg-gray-800/70 hover:border-gray-500"}`,children:[(0,a.jsx)("img",{src:e.invertedUrl,alt:`Batch preview for ${e.name}`,className:"h-12 w-16 rounded-lg object-cover"}),(0,a.jsx)("span",{className:"min-w-0 flex-1 truncate text-sm font-medium text-gray-200",children:e.name})]},e.id))})]}),(0,a.jsxs)("div",{className:"flex flex-wrap justify-center gap-4",children:[(0,a.jsxs)("button",{type:"button",onClick:()=>C.current?.click(),disabled:v,className:"inline-flex items-center rounded-xl border border-purple-500/60 bg-purple-500/10 px-6 py-3 font-semibold text-purple-100 transition-colors hover:bg-purple-500/20 disabled:cursor-not-allowed disabled:opacity-50",children:[(0,a.jsx)(m.A,{className:"mr-2 h-5 w-5"}),"Add More Images"]}),(0,a.jsx)(h.A,{outputFormat:y,onOutputFormatChange:M,onDownload:()=>L(),onReset:O,onStartOver:()=>{t([]),g(0),C.current&&(C.current.value="")},isDownloadDisabled:!U||v,isResetDisabled:v||"png"===y,resetLabel:"Reset to PNG",startOverLabel:"Start Over",menuTitle:"Output Format"}),e.length>1&&(0,a.jsxs)("button",{onClick:I,disabled:v||A,className:"inline-flex items-center rounded-xl bg-gray-700 px-6 py-3 font-semibold text-white transition-all hover:bg-gray-600 disabled:cursor-not-allowed disabled:opacity-50",children:[(0,a.jsx)(p,{className:"mr-2 h-5 w-5"}),A?"Preparing ZIP":"Download All ZIP"]})]})]})]})}},99139:(e,t,r)=>{r.d(t,{A:()=>a});let a=(0,r(13243).A)("Plus",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"M12 5v14",key:"s699le"}]])}}]);