https://rainx.in/assets/ImageCropper-k-AEpIDN.js

1import{j as e}from"./ui-vendor-B5O6TaIB.js";import{r as n}from"./react-vendor-Dwsg5a2_.js";import{P as H}from"./PublicHeader-CrD_zer-.js";import{P as W}from"./PublicFooter-DpgDkPPr.js";import{S as M}from"./SEO-CeZ123iL.js";import{R as X,b3 as C,O as _,k as q,Z as B,m as Y,h as Q,v as Z}from"./index-Cbf_hYLb.js";import{S as G,L as w,B as J}from"./ReactCrop-oTiY4631.js";function S(l,m,p){return w(J({unit:"%",width:90},p,l,m),l,m)}function le(){const[l,m]=n.useState(null),[p,y]=n.useState(""),h=n.useRef(null),[k,i]=n.useState(),[r,v]=n.useState(null),[o,D]=n.useState(void 0),g=n.useRef(null),[F,u]=n.useState(!1);n.useEffect(()=>{window.scrollTo(0,0)},[]);const b=t=>{t.preventDefault(),t.stopPropagation(),t.type==="dragenter"||t.type==="dragover"?u(!0):t.type==="dragleave"&&u(!1)},R=t=>{t.preventDefault(),t.stopPropagation(),u(!1),t.dataTransfer.files&&t.dataTransfer.files[0]&&N(t.dataTransfer.files[0])},I=t=>{t.preventDefault(),t.target.files&&t.target.files[0]&&N(t.target.files[0])},N=t=>{if(!t.type.startsWith("image/")){alert("Please select an image file");return}m(t),i(void 0);const s=new FileReader;s.addEventListener("load",()=>{var a;return y(((a=s.result)==null?void 0:a.toString())||"")}),s.readAsDataURL(t)},P=t=>{const{width:s,height:a}=t.currentTarget;i(o?S(s,a,o):w({unit:"%",width:50,height:50},s,a))},d=t=>{if(D(t),h.current){const{width:s,height:a}=h.current;i(t?S(s,a,t):w({unit:"%",width:50,height:50},s,a))}},E=()=>{if(!r||!h.current)return;const t=h.current,s=document.createElement("canvas"),a=t.naturalWidth/t.width,x=t.naturalHeight/t.height,c=s.getContext("2d");if(!c)throw new Error("No 2d context");const f=window.devicePixelRatio;s.width=Math.floor(r.width*a*f),s.height=Math.floor(r.height*x*f),c.scale(f,f),c.imageSmoothingQuality="high";const T=r.x*a,U=r.y*x;return c.translate(-T,-U),c.drawImage(t,0,0,t.naturalWidth,t.naturalHeight,0,0,t.naturalWidth,t.naturalHeight),new Promise(A=>{s.toBlob(j=>{if(!j){console.error("Canvas is empty");return}j.name="cropped.jpg";const z=URL.createObjectURL(j);A(z)},(l==null?void 0:l.type)||"image/jpeg",1)})},L=async()=>{const t=await E();if(t){const s=document.createElement("a");s.href=t;const a=l.name,x=a.lastIndexOf("."),c=x!==-1?`cropped_${a.substring(0,x)}${a.substring(x)}`:`cropped_${a}`;s.download=c,document.body.appendChild(s),s.click(),document.body.removeChild(s),URL.revokeObjectURL(t)}},$=()=>{g.current.click()},O=()=>{m(null),y(""),i(void 0),v(null),g.current&&(g.current.value="")};return e.jsxs("div",{className:"bg-slate-50 min-h-screen flex flex-col font-sans",children:[e.jsx(H,{}),e.jsx(M,{title:"Image Cropper | Crop Photos Online for Free",description:"Easily crop images and photos online. Adjustable aspect ratios for Instagram, Facebook, and more. Fast, free, and secure."}),e.jsx("main",{className:"flex-grow pt-24 pb-12",children:e.jsxs("div",{className:"max-w-6xl mx-auto px-4",children:[e.jsxs("div",{className:"text-center mb-10",children:[e.jsx("h1",{className:"text-4xl md:text-5xl font-black text-slate-900 mb-4",children:"Image Cropper"}),e.jsx("p",{className:"text-lg text-slate-600",children:"Crop your photos instantly in your browser. Fast, free, and secure."})]}),e.jsx("div",{className:"bg-white rounded-3xl shadow-xl border border-slate-100 overflow-hidden",children:p?e.jsx("div",{className:"p-8",children:e.jsxs("div",{className:"flex flex-col lg:flex-row gap-8",children:[e.jsxs("div",{className:"flex-1 space-y-6 flex flex-col",children:[e.jsxs("div",{className:"flex justify-between items-center",children:[e.jsxs("h3",{className:"font-bold text-slate-700 flex items-center gap-2",children:[e.jsx(C,{})," Crop Image"]}),e.jsx("span",{className:"text-xs font-semibold px-2 py-1 bg-slate-100 text-slate-600 rounded",children:l==null?void 0:l.name})]}),e.jsx("div",{className:"bg-slate-900 rounded-xl overflow-hidden flex items-center justify-center border border-slate-200 flex-grow p-4 relative",style:{minHeight:"400px"},children:e.jsx(G,{crop:k,onChange:(t,s)=>i(s),onComplete:t=>v(t),aspect:o,className:"max-h-[600px]",children:e.jsx("img",{ref:h,alt:"Crop me",src:p,onLoad:P,className:"max-w-full max-h-[600px] object-contain"})})}),e.jsx("div",{className:"pt-4",children:e.jsxs("button",{onClick:O,className:"w-full bg-white text-red-500 border border-red-200 py-3 rounded-xl font-bold hover:bg-red-50 transition-colors flex justify-center items-center gap-2",children:[e.jsx(_,{})," Choose another image"]})})]}),e.jsxs("div",{className:"w-full lg:w-80 space-y-8 flex flex-col",children:[e.jsxs("div",{children:[e.jsxs("h3",{className:"font-bold text-slate-700 flex items-center gap-2 mb-6",children:[e.jsx(q,{})," Aspect Ratios"]}),e.jsxs("div",{className:"bg-slate-50 p-6 rounded-2xl border border-slate-200 grid grid-cols-2 gap-3",children:[e.jsxs("button",{onClick:()=>

1d(void 0),className:`py-3 px-4 rounded-xl flex flex-col items-center gap-2 font-semibold transition-all ${o===void 0?"bg-primary text-white shadow-md":"bg-white text-slate-600 border border-slate-200 hover:bg-slate-100"}`,children:[e.jsx(C,{size:20}),e.jsx("span",{className:"text-xs",children:"Freeform"})]}),e.jsxs("button",{onClick:()=>d(1),className:`py-3 px-4 rounded-xl flex flex-col items-center gap-2 font-semibold transition-all ${o===1?"bg-primary text-white shadow-md":"bg-white text-slate-600 border border-slate-200 hover:bg-slate-100"}`,children:[e.jsx(B,{size:20}),e.jsx("span",{className:"text-xs",children:"Square (1:1)"})]}),e.jsxs("button",{onClick:()=>d(16/9),className:`py-3 px-4 rounded-xl flex flex-col items-center gap-2 font-semibold transition-all ${o===16/9?"bg-primary text-white shadow-md":"bg-white text-slate-600 border border-slate-200 hover:bg-slate-100"}`,children:[e.jsx(Y,{size:20}),e.jsx("span",{className:"text-xs",children:"Wide (16:9)"})]}),e.jsxs("button",{onClick:()=>d(9/16),className:`py-3 px-4 rounded-xl flex flex-col items-center gap-2 font-semibold transition-all ${o===9/16?"bg-primary text-white shadow-md":"bg-white text-slate-600 border border-slate-200 hover:bg-slate-100"}`,children:[e.jsx(Q,{size:20}),e.jsx("span",{className:"text-xs",children:"Story (9:16)"})]}),e.jsxs("button",{onClick:()=>d(4/3),className:`py-3 px-4 rounded-xl flex flex-col items-center gap-2 font-semibold transition-all ${o===4/3?"bg-primary text-white shadow-md":"bg-white text-slate-600 border border-slate-200 hover:bg-slate-100"}`,children:[e.jsx("span",{className:"font-bold",children:"4:3"}),e.jsx("span",{className:"text-[10px]",children:"Standard"})]}),e.jsxs("button",{onClick:()=>d(3/2),className:`py-3 px-4 rounded-xl flex flex-col items-center gap-2 font-semibold transition-all ${o===3/2?"bg-primary text-white shadow-md":"bg-white text-slate-600 border border-slate-200 hover:bg-slate-100"}`,children:[e.jsx("span",{className:"font-bold",children:"3:2"}),e.jsx("span",{className:"text-[10px]",children:"Classic"})]})]})]}),e.jsx("div",{className:"mt-auto pt-8",children:e.jsxs("button",{onClick:L,disabled:!(r!=null&&r.width)||!(r!=null&&r.height),className:"w-full bg-primary text-white py-4 rounded-xl font-bold text-lg hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 flex justify-center items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",children:[e.jsx(Z,{})," Download Cropped"]})})]})]})}):e.jsxs("div",{className:`p-12 md:p-32 text-center border-2 border-dashed transition-all duration-200 ${F?"border-primary bg-primary/5":"border-slate-300 hover:border-primary/50"}`,onDragEnter:b,onDragLeave:b,onDragOver:b,onDrop:R,children:[e.jsx("input",{ref:g,type:"file",className:"hidden",accept:"image/*",onChange:I}),e.jsx("div",{className:"w-20 h-20 mx-auto bg-slate-100 rounded-full flex items-center justify-center text-slate-400 mb-6",children:e.jsx(X,{size:32})}),e.jsx("h3",{className:"text-2xl font-bold text-slate-900 mb-2",children:"Drag & Drop your image here"}),e.jsx("p",{className:"text-slate-500 mb-8",children:"or click to browse from your device"}),e.jsx("button",{onClick:$,className:"bg-primary text-white px-8 py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20",children:"Select Image"})]})}),e.jsx("div",{className:"mt-12 text-center text-slate-500 max-w-2xl mx-auto",children:e.jsx("p",{className:"text-sm",children:"Powered by RainX. This tool processes your images locally in your browser. No data is sent to our servers."})})]})}),e.jsx(W,{})]})}export{le as default};