https://talos.tools/assets/image-to-base64-XmO-qa_u.js

1import{u as ne,j as e}from"./vendor-query-BROoW_jZ.js";import{d as ce,a as i}from"./vendor-router-DB8Iq42h.js";import{T as oe}from"./tool-layout-sidebar-BfPp0A7t.js";import{u as de,f as me,C as l,b as o,d,a as n,B as x}from"./index-DUEDRU2t.js";import{T as A}from"./textarea-B1_SnVaJ.js";import{T as E,a as P,b}from"./tabs-CUd4DxO1.js";import{u as xe,Q as ue}from"./quota-usage-card-DHfHXhU0.js";import{I as T}from"./image-OhLJrfzg.js";import{C as G}from"./code-osZgrV1x.js";import{C as Q}from"./check-BLcNYg_b.js";import{C as H}from"./copy-C9OWDm-_.js";import{D as W}from"./download-CQEIJX3I.js";import{T as q}from"./trash-2-xOItAEBr.js";import{U as he}from"./upload-Dh-JwPXJ.js";import{F as pe}from"./theme-toggle-CYJ0Zdz9.js";import{A as ge}from"./arrow-right-left-BdMJrFu1.js";import"./page-head-Dc8X8fDS.js";import"./use-favorites-B0QNNogk.js";import"./sponsor-button-BHCF4BzK.js";import"./heart-B4u0HA0q.js";import"./circle-check-Bk6XpyXj.js";import"./target-CAp_oSb-.js";import"./code-xml-CSSGWgOt.js";import"./circle-help-DgdU4BsY.js";import"./link-D3xms2eZ.js";import"./sheet-olztuKff.js";import"./index-BjrTZVyX.js";import"./index-BpjTTxnP.js";import"./index-DpcBFuQB.js";import"./scroll-area-BP6Y_hfQ.js";import"./index-DMsYNBze.js";import"./index-BdQq_4o_.js";import"./settings-Dq_8YxJ9.js";import"./panel-left-close-Diq_zBJU.js";import"./panel-right-close-DMiz4Gyz.js";import"./index-DocI_qmi.js";import"./index-CAIXORah.js";import"./index-BBkT2x2P.js";import"./message-square-B8SGFu4f.js";import"./vendor-react-CHemKkfq.js";import"./index-vru6chB9.js";function rs(){const{toast:r}=de(),{user:f}=me(),[,V]=ce(),D=i.useRef(null),{data:h}=ne({queryKey:["/api/tools/image-to-base64"],queryFn:async()=>{const s=await fetch("/api/tools/image-to-base64");return s.ok?s.json():null}}),{quotaCheck:c,trackUsage:L,refetch:S}=xe("tool","image-to-base64","downloads","daily"),[u,U]=i.useState("encode"),[a,z]=i.useState(null),[N,J]=i.useState("raw"),[v,R]=i.useState(""),[g,F]=i.useState(null),[y,C]=i.useState(!1),[k,$]=i.useState(!1),j=f?5*1024*1024:2*1024*1024,B=i.useCallback(s=>{if(!s.type.startsWith("image/")){r({title:"Invalid file",description:"Please upload an image file",variant:"destructive"});return}if(s.size>j){r({title:"File too large",description:`Maximum file size is ${w(j)}`,variant:"destructive"});return}const t=new FileReader;t.onload=p=>{var O;const m=(O=p.target)==null?void 0:O.result,ie=m.split(",")[1],le=URL.createObjectURL(s);z({name:s.name,type:s.type,size:s.size,base64:ie,dataUrl:m,previewUrl:le}),r({title:"Image encoded!",description:`${s.name} converted to Base64`})},t.onerror=()=>{r({title:"Error",description:"Failed to read file",variant:"destructive"})},t.readAsDataURL(s)},[r,j]),K=i.useCallback(s=>{s.preventDefault(),C(!1);const t=s.dataTransfer.files[0];t&&B(t)},[B]),_=i.useCallback(s=>{s.preventDefault(),C(!0)},[]),X=i.useCallback(s=>{s.preventDefault(),C(!1)},[]),Z=i.useCallback(()=>{let s=v.trim();s.startsWith("data:")||(s=`data:image/png;base64,${s}`);try{const t=new Image;t.onload=()=>{F(s),r({title:"Decoded!",description:"Base64 converted to image"})},t.onerror=()=>{r({title:"Invalid Base64",description:"Could not decode Base64 string to image",variant:"destructive"})},t.src=s}catch{r({title:"Error",description:"Invalid Base64 string",variant:"destructive"})}},[v,r]),I=i.useCallback(()=>{if(!a)return"";switch(N){case"raw":return a.base64;case"css":return`background-image: url('${a.dataUrl}');`;case"html":return`<img src="${a.dataUrl}" alt="${a.name}" />`;case"markdown":return`![${a.name}](${a.dataUrl})`;default:return a.base64}},[a,N]),M=async()=>{const s=I();s&&(await navigator.clipboard.writeText(s),$(!0),setTimeout(()=>$(!1),2e3),r({title:"Copied!",description:"Base64 copied to clipboard"}))},Y=async()=>{if(!g)return;if(c&&!c.allowed){r({title:"Limit Reached",description:c.message,variant:"destructive"});return}const s=document.createElement("a");s.href=g,s.download=`decoded-image-${Date.now()}.png`,s.click(),await L({action:"decode"}),await S(),r({title:"Downloaded!",description:"Decoded image saved"})},ee=async()=>

1{if(!a)return;if(c&&!c.allowed){r({title:"Limit Reached",description:c.message,variant:"destructive"});return}const s=I(),t=new Blob([s],{type:"text/plain"}),p=URL.createObjectURL(t),m=document.createElement("a");m.href=p,m.download=`base64-${a.name}.txt`,m.click(),URL.revokeObjectURL(p),await L({action:"encode",format:N}),await S(),r({title:"Downloaded!",description:"Base64 text file saved"})},se=()=>{a!=null&&a.previewUrl&&URL.revokeObjectURL(a.previewUrl),z(null)},ae=()=>{R(""),F(null)},w=s=>{if(s===0)return"0 B";const t=1024,p=["B","KB","MB","GB"],m=Math.floor(Math.log(s)/Math.log(t));return`${(s/Math.pow(t,m)).toFixed(1)} ${p[m]}`},te=e.jsxs("div",{className:"space-y-6",children:[e.jsxs(l,{children:[e.jsx(o,{className:"pb-2",children:e.jsx(d,{className:"text-sm",children:"Mode"})}),e.jsx(n,{children:e.jsx(E,{value:u,onValueChange:s=>U(s),children:e.jsxs(P,{className:"grid w-full grid-cols-2",children:[e.jsxs(b,{value:"encode",className:"gap-2",children:[e.jsx(T,{className:"h-3 w-3"}),"Image → Base64"]}),e.jsxs(b,{value:"decode",className:"gap-2",children:[e.jsx(G,{className:"h-3 w-3"}),"Base64 → Image"]})]})})})]}),u==="encode"&&a&&e.jsxs(l,{children:[e.jsx(o,{children:e.jsx(d,{className:"text-sm",children:"Output Format"})}),e.jsx(n,{className:"space-y-3",children:e.jsx("div",{className:"grid grid-cols-2 gap-2",children:["raw","css","html","markdown"].map(s=>e.jsxs(x,{variant:N===s?"default":"outline",size:"sm",onClick:()=>J(s),className:"text-xs",children:[s==="raw"&&"Raw Base64",s==="css"&&"CSS",s==="html"&&"HTML",s==="markdown"&&"Markdown"]},s))})})]}),u==="encode"&&a&&e.jsxs(l,{className:"bg-primary/5 border-primary/10",children:[e.jsx(o,{children:e.jsx(d,{className:"text-sm",children:"Image Info"})}),e.jsxs(n,{className:"space-y-2 text-sm",children:[e.jsxs("div",{className:"flex justify-between",children:[e.jsx("span",{className:"text-muted-foreground",children:"File"}),e.jsx("span",{className:"font-medium truncate max-w-[150px]",title:a.name,children:a.name})]}),e.jsxs("div",{className:"flex justify-between",children:[e.jsx("span",{className:"text-muted-foreground",children:"Type"}),e.jsx("span",{className:"font-medium",children:a.type})]}),e.jsxs("div",{className:"flex justify-between",children:[e.jsx("span",{className:"text-muted-foreground",children:"Original Size"}),e.jsx("span",{className:"font-medium",children:w(a.size)})]}),e.jsxs("div",{className:"flex justify-between",children:[e.jsx("span",{className:"text-muted-foreground",children:"Base64 Length"}),e.jsxs("span",{className:"font-medium",children:[a.base64.length.toLocaleString()," chars"]})]}),e.jsx("div",{className:"pt-2 border-t",children:e.jsx("p",{className:"text-xs text-muted-foreground",children:"Base64 increases size by ~33%"})})]})]}),u==="encode"&&a&&e.jsxs(l,{children:[e.jsx(o,{children:e.jsx(d,{className:"text-sm",children:"Actions"})}),e.jsxs(n,{className:"space-y-2",children:[e.jsxs(x,{variant:"default",size:"sm",className:"w-full",onClick:M,children:[k?e.jsx(Q,{className:"h-3 w-3 mr-2"}):e.jsx(H,{className:"h-3 w-3 mr-2"}),k?"Copied!":"Copy to Clipboard"]}),e.jsxs(x,{variant:"outline",size:"sm",className:"w-full",onClick:ee,disabled:c&&!c.allowed,children:[e.jsx(W,{className:"h-3 w-3 mr-2"}),"Download as Text File"]}),e.jsxs(x,{variant:"ghost",size:"sm",className:"w-full",onClick:se,children:[e.jsx(q,{className:"h-3 w-3 mr-2"}),"Clear"]})]})]}),u==="decode"&&g&&e.jsxs(l,{children:[e.jsx(o,{children:e.jsx(d,{className:"text-sm",children:"Actions"})}),e.jsxs(n,{className:"space-y-2",children:[e.jsxs(x,{variant:"default",size:"sm",className:"w-full",onClick:Y,disabled:c&&!c.allowed,children:[e.jsx(W,{className:"h-3 w-3 mr-2"}),"Download Image"]}),e.jsxs(x,{variant:"ghost",size:"sm",className:"w-full",onClick:ae,children:[e.jsx(q,{className:"h-3 w-3 mr-2"}),"Clear"]})]})]}),e.jsx(ue,{quotaCheck:c,resourceName:"downloads"}),e.jsx(l,{className:f?"bg-primary/5 border-primary/20":"bg-orange-500/10 border-orange-500/20",children:e.jsxs(n,{className:"p-3",children:[e.jsxs("p",{className:"text-sm font-medium mb-1",children:[f?"🚀 Member":"⚡ Guest"," Limit: ",w(j)]}),!f&&e.jsx(x,{variant:"ghost",size:"sm",className:"p-0 h-auto text-primary hover:underline",onClick:()=>V("/auth"),children:"Sign in for larger files →"})]})})]}),re=e.jsx("div",{className:"space-y-6",children:e.jsxs(l,{className:"p-4 border-0 bg-white dark:bg-gray-800",children:[e.jsx(o,{className:"p-0",children:e.jsx(d,{className:"text-sm",children:"About Base64 Images"})}),e.jsxs(n,{className:"p-0 text-[14px] text-muted-foreground leading-relaxed space-y-3 mt-3",children:[e.jsx("p",{children:"Base64 encoding converts binary image data into ASCII text, allowing images to be embedded directly in HTML, CSS, or JSON."}),e.jsxs("div",{children:[e.jsx("p",{className:"font-medium text-foreground mb-1",children:"Common Use Cases:"}),e.jsxs("ul",{className:"list-disc list-inside space-y-1",children:[e.jsx("li",{children:"Embedding small images in CSS"}),e.jsx("li",{children:"Inline images in HTML emails"}),e.jsx("li",{children:"Storing images in databases"}),e.jsx("li",{children:"API data transfer"})]})]}),e.jsxs("div",{className:"bg-muted/50 p-2 rounded text-xs",children:[e.jsx("strong",{children:"Note:"})," Base64 increases file size by ~33%. Use sparingly for small images only."]})]})]})});return e.jsx(oe,{title:(h==null?void 0:h.title)||"Image to Base64 Converter",description:(h==null?void 0:h.description)||"Convert images to Base64 and Base64 to images",controlsContent:te,codeContent:re,leftSidebarWidth:"w-80 xl:w-96",children:e.jsxs("div",{className:"space-y-6",children:[e.jsx(E,{value:u,onValueChange:s=>U(s),className:"hidden",children:e.jsxs(P,{children:[e.jsx(b,{value:"encode",children:"Encode"}),e.jsx(b,{value:"decode",children:"Decode"})]})}),u==="encode"&&e.jsxs("div",{className:"space-y-6",children:[!a&&e.jsx(l,{children:e.jsx(n,{className:"p-6",children:e.jsxs("div",{onDrop:K,onDragOver:_,onDragLeave:X,onClick:()=>{var s;return(s=D.current)==null?void 0:s.click()},className:`
2                                            border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all
3                                            ${y?"border-primary bg-primary/5":"border-muted-foreground

3/25 hover:border-primary/50 hover:bg-muted/50"}
4                                        `,children:[e.jsx(he,{className:`h-10 w-10 mx-auto mb-4 ${y?"text-primary":"text-muted-foreground"}`}),e.jsx("p",{className:"text-sm font-medium",children:y?"Drop image here":"Click or drag image to encode"}),e.jsx("p",{className:"text-sm text-muted-foreground mt-1",children:"Supports JPG, PNG, WebP, GIF, SVG"}),e.jsxs("p",{className:"text-xs text-muted-foreground mt-2",children:["Max size: ",w(j)]}),e.jsx("input",{ref:D,type:"file",accept:"image/*",className:"hidden",onChange:s=>{var t;return((t=s.target.files)==null?void 0:t[0])&&B(s.target.files[0])}})]})})}),a&&e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs(l,{children:[e.jsx(o,{children:e.jsxs(d,{className:"text-sm flex items-center gap-2",children:[e.jsx(T,{className:"h-4 w-4"}),"Image Preview"]})}),e.jsx(n,{children:e.jsx("div",{className:"aspect-video bg-muted rounded-lg overflow-hidden flex items-center justify-center",children:e.jsx("img",{src:a.previewUrl,alt:a.name,className:"max-w-full max-h-full object-contain"})})})]}),e.jsxs(l,{children:[e.jsx(o,{children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs(d,{className:"text-sm flex items-center gap-2",children:[e.jsx(G,{className:"h-4 w-4"}),"Base64 Output"]}),e.jsx(x,{variant:"ghost",size:"icon",className:"h-7 w-7",onClick:M,children:k?e.jsx(Q,{className:"h-3 w-3"}):e.jsx(H,{className:"h-3 w-3"})})]})}),e.jsx(n,{children:e.jsx(A,{value:I(),readOnly:!0,className:"font-mono text-xs min-h-[200px] resize-y bg-muted"})})]})]})]}),u==="decode"&&e.jsxs("div",{className:"space-y-6",children:[e.jsxs(l,{children:[e.jsx(o,{children:e.jsxs(d,{className:"text-sm flex items-center gap-2",children:[e.jsx(pe,{className:"h-4 w-4"}),"Paste Base64 String"]})}),e.jsxs(n,{className:"space-y-4",children:[e.jsx(A,{value:v,onChange:s=>R(s.target.value),placeholder:"Paste Base64 string or data URL here...",className:"font-mono text-xs min-h-[150px] resize-y"}),e.jsxs(x,{onClick:Z,disabled:!v.trim(),className:"w-full",children:[e.jsx(ge,{className:"h-4 w-4 mr-2"}),"Decode to Image"]})]})]}),g&&e.jsxs(l,{children:[e.jsx(o,{children:e.jsxs(d,{className:"text-sm flex items-center gap-2",children:[e.jsx(T,{className:"h-4 w-4"}),"Decoded Image"]})}),e.jsx(n,{children:e.jsx("div",{className:"aspect-video bg-muted rounded-lg overflow-hidden flex items-center justify-center",children:e.jsx("img",{src:g,alt:"Decoded",className:"max-w-full max-h-full object-contain"})})})]})]})]})})}export{rs as default};