https://fishersama.com/assets/TextBehindImage-e5ca2e7a.js

1import{u as $,r as d,j as t,e as O}from"./index-3d88130a.js";import{r as q}from"./index-953644ed.js";import{g as s}from"./styled-components.browser.esm-ef6924ab.js";import{u as H}from"./usePageLoading-43692476.js";const Y=s.div`
2  min-height: 100vh;
3  background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
4  padding: 4rem 2rem 2rem;
5  position: relative;
6
7  &::before {
8    content: '';
9    position: absolute;
10    top: 0;
11    left: 0;
12    right: 0;
13    bottom: 0;
14    background:
15      linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
16      linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px);
17    background-size: 20px 20px;
18    pointer-events: none;
19  }
20`,G=s.div`
21  display: flex;
22  gap: 2rem;
23  max-width: 1400px;
24  margin: 0 auto;
25  position: relative;
26  z-index: 1;
27  height: calc(100vh - 6rem);
28
29  @media (max-width: 768px) {
30    flex-direction: column;
31    height: auto;
32  }
33`,M=s.div`
34  flex: 1;
35  background: rgba(255, 255, 255, 0.8);
36  backdrop-filter: blur(10px);
37  border-radius: 16px;
38  padding: 1.5rem;
39  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
40  border: 1px solid rgba(255, 255, 255, 0.2);
41  display: flex;
42  flex-direction: column;
43  gap: 1rem;
44  max-height: 100%;
45  overflow-y: auto;
46
47  &::-webkit-scrollbar {

48    width: 8px;
49  }
50
51  &::-webkit-scrollbar-track {
52    background: rgba(0, 0, 0, 0.05);
53    border-radius: 4px;
54  }
55
56  &::-webkit-scrollbar-thumb {
57    background: rgba(99, 102, 241, 0.3);
58    border-radius: 4px;
59    
60    &:hover {
61      background: rgba(99, 102, 241, 0.5);
62    }
63  }
64`,X=s.h2`
65  font-size: 1.8rem;
66  margin-bottom: 1.5rem;
67  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
68  -webkit-background-clip: text;
69  -webkit-text-fill-color: transparent;
70  font-weight: 700;
71  letter-spacing: -0.02em;
72`,J=s.div`
73  flex: 1;
74  display: flex;
75  flex-direction: column;
76  gap: 1rem;
77  background: white;
78  border-radius: 16px;
79  padding: 1.5rem;
80  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
81  border: 1px solid rgba(255, 255, 255, 0.2);
82  height: 100%;
83  overflow: hidden;
84
85  .preview-content {
86    flex: 1;
87    display: flex;
88    justify-content: center;
89    align-items: center;
90    position: relative;
91    overflow: hidden;
92  }
93
94  .loading-container {
95    display: flex;
96    flex-direction: column;
97    align-items: center;
98    justify-content: center;
99    gap: 1rem;
100  }
101
102  .upload-prompt {
103    color: #666;
104    font-size: 1.2rem;
105  }
106`,K=s.div`
107  border: 2px dashed #6366F1;
108  border-radius: 8px;
109  padding: 2rem;
110  text-align: center;
111  cursor: pointer;
112  transition: all 0.3s ease;
113
114  &:hover {
115    background: rgba(99, 102, 241, 0.05);
116  }
117`,h=s.div`
118  display: flex;
119  flex-direction: column;
120  gap: 0.4rem;
121  margin-bottom: 1rem;
122
123  &:last-child {
124    margin-bottom: 0;
125  }
126`,p=s.label`
127  font-size: 0.9rem;
128  color: #4B5563;
129  font-weight: 500;
130  display: flex;
131  justify-content: space-between;
132  align-items: center;
133
134  span {
135    color: #9CA3AF;
136    font-size: 0.8rem;
137  }
138`,m=s.input`
139  width: 100%;
140  padding: 0.5rem;
141  border: 1px solid #dadce0;
142  border-radius: 4px;
143  font-size: 14px;
144`;s.button`
145  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
146  color: white;
147  border: none;
148  padding: 1rem;
149  border-radius: 8px;
150  font-weight: 600;
151  cursor: pointer;
152  transition: all 0.3s ease;
153  text-align: center;
154
155  &:hover {
156    transform: translateY(-2px);
157    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
158  }
159
160  &:disabled {
161    background: #ccc;
162    cursor: not-allowed;
163    transform: none;
164    box-shadow: none;
165  }
166`;s.canvas`
167  max-width: 100%;
168  height: auto;
169`;const Q=s.button`
170  position: absolute;
171  top: 1rem;
172  right: 1rem;
173  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
174  color: white;
175  border: none;
176  padding: 0.75rem 1.5rem;
177  border-radius: 8px;
178  font-weight: 600;
179  cursor: pointer;
180  transition: all 0.3s ease;
181  z-index: 3;
182
183  &:hover {
184    transform: translateY(-2px);
185    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
186  }
187
188  &:disabled {
189    background: #ccc;
190    cursor: not-allowed;
191    transform: none;
192    box-shadow: none;
193  }
194`,k=s.div`
195  background: rgba(255, 255, 255, 0.5);
196  border-radius: 12px;
197  padding: 1.2rem;
198  margin-bottom: 1.2rem;
199  border: 1px solid rgba(99, 102, 241, 0.1);
200
201  &:last-child {
202    margin-bottom: 0;
203  }
204`,B=s.h3`
205  font-size: 1.1rem;
206  color: #4F46E5;
207  margin-bottom: 1rem;
208  font-weight: 600;
209`,V=s.div`
210  background: rgba(99, 102, 241, 0.1);
211  border-left: 4px solid #6366F1;
212  padding: 1rem;
213  margin-top: 0.5rem;
214  border-radius: 0 8px 8px 0;
215  color: #4F46E5;
216  font-size: 0.9rem;
217  line-height: 1.5;
218`;function te(){const{t:a}=$(),F=H(),[b,z]=d.useState(null),[C,R]=d.useState(!1),[u,E]=d.useState(null),[j,N]=d.useState([{id:1,text:"EDIT",fontSize:200,fontWeight:800,rotation:0,color:"#FFFFFF",opacity:1,position:{x:50,y:50}}]),w=d.useRef(null),y=d.useRef(null);d.useState(!1);const[U,v]=d.useState(!1),[f,W]=d.useState({width:0,height:0}),L=async e=>{var i;const n=(i=e.target.files)==null?void 0:i[0];if(n)try{v(!0);const o=URL.createObjectURL(n);await D(o),z(o),await P(o)}catch(o){console.error("Error uploading image:",o)}finally{v(!1)}},D=e=>new Promise((n,i)=>{const o=new Image;o.onload=()=>{W({width:o.width,height:o.height}),n({width:o.width,height:o.height})},o.onerror=i,o.src=e}),P=async e=>{try{const n=await q(e),i=URL.createObjectURL(n);E(i),R(!0)}catch(n){console.error("Error processing image:",n)}},g=(e,n,i)=>{N(o=>o.map(l=>l.id===e?{...l,[n]:i}:l))},I=()=>

218{if(!f.width||!f.height)return{};const e=document.querySelector(".preview-area");if(!e)return{};const n=e.clientWidth-40,i=e.clientHeight-40,o=f.width/f.height,l=n/i;let r,c;return o>l?(r=n*.9,c=n*.9/o):(c=i*.9,r=i*.9*o),{width:`${r}px`,height:`${c}px`}},A=()=>{if(!w.current||!C)return;const e=w.current,n=e.getContext("2d"),i=new Image;i.crossOrigin="anonymous",i.onload=()=>{e.width=i.width,e.height=i.height;const o=document.querySelector('img[alt="Background"]');if(!o)return;const l=i.height/o.offsetHeight;if(n.drawImage(i,0,0,e.width,e.height),j.forEach(r=>{n.save();const c=r.position.x/100*e.width,x=r.position.y/100*e.height,T=r.fontSize*l;n.font=`${r.fontWeight} ${T}px Inter`,n.fillStyle=r.color,n.globalAlpha=r.opacity,n.textAlign="center",n.textBaseline="middle",n.translate(c,x),n.rotate(r.rotation*Math.PI/180),n.fillText(r.text,0,0),n.restore()}),u){const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{n.drawImage(r,0,0,e.width,e.height);const c=e.toDataURL("image/png"),x=document.createElement("a");x.download="text-behind-image.png",x.href=c,x.click()},r.src=u}},i.src=b};return d.useEffect(()=>{const e=new FontFace("Inter","url(/path/to/your/Inter-font.woff2)");e.load().then(()=>{document.fonts.add(e)})},[]),t.jsxs(t.Fragment,{children:[F&&t.jsx(O,{}),t.jsx(Y,{children:t.jsxs(G,{children:[t.jsxs(M,{children:[t.jsx(X,{children:a("tools.textBehindImage.title")}),t.jsxs(k,{children:[t.jsx(B,{children:a("tools.textBehindImage.imageUpload")}),t.jsxs(K,{onClick:()=>y.current.click(),children:[t.jsx("input",{type:"file",ref:y,style:{display:"none"},accept:"image/*",onChange:L}),a("tools.textBehindImage.uploadPrompt")]}),t.jsx(V,{children:a("tools.textBehindImage.privacyNote")})]}),j.map(e=>t.jsxs(k,{children:[t.jsx(B,{children:a("tools.textBehindImage.textSettings")}),t.jsxs(h,{children:[t.jsxs(p,{children:[a("tools.textBehindImage.text"),t.jsxs("span",{children:[e.text.length," ",a("tools.textBehindImage.characters")]})]}),t.jsx(m,{type:"text",value:e.text,onChange:n=>g(e.id,"text",n.target.value),placeholder:a("tools.textBehindImage.textPlaceholder")})]}),t.jsxs(h,{children:[t.jsxs(p,{children:[a("tools.textBehindImage.fontSize"),t.jsxs("span",{children:[e.fontSize,"px"]})]}),t.jsx(m,{type:"number",value:e.fontSize,onChange:n=>g(e.id,"fontSize",Number(n.target.value))})]}),t.jsxs(h,{children:[t.jsxs(p,{children:[a("tools.textBehindImage.fontWeight"),t.jsx("span",{children:e.fontWeight})]}),t.jsx(m,{type:"range",min:"100",max:"900",step:"100",value:e.fontWeight,onChange:n=>g(e.id,"fontWeight",Number(n.target.value))})]}),t.jsxs(h,{children:[t.jsxs(p,{children:[a("tools.textBehindImage.rotation"),t.jsxs("span",{children:[e.rotation,"°"]})]}),t.jsx(m,{type:"range",min:"-180",max:"180",value:e.rotation,onChange:n=>g(e.id,"rotation",Number(n.target.value))})]}),t.jsxs(h,{children:[t.jsx(p,{children:a("tools.textBehindImage.color")}),t.jsx(m,{type:"color",value:e.color,onChange:n=>g(e.id,"color",n.target.value)})]}),t.jsxs(h,{children:[t.jsxs(p,{children:[a("tools.textBehindImage.opacity"),t.jsx("span",{children:e.opacity})]}),t.jsx(m,{type:"range",min:"0",max:"1",step:"0.1",value:e.opacity,onChange:n=>g(e.id,"opacity",Number(n.target.value))})]}),t.jsxs(h,{children:[t.jsxs(p,{children:[a("tools.textBehindImage.positionX"),t.jsxs("span",{children:[e.position.x,"%"]})]}),t.jsx(m,{type:"range",min:"0",max:"100",value:e.position.x,onChange:n=>g(e.id,"position",{...e.position,x:Number(n.target.value)})})]}),t.jsxs(h,{children:[t.jsxs(p,{children:[a("tools.textBehindImage.positionY"),t.jsxs("span",{children:[e.position.y,"%"]})]}),t.jsx(m,{type:"range",min:"0",max:"100",value:e.position.y,onChange:n=>g(e.id,"position",{...e.position,y:Number(n.target.value)})})]})]},e.id))]}),t.jsx(J,{className:"preview-area",children:t.jsxs("div",{className:"preview-content",children:[U?t.jsx("div",{className:"loading-container",children:t.jsxs("span",{children:[" ",a("tools.textBehindImage.processing")]})}):b?t.jsxs("div",{style:{position:"relative",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:[t.jsx(Q,{onClick:()=>A(),children:a("tools.textBehindImage.download")}

218),t.jsx("img",{src:b,alt:"Background",style:{...I(),objectFit:"contain",position:"relative"}}),t.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none"},children:j.map(e=>{const n=document.querySelector('img[alt="Background"]'),i=n==null?void 0:n.getBoundingClientRect();i!=null&&i.width;const o=e.text,l=Math.floor(o.length/2),r=o.substring(0,l),c=o.charAt(l),x=o.substring(l+1);return t.jsxs("div",{style:{position:"absolute",left:`${e.position.x}%`,top:`${e.position.y}%`,transform:`translate(-50%, -50%) rotate(${e.rotation}deg)`,color:e.color,fontSize:`${e.fontSize}px`,fontFamily:"Inter",fontWeight:e.fontWeight,opacity:e.opacity,zIndex:1,whiteSpace:"pre",display:"flex",justifyContent:"center",alignItems:"center",transformOrigin:"center"},children:[t.jsx("span",{children:r}),t.jsx("span",{style:{display:"inline-block",position:"relative"},children:c}),t.jsx("span",{children:x})]},e.id)})}),u&&t.jsx("img",{src:u,alt:"Foreground",style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",...I(),objectFit:"contain",zIndex:2}})]}):t.jsx("div",{className:"upload-prompt",children:a("tools.textBehindImage.noImage")}),t.jsx("canvas",{ref:w,style:{display:"none"}})]})})]})})]})}export{te as default};