mg-vue-cropper/lib/mg-vue-cropper.umd.js

A mg vue-cropper Component.

(function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w.MgVueCropper={},w.Vue))})(this,function(w,e){"use strict";var V=document.createElement("style");V.textContent=`.cropper-tool[data-v-3008b434]{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;height:100%;background-color:#000c}.material-container[data-v-3008b434]{position:relative;width:100%;height:100%;text-align:center}.material-container>img[data-v-3008b434]{max-width:100%;max-height:100%;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.material-container>.cut-box[data-v-3008b434]{position:absolute;left:0;top:0;border:1px solid #6676FF;cursor:move}.material-container>.cut-box>.resize-btn[data-v-3008b434]{position:absolute;width:8px;height:8px;background-color:transparent}.material-container>.cut-box>.resize-btn.nw[data-v-3008b434]{left:-1px;top:-1px;cursor:nw-resize}.material-container>.cut-box>.resize-btn.nw>.handle-x[data-v-3008b434]{left:-2px;top:-2px}.material-container>.cut-box>.resize-btn.nw>.handle-y[data-v-3008b434]{left:-2px;top:-2px}.material-container>.cut-box>.resize-btn.ne[data-v-3008b434]{right:-1px;top:-1px;cursor:ne-resize}.material-container>.cut-box>.resize-btn.ne>.handle-x[data-v-3008b434]{right:-2px;top:-2px}.material-container>.cut-box>.resize-btn.ne>.handle-y[data-v-3008b434]{right:-2px;top:-2px}.material-container>.cut-box>.resize-btn.se[data-v-3008b434]{right:-1px;bottom:-1px;cursor:se-resize}.material-container>.cut-box>.resize-btn.se>.handle-x[data-v-3008b434]{right:-2px;bottom:-2px}.material-container>.cut-box>.resize-btn.se>.handle-y[data-v-3008b434]{right:-2px;bottom:-2px}.material-container>.cut-box>.resize-btn.sw[data-v-3008b434]{left:-1px;bottom:-1px;cursor:sw-resize}.material-container>.cut-box>.resize-btn.sw>.handle-x[data-v-3008b434]{left:-2px;bottom:-2px}.material-container>.cut-box>.resize-btn.sw>.handle-y[data-v-3008b434]{left:-2px;bottom:-2px}.material-container>.chartlet-container[data-v-3008b434]{position:absolute;left:0;top:0}.material-container>.chartlet-container>img[data-v-3008b434]{width:100%;height:100%}.handle-x[data-v-3008b434]{position:absolute;width:16px;height:3px;background-color:#6676ff}.handle-y[data-v-3008b434]{position:absolute;width:3px;height:16px;background-color:#6676ff}.rotate-container[data-v-3008b434]{display:flex;position:absolute;bottom:-36px;left:0;color:#7b8088}.rotate-title[data-v-3008b434]{margin-right:20px}.rotate-btns>span[data-v-3008b434]{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.rotate-btns>span[data-v-3008b434]:not(.is-disabled):hover{opacity:.66}.rotate-btns>span.is-disabled[data-v-3008b434]{cursor:not-allowed}.rotate-btns>span[data-v-3008b434]:first-child{margin-right:16px}.cropper-preview[data-v-56e3a6cf]{display:inline-block;position:relative;width:28.57%;height:100%;color:#343537}.canvas-container[data-v-56e3a6cf]{width:100%;height:42%;max-height:calc(100% - 22px);background-color:transparent;margin:6px 0;overflow:hidden}.preview-info[data-v-56e3a6cf]{display:flex;justify-content:space-between;white-space:nowrap}.info-label[data-v-56e3a6cf]{color:#7b8088}.info-value[data-v-56e3a6cf]{color:#343537}.original-canvas-container[data-v-56e3a6cf]{display:none;position:absolute;z-index:-1;width:100%;opacity:0}.mg-cropper[data-v-dbd1a6f4]{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;font-size:12px;text-align:left}.mg-cropper[data-v-dbd1a6f4] *{box-sizing:border-box}.mg-cropper[data-v-dbd1a6f4] img{vertical-align:middle}.right-slot[data-v-dbd1a6f4]{display:inline-block;position:relative;width:28.57%;height:100%}
/*$vite$:1*/`,document.head.appendChild(V);const M={name:"drag",mounted(t,i,l){t.onmousedown=a=>{a.stopPropagation(),a.preventDefault();let r=t.offsetLeft,o=t.offsetTop;const n=document.querySelector(i.value.rangeDomSelector),h=window.getComputedStyle(n),s=window.getComputedStyle(t),c=window.parseFloat(h.width)-window.parseFloat(s.width),m=window.parseFloat(h.height)-window.parseFloat(s.height),g=a.clientX-t.offsetLeft,u=a.clientY-t.offsetTop;document.onmousemove=f=>{r=f.clientX-g,o=f.clientY-u,r<0?r=0:r>c&&(r=c),o<0?o=0:o>m&&(o=m),t.style.left=r+"px",t.style.top=o+"px"},document.onmouseup=f=>{i.value&&i.value.callback&&i.value.callback({left:r,top:o}),document.onmousemove=null,document.onmouseup=null}}}},H={name:"resize",mounted(t,i,l){t.onmousedown=a=>{a.stopPropagation(),a.preventDefault();const r=i.value.type||"se",o=a.clientX,n=a.clientY;let h=0,s=0;const c=t.parentNode,m=window.getComputedStyle(c),g=window.parseFloat(m.left),u=window.parseFloat(m.top),f=window.parseFloat(m.width),b=window.parseFloat(m.height),C={left:g+f},R={left:g+f,top:u+b},E={top:u+b};let B=g,v=u,d=f,p=b;const dt=document.querySelector(i.value.rangeDomSelector),T=window.getComputedStyle(dt),U=i.value.bindComponent.minCutRenderSize.width,_=i.value.bindComponent.minCutRenderSize.height;let $=window.parseFloat(T.width)-c.offsetLeft,N=window.parseFloat(T.height)-c.offsetTop;r==="nw"?($=R.left,N=R.top):r==="ne"?N=E.top:r==="sw"&&($=C.left);let x=1;const S=i.value.bindComponent.$cropperRoot.equiRatio;S&&(x=f/b),document.onmousemove=D=>{h=D.clientX-o,s=D.clientY-n,r==="nw"?(h=-h,s=-s):r==="ne"?s=-s:r==="sw"&&(h=-h),d=f+h,p=b+s,S&&(p=d/x),d<U&&(d=U,S&&(p=d/x)),p<_&&(p=_,S&&(d=p*x)),d>$&&(d=$,S&&(p=d/x)),p>N&&(p=N,S&&(d=p*x)),r==="nw"?(B=R.left-d,v=R.top-p):r==="ne"?v=E.top-p:r==="sw"&&(B=C.left-d),c.style.left=`${B}px`,c.style.top=`${v}px`,c.style.width=`${d}px`,c.style.height=`${p}px`},document.onmouseup=D=>{i.value&&i.value.callback&&i.value.callback({left:B,top:v,width:d,height:p}),document.onmousemove=null,document.onmouseup=null}}}},z=(t=0,i=0,l=0,a=0)=>{let r=t,o=i;if(r>l||o>a){const n=t/i,h=Math.min(l/r,a/o);r/l>=o/a?(r*=h,o=r/n):(o*=h,r=o*n)}return{width:r,height:o}},k=(t,i)=>{const l=t.__vccOpts||t;for(const[a,r]of i)l[a]=r;return l},L={name:"CropperTool",directives:{Drag:M,Resize:H},inject:["$cropperRoot"],data(){return{rotateOriginalBlobUrls:{blobUrl1:"",blobUrl2:"",blobUrl3:""},materialNaturalSize:{width:0,height:0},materialRenderSize:{width:"100%",height:"100%"},imgRotateDeg:null,cutBox:{width:16,height:16,left:0,top:0},cutBoxVisible:!1,imgLoaded:!1,chartletVisible:!1,chartletNaturalSize:{width:0,height:0,left:this.$cropperRoot.chartletInitLeft,top:this.$cropperRoot.chartletInitTop},bindComponent:this}},computed:{realOriginalUrl(){let t=this.$cropperRoot.originalUrl;return this.imgRotateDeg===90||this.imgRotateDeg===-270?t=this.rotateOriginalBlobUrls.blobUrl1:this.imgRotateDeg===180||this.imgRotateDeg===-180?t=this.rotateOriginalBlobUrls.blobUrl2:(this.imgRotateDeg===270||this.imgRotateDeg===-90)&&(t=this.rotateOriginalBlobUrls.blobUrl3),t},materialNaturalRatio(){return this.materialNaturalSize.width/this.materialNaturalSize.height},regionScale(){let t=1;return typeof this.materialRenderSize.width=="number"&&typeof this.materialNaturalSize.width=="number"&&(t=this.materialRenderSize.width/this.materialNaturalSize.width),t},minCutRenderSize(){const t=Math.max(this.$cropperRoot.minCutWidth*this.regionScale,16),i=Math.max(this.$cropperRoot.minCutHeight*this.regionScale,16),l=z(t,i,this.materialRenderSize.width,this.materialRenderSize.height);return{width:l.width,height:l.height}},cutBoxOriginal(){return{width:this.cutBox.width/this.regionScale,height:this.cutBox.height/this.regionScale,left:this.cutBox.left/this.regionScale,top:this.cutBox.top/this.regionScale,ratio:this.cutBox.width/this.cutBox.height}},cropperToolStyle(){const t={width:"100%",backgroundColor:this.$cropperRoot.colorBg};return(this.$cropperRoot.previewVisible||this.$cropperRoot.$slots.default)&&(t.width="calc(71.43% - 30px)",t.marginRight="30px"),t},materialContainerStyle(){return{width:typeof this.materialRenderSize.width=="number"?`${this.materialRenderSize.width}px`:this.materialRenderSize.width,height:typeof this.materialRenderSize.height=="number"?`${this.materialRenderSize.height}px`:this.materialRenderSize.height,opacity:this.imgLoaded?1:0}},cutBoxStyle(){return{width:`${this.cutBox.width}px`,height:`${this.cutBox.height}px`,left:`${this.cutBox.left}px`,top:`${this.cutBox.top}px`,borderColor:this.$cropperRoot.colorPrimary}},handleBtnStyle(){return{backgroundColor:this.$cropperRoot.colorPrimary}},chartletRenderInfo(){let t=this.chartletNaturalSize.width*this.regionScale,i=this.chartletNaturalSize.height*this.regionScale;const l=this.chartletNaturalSize.left*this.regionScale,a=this.chartletNaturalSize.top*this.regionScale,r=this.materialRenderSize.width*.3,o=this.materialRenderSize.height*.3;if(t>r||i>o){const n=z(t,i,r,o);t=n.width,i=n.height}return{width:t,height:i,left:l,top:a}},chartletContainerStyle(){return{width:`${this.chartletRenderInfo.width}px`,height:`${this.chartletRenderInfo.height}px`,left:`${this.chartletRenderInfo.left}px`,top:`${this.chartletRenderInfo.top}px`}}},watch:{"$cropperRoot.originalUrl"(){this.resetCompData(),this.rotateOriginalBlobUrls.blobUrl1="",this.rotateOriginalBlobUrls.blobUrl2="",this.rotateOriginalBlobUrls.blobUrl3="",this.imgRotateDeg=null},realOriginalUrl(){this.resetCompData()},"$cropperRoot.currentChartlet.name"(){this.chartletVisible=!1}},methods:{errorHandle(t){this.imgRotateDeg===null&&this.$emit("img-onerror",t)},abortHandle(t){this.imgRotateDeg===null&&this.$emit("img-onabort",t)},loadHandle(t){this.initMaterialRenderSize(),this.initCutBox(),this.$cropperRoot.rotateVisible&&this.imgRotateDeg===null&&this.autoDrawRotateOriginalImg(),this.$emit("draw-img"),this.imgRotateDeg===null&&this.$emit("img-onload",t),this.imgLoaded=!0},initMaterialRenderSize(){const t=window.getComputedStyle(this.$refs.imgDom);this.materialNaturalSize.width=this.$refs.imgDom.naturalWidth,this.materialNaturalSize.height=this.$refs.imgDom.naturalHeight,this.materialRenderSize.width=window.parseFloat(t.width),this.materialRenderSize.height=window.parseFloat(t.height)},initCutBox(){const t=Math.max(this.$cropperRoot.initCutWidth*this.regionScale,16),i=Math.max(this.$cropperRoot.initCutHeight*this.regionScale,16),l=z(t,i,this.materialRenderSize.width,this.materialRenderSize.height);let a=this.$cropperRoot.initCutLeft*this.regionScale,r=this.$cropperRoot.initCutTop*this.regionScale;const o=this.materialRenderSize.width-l.width,n=this.materialRenderSize.height-l.height;a>o&&(a=o),r>n&&(r=n),this.cutBox.left=a,this.cutBox.top=r,this.cutBox.width=l.width,this.cutBox.height=l.height,this.cutBoxVisible=!0},async autoDrawRotateOriginalImg(){try{const t=this.$parent.$refs.cropperPreview.drawRotateOriginalImg,i=await t(90,this.materialNaturalSize.width,this.materialNaturalSize.height),l=await t(180,this.materialNaturalSize.width,this.materialNaturalSize.height),a=await t(270,this.materialNaturalSize.width,this.materialNaturalSize.height);this.rotateOriginalBlobUrls.blobUrl1=i.blobUrl,this.rotateOriginalBlobUrls.blobUrl2=l.blobUrl,this.rotateOriginalBlobUrls.blobUrl3=a.blobUrl}catch(t){throw new Error(t)}},dragCallback(t){this.cutBox.left=t.left,this.cutBox.top=t.top,this.$emit("draw-img")},resizeCallback(t){this.cutBox.left=t.left,this.cutBox.top=t.top,this.cutBox.width=t.width,this.cutBox.height=t.height,this.$emit("draw-img")},rotateCwHandle(){if(!this.imgLoaded)return;let t=(this.imgRotateDeg||0)+90;t>=360&&(t=0),this.imgRotateDeg=t},rotateCcwHandle(){if(!this.imgLoaded)return;let t=(this.imgRotateDeg||0)-90;t<=-360&&(t=0),this.imgRotateDeg=t},setCutBoxSize({width:t,height:i}){if(console.log(t,i,this.$cropperRoot,123456),typeof t!="number"||typeof i!="number")return;this.cutBoxVisible=!1;const l=Math.max(t*this.regionScale,16),a=Math.max(i*this.regionScale,16),r=z(l,a,this.materialRenderSize.width,this.materialRenderSize.height);this.cutBox.left=0,this.cutBox.top=0,this.cutBox.width=r.width,this.cutBox.height=r.height,this.cutBoxVisible=!0,this.$emit("draw-img")},setCutBoxPos({left:t,top:i}){if(typeof t!="number"||typeof i!="number")return;this.cutBoxVisible=!1,t*=this.regionScale,i*=this.regionScale;const l=this.materialRenderSize.width-this.cutBox.width,a=this.materialRenderSize.height-this.cutBox.height;t>l&&(t=l),i>a&&(i=a),this.cutBox.left=t,this.cutBox.top=i,this.cutBoxVisible=!0,this.$emit("draw-img")},chartletLoadHandle(t){const i=t.target;this.chartletNaturalSize.width=i.naturalWidth,this.chartletNaturalSize.height=i.naturalHeight,this.chartletNaturalSize.left=this.$cropperRoot.chartletInitLeft,this.chartletNaturalSize.top=this.$cropperRoot.chartletInitTop,this.$nextTick(()=>{this.chartletVisible=!0})},setChartletPos({left:t,top:i}){if(typeof t!="number"||typeof i!="number")return;const l=this.materialNaturalSize.width-this.chartletRenderInfo.width/this.regionScale,a=this.materialNaturalSize.height-this.chartletRenderInfo.height/this.regionScale;t>l&&(t=l),i>a&&(i=a),this.chartletNaturalSize.left=t,this.chartletNaturalSize.top=i},resetCompData(){this.cutBoxVisible=!1,this.imgLoaded=!1,this.materialNaturalSize.width=0,this.materialNaturalSize.height=0,this.materialRenderSize.width="100%",this.materialRenderSize.height="100%",this.cutBox.width=16,this.cutBox.height=16,this.cutBox.left=0,this.cutBox.top=0,this.chartletNaturalSize.left=this.$cropperRoot.chartletInitLeft,this.chartletNaturalSize.top=this.$cropperRoot.chartletInitTop,this.$emit("draw-img")}}},P=["src"],F={class:"resize-btn nw"},j={class:"resize-btn ne"},W={class:"resize-btn se"},q={class:"resize-btn sw"},X=["src"],Y={key:0,class:"rotate-container"},A={class:"rotate-btns"};function G(t,i,l,a,r,o){const n=e.resolveDirective("resize"),h=e.resolveDirective("drag");return e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(o.cropperToolStyle),class:"cropper-tool"},[e.createElementVNode("div",{class:"material-container",style:e.normalizeStyle(o.materialContainerStyle)},[e.createElementVNode("img",{ref:"imgDom",draggable:"false",src:o.realOriginalUrl,onLoad:i[0]||(i[0]=(...s)=>o.loadHandle&&o.loadHandle(...s)),onError:i[1]||(i[1]=(...s)=>o.errorHandle&&o.errorHandle(...s)),onAbort:i[2]||(i[2]=(...s)=>o.abortHandle&&o.abortHandle(...s)),crossorigin:"anonymous"},null,40,P),o.$cropperRoot.chartletOn?e.createCommentVNode("",!0):e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,class:"cut-box",style:e.normalizeStyle(o.cutBoxStyle)},[e.withDirectives((e.openBlock(),e.createElementBlock("div",F,[e.createElementVNode("span",{class:"handle-x",style:e.normalizeStyle(o.handleBtnStyle)},null,4),e.createElementVNode("span",{class:"handle-y",style:e.normalizeStyle(o.handleBtnStyle)},null,4)])),[[n,{type:"nw",rangeDomSelector:".material-container",bindComponent:r.bindComponent,callback:o.resizeCallback}]]),e.withDirectives((e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("span",{class:"handle-x",style:e.normalizeStyle(o.handleBtnStyle)},null,4),e.createElementVNode("span",{class:"handle-y",style:e.normalizeStyle(o.handleBtnStyle)},null,4)])),[[n,{type:"ne",rangeDomSelector:".material-container",bindComponent:r.bindComponent,callback:o.resizeCallback}]]),e.withDirectives((e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("span",{class:"handle-x",style:e.normalizeStyle(o.handleBtnStyle)},null,4),e.createElementVNode("span",{class:"handle-y",style:e.normalizeStyle(o.handleBtnStyle)},null,4)])),[[n,{type:"se",rangeDomSelector:".material-container",bindComponent:r.bindComponent,callback:o.resizeCallback}]]),e.withDirectives((e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("span",{class:"handle-x",style:e.normalizeStyle(o.handleBtnStyle)},null,4),e.createElementVNode("span",{class:"handle-y",style:e.normalizeStyle(o.handleBtnStyle)},null,4)])),[[n,{type:"sw",rangeDomSelector:".material-container",bindComponent:r.bindComponent,callback:o.resizeCallback}]])],4)),[[e.vShow,r.cutBoxVisible],[h,{rangeDomSelector:".material-container",callback:o.dragCallback}]]),o.$cropperRoot.chartletOn?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:1,class:"chartlet-container",style:e.normalizeStyle(o.chartletContainerStyle)},[e.createElementVNode("img",{ref:"chartletDom",src:o.$cropperRoot.currentChartlet.url,draggable:"false",onLoad:i[3]||(i[3]=(...s)=>o.chartletLoadHandle&&o.chartletLoadHandle(...s)),crossorigin:"anonymous"},null,40,X)],4)),[[e.vShow,r.chartletVisible]]):e.createCommentVNode("",!0)],4),o.$cropperRoot.rotateVisible?(e.openBlock(),e.createElementBlock("div",Y,[i[8]||(i[8]=e.createElementVNode("span",{class:"rotate-title"},"旋转",-1)),e.createElementVNode("div",A,[e.createElementVNode("span",{class:e.normalizeClass({"is-disabled":!r.imgLoaded}),onClick:i[4]||(i[4]=(...s)=>o.rotateCcwHandle&&o.rotateCcwHandle(...s))},i[6]||(i[6]=[e.createElementVNode("svg",{t:"1602643918605",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"7392","xmlns:xlink":"http://www.w3.org/1999/xlink",width:"16",height:"16"},[e.createElementVNode("path",{d:"M809.437867 190.464C647.850667 28.8768 393.6256 15.906133 216.541867 150.596267V76.663467a68.1984 68.1984 0 1 0-136.533334 0v208.145066a68.061867 68.061867 0 0 0 68.266667 68.266667h208.213333a68.1984 68.1984 0 1 0 0-136.533333h-55.978666a349.866667 349.866667 0 0 1 436.497066 46.353066 349.934933 349.934933 0 0 1 0 494.3872 349.934933 349.934933 0 0 1-494.3872 0A349.5936 349.5936 0 0 1 141.038933 486.058667a51.2 51.2 0 1 0-102.1952-7.031467A451.925333 451.925333 0 1 0 809.437867 190.464",fill:"#999999","p-id":"7393"})],-1)]),2),e.createElementVNode("span",{class:e.normalizeClass({"is-disabled":!r.imgLoaded}),onClick:i[5]||(i[5]=(...s)=>o.rotateCwHandle&&o.rotateCwHandle(...s))},i[7]||(i[7]=[e.createElementVNode("svg",{t:"1602643926245",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"7532","xmlns:xlink":"http://www.w3.org/1999/xlink",width:"16",height:"16"},[e.createElementVNode("path",{d:"M190.600533 190.464C352.119467 28.8768 606.344533 15.906133 783.428267 150.596267V76.663467a68.1984 68.1984 0 1 1 136.533333 0v208.145066a68.061867 68.061867 0 0 1-68.266667 68.266667H643.549867a68.1984 68.1984 0 1 1 0-136.533333h55.978666a349.866667 349.866667 0 0 0-436.565333 46.353066 349.934933 349.934933 0 0 0 0 494.3872 349.934933 349.934933 0 0 0 494.3872 0 349.5936 349.5936 0 0 0 101.5808-271.223466 51.2 51.2 0 1 1 102.1952-7.031467A451.925333 451.925333 0 1 1 190.600533 190.464",fill:"#999999","p-id":"7533"})],-1)]),2)])])):e.createCommentVNode("",!0)],4)}const J=k(L,[["render",G],["__scopeId","data-v-3008b434"]]),K={name:"CropperPreview",data(){return{canvaSize:{width:220,height:126},originalCanvasSize:{width:220,height:126},cutImgDpi:"16*16",cutImgRatio:"1:1",imgRatioMap:{"9:21":t=>t>.4&&t<.49,"1:2":t=>t>.49&&t<.55,"9:16":t=>t>.55&&t<.6,"2:3":t=>t>.6&&t<.7,"3:4":t=>t>.7&&t<.79,"4:5":t=>t>.79&&t<.85,"1:1":t=>t>.95&&t<1.05,"5:4":t=>t>1.2&&t<1.3,"4:3":t=>t>1.3&&t<1.4,"3:2":t=>t>1.45&&t<1.55,"16:9":t=>t>1.7&&t<1.8,"2:1":t=>t>1.95&&t<2.05,"21:9":t=>t>2.3&&t<2.4},resizeObserver:null}},inject:["$cropperRoot"],computed:{canvasContainerStyle(){const t=this.$cropperRoot.previewHeight;return{height:typeof t=="number"?`${t}px`:t}}},mounted(){!this.$cropperRoot.chartletOn&&this.$cropperRoot.previewVisible&&this.$refs.canvasContainer&&(this.resizeObserver=new ResizeObserver(()=>{this.initCanvasSize()}),this.resizeObserver.observe(this.$refs.canvasContainer))},beforeUnmount(){this.resizeObserver&&this.$refs.canvasContainer&&this.resizeObserver.unobserve(this.$refs.canvasContainer)},methods:{transformRatio(t,i){let l="",a=parseInt(t.toFixed(2)*100,10),r=parseInt(i.toFixed(2)*100,10),o=Math.min(a,r);for(let n=o;n>1;n--)!(a%n)&&!(r%n)&&(a=a/n,r=r/n,o=Math.min(a,r));l=`${a}:${r}`;for(const n in this.imgRatioMap){const h=this.imgRatioMap[n];if(h(a/r)){l=n;break}}return l},initCanvasSize(){this.canvaSize.width=this.$refs.canvasContainer.offsetWidth,this.canvaSize.height=this.$refs.canvasContainer.offsetHeight,console.log(this.canvaSize,this.$refs.canvasContainer.offsetWidth)},setCutImgInfo(t,i){t=Math.floor(t),i=Math.floor(i),this.cutImgDpi=`${t}*${i}`,this.cutImgRatio=this.transformRatio(t,i)},drawImg(){if(this.$cropperRoot.chartletOn||!this.$cropperRoot.previewVisible)return;const i=this.$refs.previewCanvas.getContext("2d"),l=this.$parent.$refs.cropperTool.$refs.imgDom;i.clearRect(0,0,this.canvaSize.width,this.canvaSize.height),i.resetTransform();const a=this.$parent.$refs.cropperTool.cutBoxOriginal,r=z(a.width,a.height,this.canvaSize.width,this.canvaSize.height),o=r.width,n=r.height;let h=0,s=0;o<this.canvaSize.width&&(h=(this.canvaSize.width-o)/2),n<this.canvaSize.height&&(s=(this.canvaSize.height-n)/2),this.setCutImgInfo(a.width,a.height),this.$nextTick(()=>{i.drawImage(l,a.left,a.top,a.width,a.height,h,s,o,n)})},drawOriginalImg(){return new Promise((t,i)=>{const a=this.$refs.originalCanvas.getContext("2d"),r=this.$parent.$refs.cropperTool.$refs.imgDom;a.clearRect(0,0,this.originalCanvasSize.width,this.originalCanvasSize.height),a.resetTransform();const o=()=>{const h=this.$parent.$refs.cropperTool.materialNaturalSize;this.originalCanvasSize.width=h.width,this.originalCanvasSize.height=h.height,this.$nextTick(()=>{if(a.drawImage(r,0,0),this.$parent.hasChartlet){const s=this.$parent.$refs.cropperTool.$refs.chartletDom,c=this.$parent.$refs.cropperTool.chartletNaturalSize,m=this.$parent.$refs.cropperTool.chartletRenderInfo,g=this.$parent.$refs.cropperTool.regionScale,u=c.left,f=c.top,b=m.width/g,C=m.height/g;a.drawImage(s,u,f,b,C)}t()})},n=()=>{const h=this.$parent.$refs.cropperTool.cutBoxOriginal;this.originalCanvasSize.width=h.width,this.originalCanvasSize.height=h.height,this.$nextTick(()=>{a.drawImage(r,h.left,h.top,h.width,h.height,0,0,h.width,h.height),t()})};this.$cropperRoot.chartletOn?o():n()})},drawRotateOriginalImg(t,i,l){return new Promise((a,r)=>{const o=this.$refs.originalCanvas,n=o.getContext("2d"),h=this.$parent.$refs.cropperTool.$refs.imgDom;n.clearRect(0,0,this.originalCanvasSize.width,this.originalCanvasSize.height),n.resetTransform();const s=i,c=l,m=[-90,-270,90,270].includes(t);this.originalCanvasSize.width=m?c:s,this.originalCanvasSize.height=m?s:c,this.$nextTick(()=>{n.translate(this.originalCanvasSize.width/2,this.originalCanvasSize.height/2),n.rotate(t*Math.PI/180),n.drawImage(h,-s/2,-c/2,s,c),o.toBlob(g=>{const u=URL.createObjectURL(g);g&&u?a({blob:g,blobUrl:u}):r(new Error("Failed to save img."))})})})},saveImg(){return new Promise((t,i)=>{this.drawOriginalImg().then(()=>{this.$refs.originalCanvas.toBlob(a=>{const r=URL.createObjectURL(a);if(a&&r){const o={blob:a,blobUrl:r,naturalSize:{...this.$parent.$refs.cropperTool.materialNaturalSize}};if(this.$cropperRoot.chartletOn)o.hasChartlet=this.$parent.hasChartlet;else{const n=this.$parent.$refs.cropperTool.cutBoxOriginal,h={leftTop:{x:n.left,y:n.top},rightTop:{x:n.left+n.width,y:n.top},rightBottom:{x:n.left+n.width,y:n.top+n.height},leftBottom:{x:n.left,y:n.top+n.height}},s={width:n.width,height:n.height};o.cutPos=h,o.cutSize=s}t(o)}else i(new Error("Failed to save img."))})})})},downloadImg(t){this.drawOriginalImg().then(()=>{this.$refs.originalCanvas.toBlob(l=>{const a=URL.createObjectURL(l),r=document.createElement("a");t||(t=new Date().getTime()),r.download=t,r.href=a,document.body.appendChild(r),r.click(),r.remove()})})}}},Q={class:"cropper-preview"},Z=["width","height"],tt={class:"preview-info"},et={class:"info-value"},it={class:"info-value"},ot={class:"original-canvas-container"},rt=["width","height"];function at(t,i,l,a,r,o){return e.openBlock(),e.createElementBlock("div",Q,[!o.$cropperRoot.chartletOn&&o.$cropperRoot.previewVisible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[i[2]||(i[2]=e.createElementVNode("div",{class:"preview-title"},"效果预览",-1)),e.createElementVNode("div",{ref:"canvasContainer",class:"canvas-container",style:e.normalizeStyle(o.canvasContainerStyle)},[e.createElementVNode("canvas",{width:r.canvaSize.width,height:r.canvaSize.height,ref:"previewCanvas"},null,8,Z)],4),e.createElementVNode("div",tt,[e.createElementVNode("div",null,[i[0]||(i[0]=e.createElementVNode("span",{class:"info-label"},"分辨率：",-1)),e.createElementVNode("span",et,e.toDisplayString(r.cutImgDpi),1)]),e.createElementVNode("div",null,[i[1]||(i[1]=e.createElementVNode("span",{class:"info-label"},"图片比例：",-1)),e.createElementVNode("span",it,e.toDisplayString(r.cutImgRatio),1)])])],64)):e.createCommentVNode("",!0),e.createElementVNode("div",ot,[e.createElementVNode("canvas",{width:r.originalCanvasSize.width,height:r.originalCanvasSize.height,ref:"originalCanvas"},null,8,rt)])])}const nt={name:"MgCropper",components:{CropperTool:J,CropperPreview:k(K,[["render",at],["__scopeId","data-v-56e3a6cf"]])},provide(){return{$cropperRoot:this}},props:{width:{type:Number,default:770},height:{type:Number,default:300},colorPrimary:{type:String,default:"#6676FF"},colorBg:{type:String,default:"rgba(0, 0, 0, 0.8)"},originalUrl:{type:String,required:!0,default:""},equiRatio:{type:Boolean,default:!1},minCutWidth:{type:Number,default:16},minCutHeight:{type:Number,default:16},initCutWidth:{type:Number,default:16},initCutHeight:{type:Number,default:16},initCutLeft:{type:Number,default:0},initCutTop:{type:Number,default:0},rotateVisible:{type:Boolean,default:!1},previewVisible:{type:Boolean,default:!1},previewHeight:{type:[String,Number],default:"42%"},chartletOn:{type:Boolean,default:!1},chartletList:{type:Array,default(){return[]}},currentChartlet:{type:Object,default(){return{name:"",url:""}}},chartletInitLeft:{type:Number,default:10},chartletInitTop:{type:Number,default:10}},computed:{styleObj(){return{width:`${this.width}px`,height:`${this.height}px`}},hasChartlet(){return!!this.currentChartlet.url}},methods:{drawImgHandle(){this.$nextTick(()=>this.$refs.cropperPreview.drawImg())},saveImg(){return this.$refs.cropperPreview.saveImg()},downloadImg(...t){return this.$refs.cropperPreview.downloadImg(...t)},setCutBoxSize(...t){return this.$refs.cropperTool.setCutBoxSize(...t)},setCutBoxPos(...t){return this.$refs.cropperTool.setCutBoxPos(...t)},setChartletPos(...t){return this.$refs.cropperTool.setChartletPos(...t)}}},lt={key:0,class:"right-slot"};function st(t,i,l,a,r,o){const n=e.resolveComponent("cropper-tool"),h=e.resolveComponent("cropper-preview");return e.openBlock(),e.createElementBlock("div",{class:"mg-cropper",style:e.normalizeStyle(o.styleObj)},[e.createVNode(n,{ref:"cropperTool",onDrawImg:o.drawImgHandle,onImgOnload:i[0]||(i[0]=s=>t.$emit("img-onload",s)),onImgOnerror:i[1]||(i[1]=s=>t.$emit("img-onerror",s)),onImgOnabort:i[2]||(i[2]=s=>t.$emit("img-onabort",s))},null,8,["onDrawImg"]),e.withDirectives(e.createVNode(h,{ref:"cropperPreview"},null,512),[[e.vShow,!t.$slots.default&&l.previewVisible]]),t.$slots.default?(e.openBlock(),e.createElementBlock("div",lt,[e.renderSlot(t.$slots,"default",{},void 0,!0)])):e.createCommentVNode("",!0)],4)}const y=k(nt,[["render",st],["__scopeId","data-v-dbd1a6f4"]]);y.install=function(t){t.component(y.name,y)};const ht="3.0.7",I=[y],O=function(t,i={}){I.forEach(l=>{t.component(l.name,l)})},ct={version:ht,install:O,...I};w.cropper=y,w.default=ct,w.install=O,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});