https://toolx.app/_nuxt/DOZly5iR.js

1import{_ as D,o as i,c,a as n,d as $,f as j,v as E,F as G,r as A,t as g,g as W,h as I,i as r,j as _,k as J}from"./jNA8CX70.js";import{u as q}from"./DNP2VIvT.js";const H={class:"tool-page"},K={class:"card"},Q={class:"controls"},Y=["value"],X=["disabled"],Z=["disabled"],ee={key:0,class:"error-msg"},te={class:"preview-grid"},ae={class:"preview-box"},le=["src"],ne={key:1},oe={class:"preview-box"},se=["src"],re={key:1},ie=["href","download"],ue={__name:"ImageConverter",setup(P){const U=r(null),v=r(null),p=r(""),m=r("image/webp"),f=r(.9),u=r(""),h=r(""),w=r(0),b=r(!1),d=r(""),y=[{label:"JPG",value:"image/jpeg",ext:"jpg",lossy:!0},{label:"PNG",value:"image/png",ext:"png"},{label:"WebP",value:"image/webp",ext:"webp",lossy:!0},{label:"ICO",value:"image/x-icon",ext:"ico"},{label:"SVG",value:"image/svg+xml",ext:"svg"}],O=_(()=>v.value?R(v.value.size):"-"),S=_(()=>w.value?R(w.value):"-"),B=_(()=>y.find(e=>e.value===m.value)||y[0]),k=_(()=>!!B.value.lossy);function R(e){if(!e)return"0 B";const t=["B","KB","MB"];let a=e,l=0;for(;a>=1024&&l<t.length-1;)a/=1024,l+=1;return`${a.toFixed(a>=10||l===0?0:1)} ${t[l]}`}function L(){u.value&&URL.revokeObjectURL(u.value),u.value="",h.value="",w.value=0}function C(e){const t=e.target.files?.[0];if(t){if(!t.type.startsWith("image/")){d.value="请选择图片文件";return}v.value=t,d.value="",L(),p.value&&URL.revokeObjectURL(p.value),p.value=URL.createObjectURL(t)}}function F(e){return new Promise((t,a)=>{const l=new Image,o=URL.createObjectURL(e);l.onload=()=>{URL.revokeObjectURL(o),t(l)},l.onerror=()=>{URL.revokeObjectURL(o),a(new Error("图片读取失败"))},l.src=o})}function x(e,t,a){return new Promise((l,o)=>{e.toBlob(s=>{s?l(s):o(new Error("当前浏览器不支持该格式转换"))},t,a)})}function V(e){return new Promise((t,a)=>{const l=new FileReader;l.onload=()=>t(l.result),l.onerror=()=>a(new Error("Image read failed")),l.readAsDataURL(e)})}async function z(e){const t=await x(e,"image/png"),a=await V(t),l=`<svg xmlns="http://www.w3.org/2000/svg" width="${e.width}" height="${e.height}" viewBox="0 0 ${e.width} ${e.height}"><image href="${a}" width="${e.width}" height="${e.height}" preserveAspectRatio="xMidYMid meet"/></svg>`;return new Blob([l],{type:"image/svg+xml"})}async function M(e){const t=await x(e,"image/png"),a=new Uint8Array(await t.arrayBuffer()),l=22,o=new Uint8Array(l+a.length),s=new DataView(o.buffer);return s.setUint16(0,0,!0),s.setUint16(2,1,!0),s.setUint16(4,1,!0),o[6]=e.width>=256?0:e.width,o[7]=e.height>=256?0:e.height,o[8]=0,o[9]=0,s.setUint16(10,1,!0),s.setUint16(12,32,!0),s.setUint32(14,a.length,!0),s.setUint32(18,l,!0),o.set(a,l),new Blob([o],{type:"image/x-icon"})}async function N(e){return m.value==="image/svg+xml"?z(e):m.value==="image/x-icon"?M(e):x(e,m.value,k.value?f.value:void 0)}async function T(){if(!v.value){d.value="请先选择图片";return}b.value=!0,d.value="",L();try{const e=await F(v.value),t=document.createElement("canvas");t.width=e.naturalWidth,t.height=e.naturalHeight,t.getContext("2d").drawImage(e,0,0);const l=await N(t);u.value=URL.createObjectURL(l),h.value=`${v.value.name.replace(/\.[^.]+$/,"")}.${B.value.ext}`,w.value=l.size}catch(e){d.value=e.message}finally{b.value=!1}}return(e,t)=>(i(),c("div",H,[t[5]||(t[5]=n("h1",{class:"page-title"},"🖼️ 图片格式转换",-1)),t[6]||(t[6]=n("p",{class:"intro"},"上传图片后可在本地转换为 WebP、PNG 或 JPG，适合网页图片优化和格式兼容处理。",-1)),n("div",K,[n("input",{ref_key:"fileInput",ref:U,class:"file-input",type:"file",accept:"image/*,.jpg,.jpeg,.png,.webp,.ico,.svg,.gif,.bmp,.avif",onChange:C},null,544),n("div",Q,[n("label",null,[t[2]||(t[2]=$(" 输出格式 ",-1)),j(n("select",{"onUpdate:modelValue":t[0]||(t[0]=a=>m.value=a)},[(i(),c(G,null,A(y,a=>n("option",{key:a.value,value:a.value},g(a.label),9,Y)),64))],512),[[E,m.value]])]),n("label",null,[$(" 图片质量 "+g(Math.round(f.value*100))+"% ",1),j(n("input",{"onUpdate:modelValue":t[1]||(t[1]=a=>f.value=a),type:"range",min:"0.1",max:"1",step:"0.05",disabled:!k.value},null,8,X),[[W,f.value,void 0,{number:!0}]])]),n("button",{class:"action-btn primary",disabled:b.value,onClick:T},g(b.value?"转换中...":"转换图片"),9,Z)]),d.value?(i(),c("div",ee,g(d.value),1)):I("",!0),n("div",te,[n("div",ae,[t[3]||(t[3]=n("h2",null,"原图",-1)),p.value?(i(),c("img",{key:0,src:p.value,alt:"原图预览"},null,8,le)):(i(),c("p",ne,"请选择一张图片")),n("span",null,"大小："+g(O.value),1)]),n("div",oe,[t[4]||(t[4]=n("h2",null,"转换结果",-1)),u.value?(i(),c("img",{key:0,src:u.value,alt:"转换结果预览"},null,8,se)):(i(),c("p",re,"转换后会显示预览")),n("span",null,"大小："+g(S.value),1),u.value?(i(),c("a",{key:2,class:"download-l

1ink",href:u.value,download:h.value},"下载 "+g(h.value),9,ie)):I("",!0)])])])]))}},ce=D(ue,[["__scopeId","data-v-223176f6"]]),ge={__name:"convert",setup(P){return q("/image/convert"),(U,v)=>(i(),J(ce))}};export{ge as default};