https://conversiontab.com/build/assets/meme-creator-page-BEkHkpeg.js

1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/fabric-CjoHkwCN.js","assets/_commonjsHelpers-BosuxZz1.js","assets/___vite-browser-external_commonjs-proxy-DRaEfepn.js"])))=>i.map(i=>d[i]);
2import{g as he,_ as fe,e as ge,T as me}from"./app-gOHIPY12.js";const K=[{label:"Facebook Post (1200x628)",width:1200,height:628},{label:"Instagram Post (1080x1080)",width:1080,height:1080},{label:"Twitter Post (1024x512)",width:1024,height:512}],q={width:800,height:500},Q="/meme.png",le="data:image/svg+xml,"+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><rect fill="#dee2e6" width="800" height="600"/><text x="400" y="300" text-anchor="middle" fill="#495057" font-family="system-ui,sans-serif" font-size="28">Image</text></svg>'),Ee="data:image/svg+xml,"+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><rect fill="#cfe8ff" width="800" height="600"/><text x="400" y="300" text-anchor="middle" fill="#2563eb" font-family="system-ui,sans-serif" font-size="28">Image</text></svg>'),we=[{value:Q,label:"Meme template (default)"},{value:le,label:"Gray placeholder"},{value:Ee,label:"Blue placeholder"}];function k(f){const v=document.getElementById("ctMemeToastBody"),E=document.getElementById("ctMemeToast");if(!v||!E||typeof ge>"u"){window.alert(f);return}v.textContent=f,me.getOrCreateInstance(E).show()}function ce(f,v){if(!f||!v)return;const E=f.getObjects(),p=E.indexOf(v);if(p!==-1)for(let g=p;g<E.length-1;g++)f.bringForward(v)}function se(f){f.__ctOrigScaleX||(f.__ctOrigScaleX=f.scaleX,f.__ctOrigScaleY=f.scaleY)}function ve(f){f.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(v=>{he.getOrCreateInstance(v)})}function xe(){const f=document.getElementById("ct-meme-creator-root");if(!f)return;ve(f);const v=document.getElementById("ctMemeCanvas"),E=document.getElementById("ctMemeLayout"),p=document.getElementById("ctMemeBg"),g=document.getElementById("ctMemeDownloadSize"),B=document.getElementById("ctMemeW"),O=document.getElementById("ctMemeH"),D=document.getElementById("ctMemeAddText"),X=document.getElementById("ctMemeAddImg"),T=document.getElementById("ctMemeReplaceImg"),S=document.getElementById("ctMemeFitImg"),C=document.getElementById("ctMemeRestoreImg"),U=document.getElementById("ctMemeRemoveSel"),P=document.getElementById("ctMemeBringFront"),Y=document.getElementById("ctMemeReset"),z=document.getElementById("ctMemeDownload"),N=document.getElementById("ctMemeTextTools"),x=document.getElementById("ctMemeFontSize"),b=document.getElementById("ctMemeTextColor"),I=document.getElementById("ctMemeFontFamily"),A=document.getElementById("ctMemeFilePick"),y=document.getElementById("ctMemeSlotImage");if(!v)return;let H=null,t=null;const l={width:q.width,height:q.height,layout:"single",bg:"#ffffff",slotImageUrl:Q};let $=!1,ee="add";async function R(){if(H)return H;const e=await fe(()=>import("./fabric-CjoHkwCN.js").then(i=>i.f),__vite__mapDeps([0,1,2]));return H=e.fabric||e.default,H}function te(){if(y){y.innerHTML="";for(const e of we){const i=document.createElement("option");i.value=e.value,i.textContent=e.label,y.appendChild(i)}y.value=l.slotImageUrl}}function G(){if(!g)return;g.innerHTML="";for(const i of K){const n=document.createElement("option");n.value=i.label,n.textContent=i.label,g.appendChild(n)}const e=document.createElement("option");e.value="__custom__",e.textContent=`Custom Size (${l.width}x${l.height})`,g.appendChild(e)}function j(){if(!g)return;const e=K.find(i=>i.width===l.width&&i.height===l.height);if(e)g.value=e.label;else{g.value="__custom__";const i=g.querySelector('option[value="__custom__"]');i&&(i.textContent=`Custom Size (${l.width}x${l.height})`)}}function V(){!B||!O||($=!0,B.value=String(l.width),O.value=String(l.height),$=!1)}function L(){const e=t==null?void 0:t.getActiveObject(),i=!!e&&e.type!=="activeSelection",n=i&&e.type==="image",r=i&&e.type==="textbox";T&&(T.disabled=!n),S&&(S.disabled=!n),C&&(C.disabled=!n||e.__ctOrigScaleX==null),U&&(U.disabled=!i),P&&(P.disabled=!i),N&&x&&b&&I&&(r?(N.classList.remove("d-none"),x.value=String(e.fontSize||24),b.value=typeof e.fill=="string"&&e.fill.startsWith("#")?e.fill:"#000000",I.value=e.fontFamily||"Times New Roman"):N.classList.add("d-none"))}function ae(e){e.on("selection:created",L),e.on("selection:updated",L),e.on("selection:cleared",L)}function _(e,i={}){if(!t)return;const{text:n="Enter text here",left:r=100,top:m=100,width:h=200,textAlign:u

2="left",selected:d=!1}=i,s=new e.Textbox(n,{left:r,top:m,width:h,fontSize:24,fill:"#000000",editable:!0,textAlign:u,selectable:!0});t.add(s),ce(t,s),d&&t.setActiveObject(s),t.requestRenderAll(),L()}function M(e,i,n,r,m){if(!t)return;const h=l.slotImageUrl;function u(s){if(!(s!=null&&s.width))return;const a=s.width/s.height;let o,c;r/m>a?(c=m,o=c*a):(o=r,c=o/a),s.set({left:i,top:n,scaleX:o/s.width,scaleY:c/s.height,selectable:!0}),se(s),t.add(s),t.requestRenderAll()}function d(s,a){const o=s.startsWith("data:")?{}:{crossOrigin:"anonymous"};e.Image.fromURL(s,c=>{const w=c==null?void 0:c.width;if(!w&&a){a();return}w&&u(c)},o)}d(h,()=>d(le,null))}function ne(e){if(!t)return;const i=l.layout,n=10,r=10,m=t.getWidth(),h=t.getHeight();let u=m*.8,d=h*.8;const s=m*.1,a=h*.1;switch(i){case"single":{M(e,s,a,u,d);const o={top:a,bottom:a+d};_(e,{text:"Enter text here",left:s,top:o.top-30,width:u,textAlign:"center"}),_(e,{text:"Enter text here",left:s,top:o.bottom,width:u,textAlign:"center"});break}case"two-side-by-side":{const o=(m-r-n*2)/2,c=n;M(e,c,a,o,d);const w=c+o+r;M(e,w,a,o,d),_(e,{text:"Enter text here",left:c,top:a+d,width:o,textAlign:"center"}),_(e,{text:"Enter text here",left:w,top:a+d,width:o,textAlign:"center"});break}case"two-up-down":{const o=(d-r)/2;M(e,n,n,u,o),M(e,n,n+o+r,u,o),_(e,{text:"Enter text here",left:n,top:n+o-30,width:u,textAlign:"center"}),_(e,{text:"Enter text here",left:n,top:h-40,width:u,textAlign:"center"});break}case"four-grid":{const o=(u-r)/2,c=(d-r)/2;M(e,n,n,o,c),M(e,n+o+r,n,o,c),M(e,n,n+c+r,o,c),M(e,n+o+r,n+c+r,o,c),_(e,{text:"Enter text here",left:n,top:n+c-30,width:o,textAlign:"center"}),_(e,{text:"Enter text here",left:n+o+r,top:n+c-30,width:o,textAlign:"center"}),_(e,{text:"Enter text here",left:n,top:h-40,width:o,textAlign:"center"}),_(e,{text:"Enter text here",left:n+o+r,top:h-40,width:o,textAlign:"center"});break}}t.requestRenderAll()}function Z(e){t&&(t.clear(),t.setBackgroundColor(l.bg,()=>{ne(e)}))}async function F(){const e=await R();t&&(t.dispose(),t=null),v.width=l.width,v.height=l.height,t=new e.Canvas(v,{width:l.width,height:l.height,backgroundColor:l.bg}),ae(t),ne(e),L()}function re(e,i){t&&i.Image.fromURL(e,n=>

2{const r=t.getWidth(),m=t.getHeight(),h=r*.8,u=m*.8,d=r*.1,s=m*.1,a=n.width/n.height;let o,c;a>h/u?(o=h/n.width,c=o):(c=u/n.height,o=c);const w=n.width*o,J=n.height*c,de=d+(h-w)/2,ue=s+(u-J)/2;n.set({left:de,top:ue,scaleX:o,scaleY:c,selectable:!0}),se(n),t.add(n),t.setActiveObject(n),t.requestRenderAll(),L()})}function oe(e){ee=e,A&&(A.value="",A.click())}A==null||A.addEventListener("change",async()=>{var r;const e=(r=A==null?void 0:A.files)==null?void 0:r[0];if(!e||!t)return;const i=await R(),n=new FileReader;n.onload=m=>{var u;const h=(u=m.target)==null?void 0:u.result;if(typeof h=="string")if(ee==="replace"){const d=t.getActiveObject();if(!d||d.type!=="image"){k("No image selected to replace.");return}const s=d.getBoundingRect(!0,!0);i.Image.fromURL(h,a=>{const o=a.width/a.height;let c,w;s.width/s.height>o?(w=s.height/a.height,c=w):(c=s.width/a.width,w=c),a.set({left:s.left,top:s.top,scaleX:c,scaleY:w,selectable:!0}),a.__ctOrigScaleX=a.scaleX,a.__ctOrigScaleY=a.scaleY,t.remove(d),t.add(a),t.setActiveObject(a),t.requestRenderAll(),L()})}else re(h,i)},n.readAsDataURL(e)}),D==null||D.addEventListener("click",async()=>{const e=await R();_(e,{text:"Enter text here",selected:!0})}),X==null||X.addEventListener("click",()=>oe("add")),T==null||T.addEventListener("click",()=>oe("replace")),S==null||S.addEventListener("click",()=>{const e=t==null?void 0:t.getActiveObject();if(!e||e.type!=="image"){k("Please select an image element to fit the image.");return}const i=t.getWidth(),n=t.getHeight(),r=i*.8,m=n*.8,h=i*.1,u=n*.1,d=e.width,s=e.height,a=d/s;let o,c;a>r/m?(o=r/d,c=o):(c=m/s,o=c);const w=d*o,J=s*c;e.set({left:h+(r-w)/2,top:u+(m-J)/2,scaleX:o,scaleY:c}),e.setCoords(),t.requestRenderAll()}),C==null||C.addEventListener("click",()=>{const e=t==null?void 0:t.getActiveObject();if(!e||e.type!=="image"){k("Please select an image element to restore its original size.");return}if(e.__ctOrigScaleX==null||e.__ctOrigScaleY==null){k("Original size not stored for this image.");return}e.set({scaleX:e.__ctOrigScaleX,scaleY:e.__ctOrigScaleY}),e.setCoords(),t.requestRenderAll()}),U==null||U.addEventListener("click",()=>{if(!t)return;const e=t.getActiveObject();e&&(t.remove(e),t.discardActiveObject(),t.requestRenderAll(),L())}),P==null||P.addEventListener("click",()=>{if(!t)return;const e=t.getActiveObject();e&&(ce(t,e),t.requestRenderAll())});function W(){const e=t==null?void 0:t.getActiveObject();if(!e||e.type!=="textbox")return;const i=Math.max(1,parseInt(String((x==null?void 0:x.value)||"24"),10)||24);e.set("fontSize",i),b!=null&&b.value&&e.set("fill",b.value),I!=null&&I.value&&e.set("fontFamily",I.value),e.setCoords(),t.requestRenderAll()}x==null||x.addEventListener("input",W),x==null||x.addEventListener("change",W),b==null||b.addEventListener("input",W),I==null||I.addEventListener("change",W),E==null||E.addEventListener("change",async()=>{if(!E)return;l.layout=E.value;const e=await R();Z(e),L()}),y==null||y.addEventListener("change",async()=>{if(!y)return;l.slotImageUrl=y.value;const e=await R();Z(e),L()}),p==null||p.addEventListener("input",async()=>{if(!p||(l.bg=p.value,!t))return;const e=await R();Z(e)}),g==null||g.addEventListener("change",async()=>{const e=g==null?void 0:g.value;if(!e||e==="__custom__")return;const i=K.find(n=>n.label===e);i&&(l.width=i.width,l.height=i.height,V(),j(),await F())});function ie(){if($)return;const e=Math.max(100,Math.min(8e3,parseInt(String((B==null?void 0:B.value)||"800"),10)||800)),i=Math.max(100,Math.min(8e3,parseInt(String((O==null?void 0:O.value)||"500"),10)||500));l.width=e,l.height=i,G(),j(),F()}B==null||B.addEventListener("change",ie),O==null||O.addEventListener("change",ie),Y==null||Y.addEventListener("click",async()=>{l.width=q.width,l.height=q.height,l.layout="single",l.bg="#ffffff",l.slotImageUrl=Q,E&&(E.value="single"),p&&(p.value="#ffffff"),te(),G(),V(),j(),await F()}),z==null||z.addEventListener("click",()=>{if(!t)return;const e=t.toDataURL({format:"png",multiplier:1}),i=document.createElement("a");i.download="meme.png",i.href=e,i.click()}),te(),G(),V(),j(),E&&(l.layout=E.value),p&&(l.bg=p.value),y&&(l.slotImageUrl=y.value),F().catch(()=>k("Could not load editor."))}export{xe as initMemeCreatorPage};