import{R as y}from"./index-VlYqLXZ7.js";import{d as C,r as a,c as f,w as t,b as o,g as p,h as r,i,j as u,u as d,k as m,n as b,t as n,aO as j}from"./index-vCm-Bl4d.js";const B="/vue-pure-admin/static/png/avatar-WGeyy-vi.png",N={class:"card-header"},V={class:"font-medium"},z={class:"flex flex-wrap justify-center items-center text-center"},I={key:1,class:"mt-1"},G=C({name:"Cropping",__name:"index",setup(R){const e=a(),h=a(),v=a(!1),s=a("");function g({base64:_,blob:l,info:c}){e.value=c,s.value=_}return(_,l)=>{const c=o("el-link"),x=o("el-image"),w=o("el-popover"),k=o("el-card");return p(),f(k,{shadow:"never"},{header:t(()=>[r("div",N,[r("span",V,[i(" 图片裁剪组件，基于开源的 "),u(c,{href:"https://fengyuanchen.github.io/cropperjs/",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:t(()=>[i(" cropperjs ")]),_:1}),i(" 进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单） ")])])]),default:t(()=>[u(w,{visible:v.value,placement:"right",width:"300px",teleported:!1},{reference:t(()=>[u(d(y),{ref_key:"refCropper",ref:h,class:"w-[30vw]",src:d(B),circled:"",onCropper:g,onReadied:l[0]||(l[0]=A=>v.value=!0)},null,8,["src"])]),default:t(()=>[r("div",z,[s.value?(p(),f(x,{key:0,src:s.value,"preview-src-list":Array.of(s.value),fit:"cover"},null,8,["src","preview-src-list"])):m("",!0),e.value?(p(),b("div",I,[r("p",null," 图像大小："+n(parseInt(e.value.width))+" × "+n(parseInt(e.value.height))+"像素 ",1),r("p",null," 文件大小："+n(d(j)(e.value.size))+"（"+n(e.value.size)+" 字节） ",1)])):m("",!0)])]),_:1},8,["visible"])]),_:1})}}});export{G as default};