UNPKG

image-cropper-next

Version:

A Vue 3 image cropper component for Vite

github.com/yi-boide/vue-image-cropper

yi-boide/vue-image-cropper

2 lines (1 loc) • 40.1 kB
1
2
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@charset \"UTF-8\";.fade-enter-active[data-v-58a65feb],.fade-leave-active[data-v-58a65feb]{transition:opacity .3s}.fade-enter[data-v-58a65feb],.fade-leave-to[data-v-58a65feb]{opacity:0}.fade-in-enter[data-v-58a65feb]{margin-top:-50px;opacity:0;transition:margin-top .2s,opacity .2s}.fade-out-enter[data-v-58a65feb],.fade-in-active[data-v-58a65feb]{transition:margin-top .2s,opacity .2s}.fade-out-active[data-v-58a65feb]{margin-top:-50px;opacity:0;transition:margin-top .2s,opacity .2s}.image-cropper .mask[data-v-58a65feb]{background:rgba(0,0,0,.6);position:fixed;overflow-y:scroll;overflow-x:hidden;top:0;left:0;width:100%;height:100%;z-index:999}.image-cropper .dialog-box[data-v-58a65feb]{clear:both}.image-cropper .dialog-box-modal[data-v-58a65feb]{position:relative;padding-top:100px;padding-bottom:100px;clear:both}.image-cropper .dialog-main-modal[data-v-58a65feb]{line-height:125%;font-size:16px;position:absolute;top:100px;left:50%;margin-bottom:100px;transform:translate(-50%);border:1px solid rgba(0,0,0,.8);border-radius:3px;box-sizing:border-box;padding:15px 15px 0;background:#fff;z-index:1000;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;animation:dialogShow-58a65feb .3s}.image-cropper .dialog-main[data-v-58a65feb]{line-height:125%;font-size:16px;box-sizing:border-box;background:#fff;z-index:1000;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .i-dialog-footer[data-v-58a65feb]{display:block;width:100%;height:40px;margin-top:15px;margin-bottom:15px}.image-cropper .i-dialog-footer .choose[data-v-58a65feb]{display:inline-flex}.image-cropper .i-dialog-footer .btn-group[data-v-58a65feb]{display:inline-flex;float:right}.image-cropper .tool-main[data-v-58a65feb]{box-sizing:border-box}.image-cropper .tool-main .tool-title[data-v-58a65feb]{margin-bottom:15px;font-size:20px;color:#333}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]{float:right;cursor:pointer;display:block;color:#000;width:22px;height:22px;line-height:22px;border-radius:50%;margin:0;padding:0;transition:transform .5s;position:relative}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:after,.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:before{content:\"\";position:absolute;top:50%;left:50%;width:18px;height:2px;background:#666}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:after{transform:translate(-50%,-50%) rotate(45deg)}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:before{transform:translate(-50%,-50%) rotate(-45deg)}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:hover{transform:scale(1.2)}.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:hover:after,.image-cropper .tool-main .tool-title .close-icon[data-v-58a65feb]:hover:before{background:#333}@keyframes dialogShow-58a65feb{0%{margin-top:-50px;opacity:0}to{margin-top:0;opacity:1}}.image-cropper .tool-box[data-v-58a65feb]{border:1px solid #dedede;background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);background-color:#eee;background-size:30px 30px;background-position:0 0,15px 15px;position:relative}.image-cropper .tool-box .tips[data-v-58a65feb]{position:absolute;top:50%;left:50%;z-index:101;transform:translate(-50%,-50%)}.image-cropper .canvas[data-v-58a65feb]{position:absolute;top:0;left:0;z-index:98}.image-cropper .canvas-select-box[data-v-58a65feb]{position:absolute;top:0;left:0;z-index:99}@keyframes zi-antBorder-58a65feb{0%{background-position:0px 0px}50%{background-position:0px 5px}to{background-position:0px 10px}}.image-cropper .tool-box-control[data-v-58a65feb]{background:rgba(255,255,255,0);position:absolute;z-index:101;box-sizing:border-box}.image-cropper .tool-box-control-box[data-v-58a65feb]{width:100%;height:100%;position:relative;background:transparent;z-index:103;pointer-events:none}.image-cropper .tool-box-control .control-box[data-v-58a65feb]{width:100%;height:100%;position:absolute;cursor:move;z-index:1;pointer-events:none}.image-cropper .tool-box-control .control-box-inner-line[data-v-58a65feb]{position:absolute;z-index:1;background-size:10px 10px;background-image:linear-gradient(-45deg,var(--image-cropper-primary-color, #409eff) 25%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 50%,var(--image-cropper-primary-color, #409eff) 50%,var(--image-cropper-primary-color, #409eff) 75%,rgba(255,255,255,0) 75%,rgba(255,255,255,0));-ms-animation:zi-antBorder-58a65feb .8s linear 0s infinite normal;-moz-animation:zi-antBorder-58a65feb .8s linear 0s infinite normal;-webkit-animation:zi-antBorder-58a65feb .8s linear 0s infinite normal;animation:zi-antBorder-58a65feb .8s linear 0s infinite normal;pointer-events:none}.image-cropper .tool-box-control .control-box-inner-line-top[data-v-58a65feb]{height:1px;width:100%;top:-1px}.image-cropper .tool-box-control .control-box-inner-line-bottom[data-v-58a65feb]{height:1px;width:100%;bottom:-1px}.image-cropper .tool-box-control .control-box-inner-line-right[data-v-58a65feb]{height:100%;width:1px;right:-1px;top:0}.image-cropper .tool-box-control .control-box-inner-line-left[data-v-58a65feb]{height:100%;width:1px;left:-1px;top:0}.image-cropper .tool-box-control .select-area[data-v-58a65feb]{display:block;width:260px;text-align:right;color:#fff;position:absolute;top:-20px;right:0;font-size:10px}.image-cropper .tool-box-control-line[data-v-58a65feb]{position:absolute;z-index:1;background:transparent;box-sizing:border-box;border-width:0;border-style:dashed;border-color:var(--image-cropper-primary-color, #409eff)}.image-cropper .tool-box-control-line[data-v-58a65feb]:nth-child(2){top:33%;width:100%;height:1px;border-bottom-width:1px}.image-cropper .tool-box-control-line[data-v-58a65feb]:nth-child(3){top:66%;width:100%;height:1px;border-bottom-width:1px}.image-cropper .tool-box-control-line[data-v-58a65feb]:nth-child(4){left:33%;height:100%;width:1px;border-right-width:1px}.image-cropper .tool-box-control-line[data-v-58a65feb]:nth-child(5){left:66%;height:100%;width:1px;border-right-width:1px}.image-cropper .tool-box-control .control-btn[data-v-58a65feb]{border:1px solid rgba(255,255,255,.5);box-sizing:border-box;width:6px;height:6px;background:var(--image-cropper-primary-color, #409eff);position:absolute;border-radius:50%;z-index:999;pointer-events:auto!important}.image-cropper .tool-box-control .control-btn.left-up[data-v-58a65feb]{top:0;left:0;margin-left:-3px;margin-top:-3px;cursor:se-resize}.image-cropper .tool-box-control .control-btn.left-down[data-v-58a65feb]{bottom:0;left:0;margin-left:-3px;margin-bottom:-3px;cursor:sw-resize}.image-cropper .tool-box-control .control-btn.right-up[data-v-58a65feb]{top:0;right:0;margin-right:-3px;margin-top:-3px;cursor:sw-resize}.image-cropper .tool-box-control .control-btn.right-down[data-v-58a65feb]{bottom:0;right:0;margin-right:-3px;margin-bottom:-3px;cursor:se-resize}.image-cropper .tool-box-control .control-btn.top-center[data-v-58a65feb]{top:0;right:50%;margin-right:-3px;margin-top:-3px;cursor:s-resize}.image-cropper .tool-box-control .control-btn.down-center[data-v-58a65feb]{bottom:0;right:50%;margin-right:-3px;margin-bottom:-3px;cursor:s-resize}.image-cropper .tool-box-control .control-btn.left-center[data-v-58a65feb]{top:50%;left:0;margin-left:-3px;margin-top:-3px;cursor:e-resize}.image-cropper .tool-box-control .control-btn.right-center[data-v-58a65feb]{top:50%;right:0;margin-right:-3px;margin-top:-3px;cursor:e-resize}.image-cropper .btn[data-v-58a65feb]{display:inline-block;text-align:center;background:#dedede;height:32px;line-height:1;padding:8px 15px;box-sizing:border-box;border-radius:4px;cursor:pointer;border:1px solid;font-size:14px;transition:background .3s,color .3s;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .btn[disabled][data-v-58a65feb]{opacity:.6}.image-cropper .btn[disabled][data-v-58a65feb]:hover{opacity:.6;color:#333!important;border-color:#dedede!important;background-color:#fff!important}.image-cropper .btn.btn-default[data-v-58a65feb]{color:#333;border-color:#dcdfe6;background-color:#fff;transition:background .3s,color .3s}.image-cropper .btn.btn-default[data-v-58a65feb]:hover{color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color-light, #c6e2ff);background-color:#ecf5ff}.image-cropper .btn.btn-primary[data-v-58a65feb]{color:#fff;background-color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color, #409eff);transition:background .3s,color .3s}.image-cropper .btn.btn-primary[data-v-58a65feb]:hover{background:var(--image-cropper-primary-color-hover, #66b1ff);border-color:var(--image-cropper-primary-color-hover, #66b1ff);color:#fff}.image-cropper .btn.btn-warning[data-v-58a65feb]{color:#fff;background-color:var(--image-cropper-warning-color, #e6a23c);border-color:var(--image-cropper-warning-color, #e6a23c)}.image-cropper .btn.btn-warning[data-v-58a65feb]:hover{color:#fff;background-color:var(--image-cropper-warning-color-hover, #ebb563);border-color:var(--image-cropper-warning-color-hover, #ebb563);transition:background .3s,color .3s}.image-cropper .btn.btn-primary-plain[data-v-58a65feb]{color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color-light, #c6e2ff);background-color:#ecf5ff;transition:background .3s,color .3s}.image-cropper .btn.btn-primary-plain[data-v-58a65feb]:hover{background:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color, #409eff);color:#fff}.image-cropper .btn.btn-xs[data-v-58a65feb]{height:26px;line-height:26px;padding:0 10px;font-size:12px}.image-cropper .file-input[data-v-58a65feb]{width:1px;height:1px;border:none;opacity:0}.image-cropper .dock-main[data-v-58a65feb]{position:absolute;z-index:1002;bottom:5px;left:5px;opacity:.5;transition:opacity .5s;box-sizing:border-box;padding:5px;border-radius:5px}.image-cropper .dock-main[data-v-58a65feb]:hover{opacity:1}.image-cropper .dock-main .dock-btn[data-v-58a65feb]{font-size:10px;cursor:pointer;display:inline-block;margin-right:4px;color:var(--image-cropper-primary-color, #409eff);border:1px solid var(--image-cropper-primary-color-light, #c6e2ff);background-color:#ecf5ff;padding:1px 4px;border-radius:3px;height:20px;line-height:20px;transition:background .2s,color .2s;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .dock-main .dock-btn[data-v-58a65feb]:hover{color:#fff;background-color:var(--image-cropper-primary-color, #409eff);border-color:var(--image-cropper-primary-color, #409eff)}.image-cropper .dock-main .dock-btn-scroll-bar[data-v-58a65feb]{display:inline-block;margin-right:4px;margin-left:10px;background:var(--image-cropper-primary-color, #409eff);width:200px;height:10px;border-radius:5px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.image-cropper .dock-main .scroll-bar-control[data-v-58a65feb]{position:absolute;cursor:pointer;background:#fff;border:2px solid var(--image-cropper-primary-color, #409eff);box-sizing:border-box;border-radius:50%;width:20px;height:20px;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 3px #1f5184}.image-cropper .dock-main .scroll-bar-text[data-v-58a65feb]{position:absolute;cursor:pointer;background:rgba(0,0,0,.7);color:#fff;top:-16px;height:16px;line-height:16px;text-align:center;font-size:10px;white-space:nowrap;min-width:50px;border-radius:3px;transform:translate(-50%,-50%)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(function(u,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(u=typeof globalThis<"u"?globalThis:u||self,t(u["image-cropper"]={},u.Vue))})(this,function(u,t){"use strict";const de={name:"image-cropper-next",private:!1,version:"0.0.9",description:"A Vue 3 image cropper component for Vite",main:"dist/index.js",module:"dist/index.mjs",style:"dist/style.css",type:"module",typings:"dist/types/index.d.ts","web-types":"dist/smartips/web-types.json",keywords:["image-cropper-next","image-cropper","vue3","typescript","vite","vue","cropper","wisdoms","marvin"],scripts:{dev:"vite",clean:"rimraf ./dist",build:"pnpm clean && pnpm dts && vite build && pnpm generate:types",dts:"rimraf ./tsc/type && vue-tsc --declaration --emitDeclarationOnly -p ./tsconfig.declaration.json","generate:types":"rimraf ./dist/types && node scripts/generate-types.cjs",preview:"vite preview"},publishConfig:{access:"public",registry:"https://registry.npmjs.org/"},repository:{type:"git",url:"https://github.com/yi-boide/vue-image-cropper.git",directory:"packages/ImageCropper"},bugs:{url:"https://github.com/yi-boide/vue-image-cropper/issues"},license:"MIT",files:["dist","package.json","README.md"],author:{name:"Marvin",email:"454846659@qq.com"},dependencies:{"fs-extra":"^11.1.1","markdown-it":"^13.0.2",vue:"^3.3.4"},devDependencies:{"@types/node":"^20.8.7","@vitejs/plugin-vue":"^4.2.3",rimraf:"^5.0.5",sass:"^1.69.4",typescript:"^5.0.2",vite:"^4.4.5","vue-tsc":"^1.8.5"}},G={crossOrigin:{type:Boolean,default:!1,required:!1},crossOriginHeader:{type:String,default:"*",required:!1},label:{type:String,default:"选择图片",required:!1},isModal:{type:Boolean,default:!0,required:!1},lockScroll:{type:Boolean,default:!0,required:!1},showChooseBtn:{type:Boolean,default:!0,required:!1},boxWidth:{type:Number,default:800,required:!1},boxHeight:{type:Number,default:400,required:!1},cutWidth:{type:Number,default:200,required:!1},cutHeight:{type:Number,default:200,required:!1},rate:{type:String,default:null,required:!1},tool:{type:Boolean,default:!0,required:!1},footer:{type:Boolean,default:!0,required:!1},toolBg:{type:String,default:"#fff",required:!1},imgMove:{type:Boolean,default:!0,required:!1},sizeChange:{type:Boolean,default:!0,required:!1},originalGraph:{type:Boolean,default:!1,required:!1},moveAble:{type:Boolean,default:!0,required:!1},previewMode:{type:Boolean,default:!0,required:!1},watermarkText:{type:String,default:"",required:!1},watermarkTextFont:{type:String,default:"12px Sans-serif",required:!1},watermarkTextColor:{type:String,default:"#fff",required:!1},watermarkTextX:{type:Number,default:.95,required:!1},watermarkTextY:{type:Number,default:.95,required:!1},smallToUpload:{type:Boolean,default:!1,required:!1},saveCutPosition:{type:Boolean,default:!1,required:!1},scaleAble:{type:Boolean,default:!0,required:!1},fileType:{type:String,default:"png",required:!1},toolBoxOverflow:{type:Boolean,default:!0,required:!1},quality:{type:Number,default:1,required:!1},isFinishClose:{type:Boolean,default:!0,required:!1}},b=I=>(t.pushScopeId("data-v-58a65feb"),I=I(),t.popScopeId(),I),ce={class:"image-cropper"},me={class:"tool-main"},ge={key:0,class:"tool-title"},fe={class:"tips"},he={key:0,class:"dock-btn"},pe={key:4,class:"dock-btn-scroll-bar"},xe={class:"tool-box-control-box"},we={class:"control-box"},Be=b(()=>t.createElementVNode("div",{class:"control-box-inner-line control-box-inner-line-top"},null,-1)),ye=b(()=>t.createElementVNode("div",{class:"control-box-inner-line control-box-inner-line-bottom"},null,-1)),ue=b(()=>t.createElementVNode("div",{class:"control-box-inner-line control-box-inner-line-left"},null,-1)),be=b(()=>t.createElementVNode("div",{class:"control-box-inner-line control-box-inner-line-right"},null,-1)),Ie={class:"select-area"},Ce=b(()=>t.createElementVNode("div",{class:"tool-box-control-line"},null,-1)),ke=b(()=>t.createElementVNode("div",{class:"tool-box-control-line"},null,-1)),Ne=b(()=>t.createElementVNode("div",{class:"tool-box-control-line"},null,-1)),Te=b(()=>t.createElementVNode("div",{class:"tool-box-control-line"},null,-1)),Me=["width","height"],Ve=["width","height"],Ee={key:0,class:"i-dialog-footer"},Se={key:0,class:"btn btn-primary btn-primary-plain"},ve={class:"btn-group"},He=b(()=>t.createElementVNode("button",{type:"button",class:"btn btn-default"},"取消",-1)),qe=["disabled"],De=b(()=>t.createElementVNode("div",{style:{clear:"both"}},null,-1)),Re=t.defineComponent({name:"ImageCropper",__name:"index",props:G,emits:["realTime","error","clearAll","confirm"],setup(I,{expose:R,emit:y}){const n=I,v={img:void 0,sx:0,sy:0,swidth:0,sheight:0,x:0,y:0,width:0,height:0},N=t.ref(),J=t.ref(),Q=t.ref(),H=t.ref(),F=t.ref(),O=t.ref(),$=t.ref(),Oe=t.ref(),e=t.reactive({visible:!1,fileName:"",cutImageObj:null,printImageTimmer:null,toolBoxPosition:{x:0,y:0},drawImg:{...v},toolBox:{disable:!0,width:n.boxWidth/2,height:n.boxHeight/2,x:0,y:0,boxMove:{start:{x:0,y:0},moveTo:{x:0,y:0}}},dropImg:{active:!1,pageX:0,pageY:0,params:{}},rotateImg:{angle:0},rotateControl:{active:!1,start:{position:0,x:0,y:0},position:100},scaleImg:{rate:0,params:{}},controlBox:{disable:!0,btnName:"",start:{x:0,y:0,width:0,height:0}},selectBox:!1,selectBoxColor:"rgba(0,0,0,0.6)",isFlipHorizontal:!1,isFlipVertically:!1}),E=t.computed(()=>{const{fileName:o}=e,{fileType:l}=n,r=o.lastIndexOf(".");return o.substr(0,r+1)+(l==="jpeg"?"jpg":l)}),$e=t.computed(()=>{let o;return n.originalGraph?o=e.toolBox.width/(e.drawImg.width/e.drawImg.swidth):o=e.toolBox.width,Number(o).toFixed(0)}),ze=t.computed(()=>{let o;return n.originalGraph?o=e.toolBox.height/(e.drawImg.width/e.drawImg.swidth):o=e.toolBox.height,Number(o).toFixed(0)}),We=t.computed(()=>{let o;return o=e.toolBoxPosition.x,Number(o).toFixed(0)}),Ae=t.computed(()=>{let o;return o=e.toolBoxPosition.y,Number(o).toFixed(0)}),B=t.computed(()=>{let o=1;if(n.rate){const l=n.rate.split(":");o=Number(l[0])/Number(l[1])}return o}),{visible:Z,drawImg:T,toolBox:S,dropImg:Ye,rotateImg:je,rotateControl:z,controlBox:Ue}=t.toRefs(e),W=o=>{const l=r=>{var i;if(N.value&&(N.value.onmousewheel=q,(i=N.value)==null||i.addEventListener("DOMMouseScroll",q)),n.isModal){n.lockScroll&&(document.body.style.overflowY="hidden");const a=J.value.offsetHeight+200,d=window.innerHeight;let s=Q.value;a>d?s.style.overflowY="scroll":s.style.overflowY="hidden"}r&&typeof r=="function"&&r()};if(o&&typeof o=="object"&&o.src){let r=new Image;n.crossOrigin&&(r.crossOrigin=n.crossOriginHeader),r.name=o.name,r.setAttribute("name",o.name),r.style.position="fixed",r.style.top="-5000px",r.style.opacity="0",r.onerror=i=>{console.error("图片加载失败"),y("error",{event:i,msg:"图片加载失败"}),te()},r.onload=()=>{if(r.complete)e.visible=!0,t.nextTick(()=>{l(()=>{Pe(r)})});else throw new Error("图片加载失败")},r.src=o.src,e.cutImageObj=r,document.body.appendChild(r)}else e.visible=!0,t.nextTick(()=>{l()})},V=()=>{Ge(),n.isModal&&(n.lockScroll&&(document.body.style.overflowY="scroll"),t.nextTick(()=>{e.visible=!1}))},A=()=>{var o;(o=$.value)==null||o.click()},Pe=o=>{const l=o.height,r=o.width,{boxWidth:i,boxHeight:a}=n;let d,s={...e.drawImg};e.fileName=o.name,s.img=o,e.scaleImg.rate=r/l,l<a&&r<i?(d=1,s.x=(i-r)/2,s.y=(a-l)/2):r/l<=i/a?(d=a/l,s.x=(i-r*d)/2):(d=i/r,s.y=(a-l*d)/2),s.swidth=r,s.sheight=l,s.width=r*d,s.height=l*d,s.x=(i-s.width)/2,s.y=(a-s.height)/2,e.drawImg=s,C(),_()},Xe=o=>{const l=o.target;let r;if(l!=null&&l.files)r=l.files[0]||null;else return console.error("IE9及以下需要自己传入image对象"),!1;if(r){e.fileName=r.name;const i=new FileReader;i.readAsDataURL(r),i.onload=a=>{var f;const d=(f=a.target)==null?void 0:f.result,s=document.createElement("img");s.src=d;let m=setInterval(()=>{if(i.readyState===2){if(clearInterval(m),!n.sizeChange&&n.smallToUpload&&s.width<=n.cutWidth&&s.height<=n.cutHeight){n.isFinishClose&&V(),y("confirm",{fileName:E.value,file:r});return}const g=s.height,c=s.width,{boxWidth:x,boxHeight:p}=n;let w,h={...e.drawImg};h.img=s,e.scaleImg.rate=c/g,g<p&&c<x?(w=1,h.x=(x-c)/2,h.y=(p-g)/2):c/g<=x/p?(w=p/g,h.x=(x-c*w)/2):(w=x/c,h.y=(p-g*w)/2),h.swidth=c,h.sheight=g,h.width=c*w,h.height=g*w,h.x=(x-h.width)/2,h.y=(p-h.height)/2,e.drawImg=h,C(),_()}},200)}}},_=()=>{(e.toolBox.width===n.boxWidth/2||e.toolBox.height===n.boxHeight/2||n.saveCutPosition===!1)&&(e.toolBox.width=n.cutWidth>n.boxWidth?n.boxWidth:n.cutWidth,e.toolBox.height=n.cutHeight>n.boxHeight?n.boxHeight:n.cutHeight),(e.toolBox.x===0&&e.toolBox.y===0||n.saveCutPosition===!1)&&(e.toolBox.x=n.boxWidth/2-e.toolBox.width/2,e.toolBox.y=n.boxHeight/2-e.toolBox.height/2),oe().then(()=>{C()}),Y(e.toolBox.width,e.toolBox.height,e.toolBox.x,e.toolBox.y)},Le=()=>!!(window.File&&window.FileList&&window.FileReader&&window.Blob&&navigator.userAgent.indexOf("Edge")===-1&&navigator.userAgent.indexOf("MSIE")===-1&&navigator.userAgent.indexOf("Trident")===-1),ee=(o,l)=>{let r=o.split(","),i=r[0].match(/:(.*?);/)[1],a=atob(r[1]),d=a.length,s=new Uint8Array(d);for(;d--;)s[d]=a.charCodeAt(d);if(Le())return new File([s],l,{type:i});throw"不支持File对象"},Ge=()=>{const o=H.value;o.getContext("2d").clearRect(0,0,o.width,o.height);const r=F.value;r.getContext("2d").clearRect(0,0,r.width,r.height);const{sx:a,sy:d}=e.drawImg;e.drawImg={...v,sx:a,sy:d},e.isFlipHorizontal=!1,e.isFlipVertically=!1,$.value.value="",e.rotateImg.angle=0,L(),te(),y("clearAll")},te=()=>{e.cutImageObj!==null&&e.cutImageObj!==void 0&&typeof e.cutImageObj.remove=="function"&&e.cutImageObj.remove(),e.cutImageObj=null},Y=(o,l,r,i)=>{const{boxWidth:a,boxHeight:d}=n,{width:s,height:m,x:f,y:g}=e.drawImg;n.toolBoxOverflow||(o<1&&(o=1),l<1&&(l=1),o>s&&(o=s),l>m&&(l=m),r<e.drawImg.x&&(r=e.drawImg.x),i<g&&(i=g),r>f+s-o&&(r=f+s-o),i>g+m-l&&(i=g+m-l)),o>a&&(o=a),l>d&&(l=d),r<0&&(r=0),i<0&&(i=0);const c=O.value,x=F.value,p=x.getContext("2d");p.fillStyle=e.selectBoxColor,p.clearRect(0,0,x.width,x.height),p.fillRect(0,0,x.width,x.height);let w,h;n.rate&&n.rate!==""?B.value>=1?(w=o,h=o/B.value,h+i>g+m&&(h=g+m-i,w=h*B.value)):(w=l*B.value,h=l):(w=o,h=l),e.toolBox.width=Math.abs(w),e.toolBox.height=Math.abs(h),c.style.width=Math.abs(w)+"px",c.style.height=Math.abs(h)+"px",e.toolBox.boxMove.moveTo.x=r,e.toolBox.boxMove.moveTo.y=i,w<0&&(r=r+w),h<0&&(i=i+h),r+e.toolBox.width>a&&(r=a-e.toolBox.width),r<0&&(r=0),i+e.toolBox.height>d&&(i=d-e.toolBox.height),i<0&&(i=0),e.toolBoxPosition.x=r,e.toolBoxPosition.y=i,c.style.left=r+"px",c.style.top=i+"px",p.clearRect(r,i,Math.abs(w),Math.abs(h)),e.printImageTimmer&&clearTimeout(e.printImageTimmer),e.printImageTimmer=setTimeout(()=>{M(!0)},100)},oe=()=>new Promise(o=>{if(!n.toolBoxOverflow){const{width:l,height:r,x:i,y:a}=e.toolBox,{width:d,height:s,x:m,y:f}=e.drawImg;if(d<l||s<r){const g=d/s;d<l&&(e.drawImg.width=l,e.drawImg.height=l/g),e.drawImg.height<r&&(e.drawImg.height=r,e.drawImg.width=s*g),e.drawImg.x=(n.boxWidth-d)/2,e.drawImg.y=(n.boxHeight-s)/2}console.log("state.drawImg.y > state.toolBox.y",f+s,a+r),m>i&&(e.drawImg.x=i),m+d<i+l&&(e.drawImg.x=i+l-d),f>a&&(e.drawImg.y=a),f+s<a+r&&(e.drawImg.y=a+r-s)}o()}),q=o=>{if(e.drawImg.img&&n.scaleAble){let l=1;const r=o||window.event;r.deltaY?l=-(r.deltaY/40):r.detail&&(l=r.detail);const{width:i,x:a,y:d}=e.drawImg;let s=50;e.drawImg.x=e.drawImg.width-l*9>s?a+l*3:a,e.drawImg.y=e.drawImg.width-l*9>s?d+l*3:d,e.drawImg.width=e.drawImg.width-l*9>s?i-l*9:s,e.drawImg.height=i/e.scaleImg.rate,oe().then(()=>{C(),e.printImageTimmer&&clearTimeout(e.printImageTimmer),e.printImageTimmer=setTimeout(()=>{M(!0)},100)})}return o.preventDefault(),!1},j=()=>{const{width:o,height:l,x:r,y:i}=e.toolBox;o<0&&(e.toolBox.boxMove.moveTo.x=r-o),e.toolBox.height<0&&(e.toolBox.boxMove.moveTo.y=i-l),e.toolBox.width=Math.abs(o),e.toolBox.height=Math.abs(l)},Ke=o=>{const l=O.value;e.toolBox.x=parseInt(l.style.left.split("px")[0]),e.toolBox.y=parseInt(l.style.top.split("px")[0]),e.toolBox.disable=!1,e.dropImg.active=!1,e.toolBox.boxMove.start={x:o.pageX,y:o.pageY}},Je=o=>{if(e.dropImg.active&&re(o),!e.toolBox.disable&&n.moveAble){const l=o.pageX-e.toolBox.boxMove.start.x,r=o.pageY-e.toolBox.boxMove.start.y,i=e.toolBox.x+l,a=e.toolBox.y+r;Y(e.toolBox.width,e.toolBox.height,i,a)}},Qe=()=>{e.toolBox.disable=!0,e.printImageTimmer&&clearTimeout(e.printImageTimmer),e.printImageTimmer=setTimeout(()=>{M(!0)},100),j()},le=()=>{const{x:o,y:l}=e.toolBoxPosition;e.toolBox.x=o,e.toolBox.y=l,e.toolBox.disable=!0,e.dropImg.active=!1,j()},C=()=>{if(e.drawImg.img){const o=H.value,l=o.getContext("2d");l.font="18px bold 黑体",l.fillStyle="#ff0",l.textAlign="center",l.textBaseline="middle",l.save(),l.clearRect(0,0,o.width,o.height),l.translate(e.drawImg.x+e.drawImg.width/2,e.drawImg.y+e.drawImg.height/2),l.rotate(e.rotateImg.angle*Math.PI/180),l.translate(-(e.drawImg.x+e.drawImg.width/2),-(e.drawImg.y+e.drawImg.height/2)),l.translate(e.drawImg.x,e.drawImg.y),l.scale(e.isFlipHorizontal?-1:1,e.isFlipVertically?-1:1),l.drawImage(e.drawImg.img,e.drawImg.sx,e.drawImg.sy,e.drawImg.swidth,e.drawImg.sheight,e.isFlipHorizontal?-e.drawImg.width:0,e.isFlipVertically?-e.drawImg.height:0,e.drawImg.width,e.drawImg.height),l.translate(-e.drawImg.x,e.drawImg.y),l.restore(),e.printImageTimmer&&clearTimeout(e.printImageTimmer),e.printImageTimmer=setTimeout(()=>{M(!0)},100)}},Ze=o=>{n.imgMove&&(e.dropImg.active=!0,e.dropImg.params={...e.drawImg},e.dropImg.pageX=o.pageX,e.dropImg.pageY=o.pageY)},U=()=>{e.dropImg.active=!1,e.printImageTimmer&&clearTimeout(e.printImageTimmer),e.printImageTimmer=setTimeout(()=>{M(!0)},100)},re=o=>{if(e.dropImg.active&&e.drawImg.img){let l={...e.drawImg};l.x=e.dropImg.params.x-(e.dropImg.pageX-o.pageX),l.y=e.dropImg.params.y-(e.dropImg.pageY-o.pageY),n.toolBoxOverflow||(l.x>e.toolBox.x&&(l.x=e.toolBox.x),l.x<e.toolBox.x+e.toolBox.width-l.width&&(l.x=e.toolBox.x+e.toolBox.width-l.width),l.y>e.toolBox.y&&(l.y=e.toolBox.y),l.y<e.toolBox.y+e.toolBox.height-l.height&&(l.y=e.toolBox.y+e.toolBox.height-l.height)),e.drawImg=l,C(),o.stopPropagation()}},ie=()=>{e.drawImg.width=e.drawImg.swidth,e.drawImg.height=e.drawImg.sheight,C()},P=(o="horizontal")=>{e.drawImg.img&&(o==="horizontal"?e.isFlipHorizontal=!e.isFlipHorizontal:e.isFlipVertically=!e.isFlipVertically,C())},X=o=>{const r=e.rotateImg.angle+o;r>=-180&&r<=180&&(e.rotateImg.angle=r,e.rotateControl.position=r/180*100+100,C())},L=()=>{e.rotateImg.angle=0,e.rotateControl.position=100,C()},k=(o,l)=>{e.controlBox.disable=!1,e.controlBox.btnName=l,e.controlBox.start.x=o.clientX,e.controlBox.start.y=o.clientY,e.controlBox.start.width=e.toolBox.width,e.controlBox.start.height=e.toolBox.height,o.stopPropagation()},ne=o=>{e.controlBox.disable=!0,U(),j(),le(),o.stopPropagation()},_e=o=>{if(e.controlBox.disable===!1){const l=o.clientX-e.controlBox.start.x,r=o.clientY-e.controlBox.start.y;let i=0,a=0;e.controlBox.btnName=="leftUp"&&(n.rate?B.value>=1?(i=e.toolBox.x+l,a=e.toolBox.y+l/B.value):(i=e.toolBox.x+r*B.value,a=e.toolBox.y+r):(i=e.toolBox.x+l,a=e.toolBox.y+r),e.toolBox.width=e.controlBox.start.width-l,e.toolBox.height=e.controlBox.start.height-r),e.controlBox.btnName=="rightUp"&&(n.rate&&B.value>=1?(i=e.toolBox.x,a=e.toolBox.y-l/B.value):(i=e.toolBox.x,a=e.toolBox.y+r),e.toolBox.width=e.controlBox.start.width+l,e.toolBox.height=e.controlBox.start.height-r),e.controlBox.btnName=="rightDown"&&(i=e.toolBox.x,a=e.toolBox.y,e.toolBox.width=e.controlBox.start.width+l,e.toolBox.height=e.controlBox.start.height+r),e.controlBox.btnName=="leftDown"&&(n.rate?B.value>=1?(i=e.toolBox.x+l,a=e.toolBox.y):(i=e.toolBox.x+-r*B.value,a=e.toolBox.y):(i=e.toolBox.x+l,a=e.toolBox.y),e.toolBox.width=e.controlBox.start.width-l,e.toolBox.height=e.controlBox.start.height+r),e.controlBox.btnName=="topCenter"&&(i=e.toolBox.x,a=e.toolBox.y+r,e.toolBox.width=e.controlBox.start.width,e.toolBox.height=e.controlBox.start.height-r),e.controlBox.btnName=="downCenter"&&(i=e.toolBox.x,a=e.toolBox.y,e.toolBox.width=e.controlBox.start.width,e.toolBox.height=e.controlBox.start.height+r),e.controlBox.btnName=="leftCenter"&&(i=e.toolBox.x+l,a=e.toolBox.y,e.toolBox.width=e.controlBox.start.width-l,e.toolBox.height=e.controlBox.start.height),e.controlBox.btnName=="rightCenter"&&(i=e.toolBox.x,a=e.toolBox.y,e.toolBox.width=e.controlBox.start.width+l,e.toolBox.height=e.controlBox.start.height),Y(e.toolBox.width,e.toolBox.height,i,a)}o.stopPropagation()},ae=o=>o.toDataURL(`image/${n.fileType}`,n.quality),et=o=>{HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:(l,r,i)=>{window.atob?setTimeout(()=>{const a=atob(o.toDataURL(r,i).split(",")[1]),d=a.length,s=new Uint8Array(d);let m;for(let f=0;f<d;f++)s[f]=a.charCodeAt(f);try{m=new Blob([s],{type:`image/${n.fileType}`}),l(m)}catch(f){if(window.BlobBuilder=window.BlobBuilder||window.WebKitBlobBuilder||window.MozBlobBuilder||window.MSBlobBuilder,f.name=="TypeError"&&window.BlobBuilder){const g=window.BlobBuilder,c=new g;c.append(s.buffer),m=c.getBlob(`image/${n.fileType}`),l(m)}f.name=="InvalidStateError"&&(m=new Blob([s.buffer],{type:`image/${n.fileType}`}),l(m))}},200):l(!1,{type:`image/${n.fileType}`})}})},M=(o,l)=>{if(e.drawImg.img){const r=H.value;if(n.watermarkText&&!o){const a=r.getContext("2d");a.font=n.watermarkTextFont,a.fillStyle=n.watermarkTextColor,a.textAlign="right",a.textBaseline="bottom",a.fillText(n.watermarkText,e.toolBox.x+e.toolBox.width*n.watermarkTextX,e.toolBox.y+e.toolBox.height*n.watermarkTextY)}const i=new Image;n.crossOrigin&&(i.crossOrigin=n.crossOriginHeader),i.src=r.toDataURL(`image/${n.fileType}`,n.quality),et(r),r.toBlob(a=>{if(a){const d=new FileReader;d.readAsDataURL(a),d.onload=()=>{const s=setInterval(()=>{var m;if(d.readyState==2){clearInterval(s);const f=document.createElement("canvas"),g=f.getContext("2d");if(n.originalGraph==!0){const c=e.drawImg.width/e.drawImg.swidth,x=e.toolBox.width/c,p=e.toolBox.height/c;f.width=x,f.height=p;const w=(e.toolBox.x-e.drawImg.x)/c,h=(e.toolBox.y-e.drawImg.y)/c,lt=e.drawImg.swidth,rt=e.drawImg.sheight;g.translate(-w,-h),g.drawImage(e.drawImg.img,0,0,lt,rt)}else{f.width=e.toolBox.width,f.height=e.toolBox.height;const c=e.toolBox,[x=1,p=1]=((m=n.rate)==null?void 0:m.split(":"))||[];g.drawImage(i,c.x,c.y,c.width,x>=p?c.width*B.value:c.width/B.value,0,0,c.width,x>=p?c.width*B.value:c.width/B.value)}f.toBlob(c=>{const x=ae(f),p={fileName:E.value,blob:c,file:ee(x,E.value),dataURL:x};o?n.previewMode&&(y("realTime",p),l&&l(p)):(n.isFinishClose&&V(),y("confirm",p),l&&l(p))},`image/${n.fileType}`,n.quality)}},200)}}else{const d=document.createElement("canvas");d.width=e.toolBox.width,d.height=e.toolBox.height;const s=d.getContext("2d"),m=e.toolBox;s.drawImage(i,m.x,m.y,m.width,m.width*B.value,0,0,m.width,m.width*B.value);const f=ae(d),g={fileName:E.value,file:ee(f,E.value),dataURL:f};o?(y("realTime",g),l&&l(g)):(n.isFinishClose&&V(),y("confirm",g),l&&l(g))}})}else o||(console.warn("No picture selected"),y("error",{err:1,msg:"没有选中图片"}))},tt=o=>{if(e.rotateControl.active){const l=o.pageX-e.rotateControl.start.x;let r=e.rotateControl.start.position+l;r<=0&&(r=0),r>=200&&(r=200),e.rotateControl.position=r,e.rotateImg.angle=(r-100)/100*180,C()}},ot=o=>{e.rotateControl.active=!0,e.rotateControl.start.x=o.pageX,e.rotateControl.start.y=o.pageY,e.rotateControl.start.position=e.rotateControl.position},se=()=>{e.rotateControl.active=!1};return t.onMounted(()=>{n.isModal===!1&&(e.visible=!0,t.nextTick(()=>{var o;N.value&&(N.value.onmousewheel=q,(o=N.value)==null||o.addEventListener("DOMMouseScroll",q))}))}),R({open:W,close:V,chooseImage:A,flipDirection:P,resetScale:ie,rotate:X,resetRotate:L,cropImage:M}),(o,l)=>{const r=t.resolveComponent("solt");return t.openBlock(),t.createElementBlock("div",ce,[o.showChooseBtn&&o.isModal?(t.openBlock(),t.createElementBlock("div",{key:0,onClick:l[0]||(l[0]=i=>W())},[t.renderSlot(o.$slots,"open",{},void 0,!0)])):t.createCommentVNode("",!0),!o.$slots.openImgCutter&&!o.$slots.open&&o.isModal?(t.openBlock(),t.createElementBlock("button",{key:1,type:"button",class:"btn btn-primary",onClick:l[1]||(l[1]=i=>W())},t.toDisplayString(o.label),1)):t.createCommentVNode("",!0),t.createVNode(t.Transition,{name:"fade"},{default:t.withCtx(()=>[t.unref(Z)?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(o.isModal?"mask":""),ref_key:"maskRef",ref:Q},[t.unref(Z)?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(o.isModal?"dialog-box-modal":"dialog-box")},[t.createVNode(t.Transition,{name:"fade","enter-class":"fade-in-enter","enter-active-class":"fade-in-active","leave-class":"fade-out-enter","leave-active-class":"fade-out-active"},{default:t.withCtx(()=>[t.createElementVNode("div",{ref_key:"dialogMainModalRef",ref:J,class:t.normalizeClass(o.isModal?"dialog-main-modal":"dialog-main"),style:t.normalizeStyle("width:"+(o.isModal?o.boxWidth+32:o.boxWidth)+"px")},[t.createElementVNode("div",me,[o.isModal?(t.openBlock(),t.createElementBlock("div",ge,[t.createVNode(r,{name:"title"},{default:t.withCtx(()=>[t.createTextVNode(" 图片裁剪 "),t.createElementVNode("span",{class:"close-icon",onClick:V})]),_:1})])):t.createCommentVNode("",!0),t.createElementVNode("div",{ref_key:"toolBoxRef",ref:N,style:t.normalizeStyle("height:"+o.boxHeight+"px;width:"+o.boxWidth+"px"),onMousemove:_e,onMouseup:ne,onMouseleave:ne,class:"tool-box"},[t.withDirectives(t.createElementVNode("div",fe,[t.createElementVNode("div",{class:"btn btn-warning btn-xs",onClick:A},t.toDisplayString(o.label),1)],512),[[t.vShow,!t.unref(T).img&&o.showChooseBtn]]),o.tool==!0?t.withDirectives((t.openBlock(),t.createElementBlock("div",{key:0,class:"dock-main",style:t.normalizeStyle("background:"+o.toolBg),onMouseenter:U},[o.rate?(t.openBlock(),t.createElementBlock("div",he,[t.renderSlot(o.$slots,"ratio",{},()=>[t.createTextVNode(" Ratio: ")],!0),t.createTextVNode(" "+t.toDisplayString(o.rate),1)])):t.createCommentVNode("",!0),t.createElementVNode("div",{class:"dock-btn",onClick:ie},[t.renderSlot(o.$slots,"scale",{},()=>[t.createTextVNode(" Scale: ")],!0),t.createTextVNode(" "+t.toDisplayString(t.unref(T).swidth>0?(t.unref(T).width/t.unref(T).swidth).toFixed(2):"-"),1)]),o.originalGraph===!1?(t.openBlock(),t.createElementBlock("div",{key:1,onClick:l[2]||(l[2]=i=>X(-90)),class:"dock-btn"},[t.renderSlot(o.$slots,"rotateLeft",{},()=>[t.createTextVNode(" ↳ ")],!0)])):t.createCommentVNode("",!0),o.originalGraph===!1?(t.openBlock(),t.createElementBlock("div",{key:2,onClick:l[3]||(l[3]=i=>X(90)),class:"dock-btn"},[t.renderSlot(o.$slots,"rotateRight",{},()=>[t.createTextVNode(" ↲ ")],!0)])):t.createCommentVNode("",!0),o.originalGraph===!1?(t.openBlock(),t.createElementBlock("div",{key:3,onClick:l[4]||(l[4]=i=>L()),class:"dock-btn"},[t.renderSlot(o.$slots,"resetRotate",{},()=>[t.createTextVNode(" ↻ ")],!0)])):t.createCommentVNode("",!0),o.originalGraph===!1?(t.openBlock(),t.createElementBlock("div",pe,[t.createElementVNode("div",{ref_key:"dockBtnScrollControlRef",ref:Oe,onMousemove:tt,onMousedown:ot,onMouseleave:se,onMouseup:se,style:t.normalizeStyle("left:"+t.unref(z).position+"px"),class:"scroll-bar-control"},null,36),t.unref(z).active==!0?(t.openBlock(),t.createElementBlock("div",{key:0,class:"scroll-bar-text",style:t.normalizeStyle("left:"+t.unref(z).position+"px")},t.toDisplayString(t.unref(je).angle.toFixed(0)+"°"),5)):t.createCommentVNode("",!0)])):t.createCommentVNode("",!0),o.originalGraph===!1?(t.openBlock(),t.createElementBlock("div",{key:5,onClick:l[5]||(l[5]=i=>P()),class:"dock-btn"},[t.renderSlot(o.$slots,"flipHorizontal",{},()=>[t.createTextVNode(" ⇆ ")],!0)])):t.createCommentVNode("",!0),o.originalGraph===!1?(t.openBlock(),t.createElementBlock("div",{key:6,onClick:l[6]||(l[6]=i=>P("vertically")),class:"dock-btn"},[t.renderSlot(o.$slots,"flipVertically",{},()=>[t.createTextVNode(" ⇅ ")],!0)])):t.createCommentVNode("",!0)],36)),[[t.vShow,t.unref(T).img&&t.unref(Ye).active!==!0&&t.unref(Ue).disable==!0&&t.unref(S).disable==!0]]):t.createCommentVNode("",!0),t.withDirectives(t.createElementVNode("div",{ref_key:"toolBoxControlRef",ref:O,onMousedown:Ke,onMouseup:le,onMousemove:Je,onMouseleave:Qe,class:"tool-box-control",style:t.normalizeStyle({pointerEvents:o.moveAble?"auto":"none"})},[t.createElementVNode("div",xe,[t.createElementVNode("div",we,[Be,ye,ue,be,t.createElementVNode("div",Ie," 宽:"+t.toDisplayString($e.value)+" 高:"+t.toDisplayString(ze.value)+" (x:"+t.toDisplayString(We.value)+",y:"+t.toDisplayString(Ae.value)+") ",1),o.sizeChange?(t.openBlock(),t.createElementBlock("div",{key:0,"data-name":"leftUp",onMousedown:l[7]||(l[7]=i=>k(i,"leftUp")),class:"left-up control-btn"},null,32)):t.createCommentVNode("",!0),o.sizeChange?(t.openBlock(),t.createElementBlock("div",{key:1,"data-name":"leftDown",onMousedown:l[8]||(l[8]=i=>k(i,"leftDown")),class:"left-down control-btn"},null,32)):t.createCommentVNode("",!0),o.sizeChange?(t.openBlock(),t.createElementBlock("div",{key:2,"data-name":"rightUp",onMousedown:l[9]||(l[9]=i=>k(i,"rightUp")),class:"right-up control-btn"},null,32)):t.createCommentVNode("",!0),o.sizeChange?(t.openBlock(),t.createElementBlock("div",{key:3,"data-name":"rightDown",onMousedown:l[10]||(l[10]=i=>k(i,"rightDown")),class:"right-down control-btn"},null,32)):t.createCommentVNode("",!0),o.sizeChange&&!o.rate&&t.unref(S).width>20?(t.openBlock(),t.createElementBlock("div",{key:4,"data-name":"topCenter",onMousedown:l[11]||(l[11]=i=>k(i,"topCenter")),class:"top-center control-btn"},null,32)):t.createCommentVNode("",!0),o.sizeChange&&!o.rate&&t.unref(S).width>20?(t.openBlock(),t.createElementBlock("div",{key:5,"data-name":"downCenter",onMousedown:l[12]||(l[12]=i=>k(i,"downCenter")),class:"down-center control-btn"},null,32)):t.createCommentVNode("",!0),o.sizeChange&&!o.rate&&t.unref(S).height>20?(t.openBlock(),t.createElementBlock("div",{key:6,"data-name":"leftCenter",onMousedown:l[13]||(l[13]=i=>k(i,"leftCenter")),class:"left-center control-btn"},null,32)):t.createCommentVNode("",!0),o.sizeChange&&!o.rate&&t.unref(S).height>20?(t.openBlock(),t.createElementBlock("div",{key:7,"data-name":"rightCenter",onMousedown:l[14]||(l[14]=i=>k(i,"rightCenter")),class:"right-center control-btn"},null,32)):t.createCommentVNode("",!0)]),Ce,ke,Ne,Te])],36),[[t.vShow,t.unref(T).img]]),t.createElementVNode("canvas",{class:"canvas-select-box",ref_key:"canvasSelectBoxRef",ref:F,width:o.boxWidth,onMousedown:Ze,onMouseup:U,onMousemove:re,height:o.boxHeight},null,40,Me),t.createElementVNode("canvas",{class:"canvas",ref_key:"canvasRef",ref:H,width:o.boxWidth,height:o.boxHeight},null,8,Ve)],36)]),t.renderSlot(o.$slots,"footer",{},()=>[o.footer?(t.openBlock(),t.createElementBlock("div",Ee,[t.createElementVNode("input",{class:"file-input",onChange:Xe,ref_key:"inputFileRef",ref:$,type:"file",accept:"image/*"},null,544),t.createElementVNode("div",{class:"choose",onClick:A},[t.renderSlot(o.$slots,"choose",{},()=>[o.showChooseBtn?(t.openBlock(),t.createElementBlock("div",Se,t.toDisplayString(o.label),1)):t.createCommentVNode("",!0)],!0)]),t.createElementVNode("div",ve,[t.createElementVNode("div",{onClick:V},[t.renderSlot(o.$slots,"cancel",{},()=>[He],!0)]),t.createElementVNode("div",{onClick:l[15]||(l[15]=i=>M(!1))},[t.renderSlot(o.$slots,"confirm",{},()=>[t.createElementVNode("button",{type:"button",class:"btn btn-primary",style:{"margin-left":"15px"},disabled:!t.unref(T).img}," 确定 ",8,qe)],!0)])])])):t.createCommentVNode("",!0)],!0)],6)]),_:3}),De],2)):t.createCommentVNode("",!0)],2)):t.createCommentVNode("",!0)]),_:3})])}}}),Ct="",D=((I,R)=>{const y=I.__vccOpts||I;for(const[n,v]of R)y[n]=v;return y})(Re,[["__scopeId","data-v-58a65feb"]]),K=de.version,Fe={install:I=>{I.component(D.name,D)},version:K};u.ImageCropper=D,u.default=Fe,u.imageCropperProps=G,u.version=K,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});