vue3-image-editor/dist/index.cjs

An Image Editor component library

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("vue");/*!
 * Compressor.js v1.2.1
 * https://fengyuanchen.github.io/compressorjs
 *
 * Copyright 2018-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2023-02-28T14:09:41.732Z
 */function Re(i,e){var r=Object.keys(i);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(i);e&&(t=t.filter(function(o){return Object.getOwnPropertyDescriptor(i,o).enumerable})),r.push.apply(r,t)}return r}function me(i){for(var e=1;e<arguments.length;e++){var r=arguments[e]!=null?arguments[e]:{};e%2?Re(Object(r),!0).forEach(function(t){We(i,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(r)):Re(Object(r)).forEach(function(t){Object.defineProperty(i,t,Object.getOwnPropertyDescriptor(r,t))})}return i}function Le(i,e){if(!(i instanceof e))throw new TypeError("Cannot call a class as a function")}function xe(i,e){for(var r=0;r<e.length;r++){var t=e[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(i,Se(t.key),t)}}function Ae(i,e,r){return e&&xe(i.prototype,e),r&&xe(i,r),Object.defineProperty(i,"prototype",{writable:!1}),i}function We(i,e,r){return e=Se(e),e in i?Object.defineProperty(i,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):i[e]=r,i}function pe(){return pe=Object.assign?Object.assign.bind():function(i){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(i[t]=r[t])}return i},pe.apply(this,arguments)}function He(i,e){if(typeof i!="object"||i===null)return i;var r=i[Symbol.toPrimitive];if(r!==void 0){var t=r.call(i,e||"default");if(typeof t!="object")return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(i)}function Se(i){var e=He(i,"string");return typeof e=="symbol"?e:String(e)}var Ue={exports:{}};(function(i){typeof window>"u"||function(e){var r=e.HTMLCanvasElement&&e.HTMLCanvasElement.prototype,t=e.Blob&&function(){try{return!!new Blob}catch{return!1}}(),o=t&&e.Uint8Array&&function(){try{return new Blob([new Uint8Array(100)]).size===100}catch{return!1}}(),u=e.BlobBuilder||e.WebKitBlobBuilder||e.MozBlobBuilder||e.MSBlobBuilder,C=/^data:((.*?)(;charset=.*?)?)(;base64)?,/,h=(t||u)&&e.atob&&e.ArrayBuffer&&e.Uint8Array&&function(g){var d,y,w,B,b,v,R,m,x;if(d=g.match(C),!d)throw new Error("invalid data URI");for(y=d[2]?d[1]:"text/plain"+(d[3]||";charset=US-ASCII"),w=!!d[4],B=g.slice(d[0].length),w?b=atob(B):b=decodeURIComponent(B),v=new ArrayBuffer(b.length),R=new Uint8Array(v),m=0;m<b.length;m+=1)R[m]=b.charCodeAt(m);return t?new Blob([o?R:v],{type:y}):(x=new u,x.append(v),x.getBlob(y))};e.HTMLCanvasElement&&!r.toBlob&&(r.mozGetAsFile?r.toBlob=function(g,d,y){var w=this;setTimeout(function(){y&&r.toDataURL&&h?g(h(w.toDataURL(d,y))):g(w.mozGetAsFile("blob",d))})}:r.toDataURL&&h&&(r.msToBlob?r.toBlob=function(g,d,y){var w=this;setTimeout(function(){(d&&d!=="image/png"||y)&&r.toDataURL&&h?g(h(w.toDataURL(d,y))):g(w.msToBlob(d))})}:r.toBlob=function(g,d,y){var w=this;setTimeout(function(){g(h(w.toDataURL(d,y)))})})),i.exports?i.exports=h:e.dataURLtoBlob=h}(window)})(Ue);var De=Ue.exports,ze=function(e){return typeof Blob>"u"?!1:e instanceof Blob||Object.prototype.toString.call(e)==="[object Blob]"},Pe={strict:!0,checkOrientation:!0,retainExif:!1,maxWidth:1/0,maxHeight:1/0,minWidth:0,minHeight:0,width:void 0,height:void 0,resize:"none",quality:.8,mimeType:"auto",convertTypes:["image/png"],convertSize:5e6,beforeDraw:null,drew:null,success:null,error:null},je=typeof window<"u"&&typeof window.document<"u",L=je?window:{},ye=function(e){return e>0&&e<1/0},Xe=Array.prototype.slice;function Ie(i){return Array.from?Array.from(i):Xe.call(i)}var Ve=/^image\/.+$/;function we(i){return Ve.test(i)}function Ye(i){var e=we(i)?i.substr(6):"";return e==="jpeg"&&(e="jpg"),".".concat(e)}var ke=String.fromCharCode;function Ne(i,e,r){var t="",o;for(r+=e,o=e;o<r;o+=1)t+=ke(i.getUint8(o));return t}var $e=L.btoa;function Te(i,e){for(var r=[],t=8192,o=new Uint8Array(i);o.length>0;)r.push(ke.apply(null,Ie(o.subarray(0,t)))),o=o.subarray(t);return"data:".concat(e,";base64,").concat($e(r.join("")))}function Ge(i){var e=new DataView(i),r;try{var t,o,u;if(e.getUint8(0)===255&&e.getUint8(1)===216)for(var C=e.byteLength,h=2;h+1<C;){if(e.getUint8(h)===255&&e.getUint8(h+1)===225){o=h;break}h+=1}if(o){var g=o+4,d=o+10;if(Ne(e,g,4)==="Exif"){var y=e.getUint16(d);if(t=y===18761,(t||y===19789)&&e.getUint16(d+2,t)===42){var w=e.getUint32(d+4,t);w>=8&&(u=d+w)}}}if(u){var B=e.getUint16(u,t),b,v;for(v=0;v<B;v+=1)if(b=u+v*12+2,e.getUint16(b,t)===274){b+=8,r=e.getUint16(b,t),e.setUint16(b,1,t);break}}}catch{r=1}return r}function _e(i){var e=0,r=1,t=1;switch(i){case 2:r=-1;break;case 3:e=-180;break;case 4:t=-1;break;case 5:e=90,t=-1;break;case 6:e=90;break;case 7:e=90,r=-1;break;case 8:e=-90;break}return{rotate:e,scaleX:r,scaleY:t}}var Ke=/\.\d*(?:0|9){12}\d*$/;function Fe(i){var e=arguments.length>1&&arguments[1]!==void 0?arguments[1]:1e11;return Ke.test(i)?Math.round(i*e)/e:i}function ne(i){var e=i.aspectRatio,r=i.height,t=i.width,o=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"none",u=ye(t),C=ye(r);if(u&&C){var h=r*e;(o==="contain"||o==="none")&&h>t||o==="cover"&&h<t?r=t/e:t=r*e}else u?r=t/e:C&&(t=r*e);return{width:t,height:r}}function qe(i){for(var e=Ie(new Uint8Array(i)),r=e.length,t=[],o=0;o+3<r;){var u=e[o],C=e[o+1];if(u===255&&C===218)break;if(u===255&&C===216)o+=2;else{var h=e[o+2]*256+e[o+3],g=o+h+2,d=e.slice(o,g);t.push(d),o=g}}return t.reduce(function(y,w){return w[0]===255&&w[1]===225?y.concat(w):y},[])}function Je(i,e){var r=Ie(new Uint8Array(i));if(r[2]!==255||r[3]!==224)return i;var t=r[4]*256+r[5],o=[255,216].concat(e,r.slice(4+t));return new Uint8Array(o)}var Qe=L.ArrayBuffer,Ce=L.FileReader,V=L.URL||L.webkitURL,Ze=/\.\w+$/,et=L.Compressor,tt=function(){function i(e,r){Le(this,i),this.file=e,this.exif=[],this.image=new Image,this.options=me(me({},Pe),r),this.aborted=!1,this.result=null,this.init()}return Ae(i,[{key:"init",value:function(){var r=this,t=this.file,o=this.options;if(!ze(t)){this.fail(new Error("The first argument must be a File or Blob object."));return}var u=t.type;if(!we(u)){this.fail(new Error("The first argument must be an image File or Blob object."));return}if(!V||!Ce){this.fail(new Error("The current browser does not support image compression."));return}Qe||(o.checkOrientation=!1,o.retainExif=!1);var C=u==="image/jpeg",h=C&&o.checkOrientation,g=C&&o.retainExif;if(V&&!h&&!g)this.load({url:V.createObjectURL(t)});else{var d=new Ce;this.reader=d,d.onload=function(y){var w=y.target,B=w.result,b={},v=1;h&&(v=Ge(B),v>1&&pe(b,_e(v))),g&&(r.exif=qe(B)),h||g?!V||v>1?b.url=Te(B,u):b.url=V.createObjectURL(t):b.url=B,r.load(b)},d.onabort=function(){r.fail(new Error("Aborted to read the image with FileReader."))},d.onerror=function(){r.fail(new Error("Failed to read the image with FileReader."))},d.onloadend=function(){r.reader=null},h||g?d.readAsArrayBuffer(t):d.readAsDataURL(t)}}},{key:"load",value:function(r){var t=this,o=this.file,u=this.image;u.onload=function(){t.draw(me(me({},r),{},{naturalWidth:u.naturalWidth,naturalHeight:u.naturalHeight}))},u.onabort=function(){t.fail(new Error("Aborted to load the image."))},u.onerror=function(){t.fail(new Error("Failed to load the image."))},L.navigator&&/(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(L.navigator.userAgent)&&(u.crossOrigin="anonymous"),u.alt=o.name,u.src=r.url}},{key:"draw",value:function(r){var t=this,o=r.naturalWidth,u=r.naturalHeight,C=r.rotate,h=C===void 0?0:C,g=r.scaleX,d=g===void 0?1:g,y=r.scaleY,w=y===void 0?1:y,B=this.file,b=this.image,v=this.options,R=document.createElement("canvas"),m=R.getContext("2d"),x=Math.abs(h)%180===90,f=(v.resize==="contain"||v.resize==="cover")&&ye(v.width)&&ye(v.height),F=Math.max(v.maxWidth,0)||1/0,D=Math.max(v.maxHeight,0)||1/0,S=Math.max(v.minWidth,0)||0,U=Math.max(v.minHeight,0)||0,P=o/u,E=v.width,I=v.height;if(x){var re=[D,F];F=re[0],D=re[1];var ie=[U,S];S=ie[0],U=ie[1];var Y=[I,E];E=Y[0],I=Y[1]}f&&(P=E/I);var A=ne({aspectRatio:P,width:F,height:D},"contain");F=A.width,D=A.height;var W=ne({aspectRatio:P,width:S,height:U},"cover");if(S=W.width,U=W.height,f){var oe=ne({aspectRatio:P,width:E,height:I},v.resize);E=oe.width,I=oe.height}else{var le=ne({aspectRatio:P,width:E,height:I}),H=le.width;E=H===void 0?o:H;var z=le.height;I=z===void 0?u:z}E=Math.floor(Fe(Math.min(Math.max(E,S),F))),I=Math.floor(Fe(Math.min(Math.max(I,U),D)));var N=-E/2,ue=-I/2,se=E,ce=I,$=[];if(f){var j=0,ve=0,q=o,J=u,de=ne({aspectRatio:P,width:o,height:u},{contain:"cover",cover:"contain"}[v.resize]);q=de.width,J=de.height,j=(o-q)/2,ve=(u-J)/2,$.push(j,ve,q,J)}if($.push(N,ue,se,ce),x){var Q=[I,E];E=Q[0],I=Q[1]}R.width=E,R.height=I,we(v.mimeType)||(v.mimeType=B.type);var G="transparent";B.size>v.convertSize&&v.convertTypes.indexOf(v.mimeType)>=0&&(v.mimeType="image/jpeg");var Z=v.mimeType==="image/jpeg";if(Z&&(G="#fff"),m.fillStyle=G,m.fillRect(0,0,E,I),v.beforeDraw&&v.beforeDraw.call(this,m,R),!this.aborted&&(m.save(),m.translate(E/2,I/2),m.rotate(h*Math.PI/180),m.scale(d,w),m.drawImage.apply(m,[b].concat($)),m.restore(),v.drew&&v.drew.call(this,m,R),!this.aborted)){var ee=function(k){if(!t.aborted){var te=function(X){return t.done({naturalWidth:o,naturalHeight:u,result:X})};if(k&&Z&&v.retainExif&&t.exif&&t.exif.length>0){var ge=function(X){return te(De(Te(Je(X,t.exif),v.mimeType)))};if(k.arrayBuffer)k.arrayBuffer().then(ge).catch(function(){t.fail(new Error("Failed to read the compressed image with Blob.arrayBuffer()."))});else{var M=new Ce;t.reader=M,M.onload=function(ae){var X=ae.target;ge(X.result)},M.onabort=function(){t.fail(new Error("Aborted to read the compressed image with FileReader."))},M.onerror=function(){t.fail(new Error("Failed to read the compressed image with FileReader."))},M.onloadend=function(){t.reader=null},M.readAsArrayBuffer(k)}}else te(k)}};R.toBlob?R.toBlob(ee,v.mimeType,v.quality):ee(De(R.toDataURL(v.mimeType,v.quality)))}}},{key:"done",value:function(r){var t=r.naturalWidth,o=r.naturalHeight,u=r.result,C=this.file,h=this.image,g=this.options;if(V&&h.src.indexOf("blob:")===0&&V.revokeObjectURL(h.src),u)if(g.strict&&!g.retainExif&&u.size>C.size&&g.mimeType===C.type&&!(g.width>t||g.height>o||g.minWidth>t||g.minHeight>o||g.maxWidth<t||g.maxHeight<o))u=C;else{var d=new Date;u.lastModified=d.getTime(),u.lastModifiedDate=d,u.name=C.name,u.name&&u.type!==C.type&&(u.name=u.name.replace(Ze,Ye(u.type)))}else u=C;this.result=u,g.success&&g.success.call(this,u)}},{key:"fail",value:function(r){var t=this.options;if(t.error)t.error.call(this,r);else throw r}},{key:"abort",value:function(){this.aborted||(this.aborted=!0,this.reader?this.reader.abort():this.image.complete?this.fail(new Error("The compression process has been aborted.")):(this.image.onload=null,this.image.onabort()))}}],[{key:"noConflict",value:function(){return window.Compressor=et,i}},{key:"setDefaults",value:function(r){pe(Pe,r)}}]),i}();const at=i=>(c.pushScopeId("data-v-7c7d336a"),i=i(),c.popScopeId(),i),nt={class:"main-editor-div",id:"MainEditorId"},rt={class:"blur-div"},it={class:"canvas-resize-div",id:"CanvasImageCropRectangleIdDiv"},ot={id:"CropRectangleIdDiv",class:"resizable"},lt=at(()=>c.createElementVNode("div",{class:"show-pre-div"},[c.createElementVNode("canvas",{width:"200",height:"200",id:"canvasShowPreviewCropId"})],-1)),ut=c.defineComponent({__name:"ImageEditor",props:{fileImage:{},colorBrush:{},borderCropDivColor:{},backgroundCropDivColor:{},maxHeight:{},maxWidth:{}},emits:["finishEditing"],setup(i,{expose:e,emit:r}){const t=i;c.onMounted(async()=>{var a,n;await Q(),f.value=document.getElementById("CropRectangleIdDiv"),m.value=(a=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:a.getBoundingClientRect().top,x.value=(n=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:n.getBoundingClientRect().left}),c.watch(()=>t.fileImage,async()=>{var a,n;await Q(),f.value=document.getElementById("CropRectangleIdDiv"),m.value=(a=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:a.getBoundingClientRect().top,x.value=(n=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:n.getBoundingClientRect().left});const o=c.ref(),u=c.ref(),C=c.ref(!1),h=c.ref(4),g=c.ref(!1),d=c.ref(50),y=c.ref(0),w=c.ref(0),B=c.ref(0),b=c.ref(0),v=c.ref(0),R=c.ref(0),m=c.ref(0),x=c.ref(0),f=c.ref(document.createElement("div")),F=c.ref(""),D=c.ref(!1),S=c.ref(0),U=c.ref(0),P=c.ref(0),E=c.ref(0),I=c.ref(),re=c.ref();function ie(){t.fileImage&&(D.value=!0)}function Y(a){let n=0;if(a!=null){do n+=a.offsetTop,a=a.offsetParent;while(a);n=n<0?0:n}return n}function A(a,n){var s;a.preventDefault(),y.value=parseFloat(getComputedStyle(f.value,null).getPropertyValue("width").replace("px","")),w.value=parseFloat(getComputedStyle(f.value,null).getPropertyValue("height").replace("px","")),B.value=a.pageX,b.value=a.pageY,x.value=(s=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:s.getBoundingClientRect().left;let l=document.getElementById("CanvasImageCropRectangleIdDiv");m.value=Y(l),v.value=b.value-m.value,R.value=B.value-x.value,F.value=n,window.addEventListener("mousemove",j),window.addEventListener("mouseup",oe)}function W(a,n){var s;a.preventDefault(),y.value=parseFloat(getComputedStyle(f.value,null).getPropertyValue("width").replace("px","")),w.value=parseFloat(getComputedStyle(f.value,null).getPropertyValue("height").replace("px","")),B.value=a.touches[0].pageX,b.value=a.touches[0].pageY,x.value=(s=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:s.getBoundingClientRect().left;let l=document.getElementById("CanvasImageCropRectangleIdDiv");m.value=Y(l),v.value=b.value-m.value,R.value=B.value-x.value,F.value=n,window.addEventListener("touchmove",j),window.addEventListener("touchend",le)}function oe(a){window.removeEventListener("mousemove",j)}function le(a){window.removeEventListener("touchmove",j)}function H(a,n,l,s,p){var _,K;let T=(_=o.value)==null?void 0:_.getBoundingClientRect().width,O=(K=o.value)==null?void 0:K.getBoundingClientRect().height;l>x.value+T&&p.includes("right")&&(f.value.style.width=T-f.value.offsetLeft+"px"),l<x.value&&p.includes("left")&&(f.value.style.left="0px"),s>m.value+O&&p.includes("bottom")&&(f.value.style.height=O-f.value.offsetTop+"px"),s<m.value&&p.includes("top")&&(f.value.style.top="0px"),s+n>m.value+O&&p.includes("top")&&(f.value.style.top="",f.value.style.bottom="0px")}function z(a,n){return n=="right"?y.value+(a-B.value):y.value-(a-B.value)}function N(a,n){return n=="top"?w.value-(a-b.value):w.value+(a-b.value)}function ue(a,n){var s;let l=(s=o.value)==null?void 0:s.getBoundingClientRect().width;n>d.value&&a<x.value+l&&(f.value.style.width=n+"px")}function se(a,n){n>d.value&&a>x.value&&(f.value.style.left=R.value+(a-B.value)+"px",f.value.style.width=n+"px")}function ce(a,n){var s;let l=(s=o.value)==null?void 0:s.getBoundingClientRect().height;n>d.value&&a<m.value+l&&(f.value.style.height=n+"px",f.value.style.top=Y(f.value)-m.value+"px",f.value.style.bottom="")}function $(a,n){var s;let l=(s=o.value)==null?void 0:s.getBoundingClientRect().height;n>d.value&&a>m.value&&(a+n>m.value+l?(f.value.style.top="",f.value.style.bottom="0px"):f.value.style.top=v.value+a-b.value+"px",f.value.style.height=n+"px")}async function j(a){let n,l,s=q(a),p=ve(a);switch(F.value){case"bottom-right":n=z(s,"right"),l=N(p,"bottom"),H(n,l,s,p,"bottom-right"),ue(s,n),ce(p,l);break;case"bottom-left":n=z(s,"left"),l=N(p,"bottom"),H(n,l,s,p,"bottom-left"),se(s,n),ce(p,l);break;case"top-right":n=z(s,"right"),l=N(p,"top"),H(n,l,s,p,"top-right"),ue(s,n),$(p,l);break;case"top-left":n=z(s,"left"),l=N(p,"top"),H(n,l,s,p,"top-left"),se(s,n),$(p,l);break}}function ve(a){var s;let n=a.pageY?a.pageY:a.touches[0].pageY,l=(s=document.getElementById("MainEditorId"))==null?void 0:s.scrollTop;return n+l}function q(a){return a.pageX?a.pageX:a.touches[0].pageX}async function J(){let a=document.getElementById("canvasShowPreviewCropId");if(a.getContext&&a){let n=a.getContext("2d"),l=new Image;return l.src=URL.createObjectURL(I.value),new Promise((s,p)=>{l.onload=()=>{var Be,Ee;let T=parseFloat(getComputedStyle(f.value,null).getPropertyValue("left").replace("px","")),O=parseFloat(getComputedStyle(f.value,null).getPropertyValue("top").replace("px","")),_=(Be=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:Be.getBoundingClientRect().width,K=(Ee=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:Ee.getBoundingClientRect().height,fe=l.naturalWidth/_,he=l.naturalHeight/K;a.width=Math.ceil(f.value.getBoundingClientRect().width*fe),a.height=Math.ceil(f.value.getBoundingClientRect().height*he),n.drawImage(l,T*fe,O*he,f.value.getBoundingClientRect().width*fe,f.value.getBoundingClientRect().height*he,0,0,f.value.getBoundingClientRect().width*fe,f.value.getBoundingClientRect().height*he),s(l.naturalWidth)},l.onerror=p})}}async function de(a){return new Promise((n,l)=>{new tt(a,{strict:!0,convertTypes:"image/png",convertSize:5e6,minHeight:0,minWidth:0,quality:.6,success:n,error:l})})}async function Q(){if(t.fileImage){console.log(1),console.log(t.fileImage);const a=t.fileImage,n=await de(a);console.log(3),I.value=n,G(n)}}function G(a){if(console.log(4),o.value=document.getElementById("mainImageCanvasId"),o.value.getContext&&o.value){u.value=o.value.getContext("2d");let n=new Image;console.log(5),n.src=URL.createObjectURL(a),n.onload=function(){var p,T;let l=n.naturalWidth,s=n.naturalHeight;o.value.width=l,o.value.height=s,(p=u.value)==null||p.drawImage(n,0,0,n.naturalWidth,n.naturalHeight,0,0,l,s),re.value=(T=u.value)==null?void 0:T.getImageData(0,0,n.naturalWidth,n.naturalHeight)},f.value.style.left="0px",f.value.style.top="0px",f.value.style.width=d.value+"px",f.value.style.height=d.value+"px"}}async function Z(a){var s;let n=(s=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:s.getBoundingClientRect().top;return a.offsetY?a.offsetY:a.touches[0].clientY-n}async function ee(a){var s;let n=(s=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:s.getBoundingClientRect().left;return a.offsetX?a.offsetX:a.touches[0].clientX-n}async function be(a){var n,l,s,p,T,O;if(a.preventDefault(),g.value){C.value=!0,S.value=(n=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:n.getBoundingClientRect().width,U.value=(l=document.getElementById("CanvasImageCropRectangleIdDiv"))==null?void 0:l.getBoundingClientRect().height,P.value=((s=o.value)==null?void 0:s.width)/S.value,E.value=((p=o.value)==null?void 0:p.height)/U.value;let _=await ee(a)*P.value,K=await Z(a)*E.value;u.value.lineWidth=h.value*P.value,u.value.lineCap="round",u.value.strokeStyle=t.colorBrush==""?"#000000":t.colorBrush,(T=u.value)==null||T.beginPath(),(O=u.value)==null||O.moveTo(_,K)}}function k(a){a.preventDefault(),C.value=!1}async function te(a){var s,p;if(a.preventDefault(),!C.value)return;let n=Math.ceil(await ee(a)*P.value),l=Math.ceil(await Z(a)*E.value);(s=u.value)==null||s.lineTo(n,l),(p=u.value)==null||p.stroke()}function ge(){t.fileImage&&(g.value=!0)}function M(){var a;t.fileImage&&((a=o.value)==null||a.toBlob(n=>{const l=URL.createObjectURL(n),s=document.createElement("a");s.href=l,s.setAttribute("download","test"),document.body.appendChild(s),s.click(),s.remove()}))}async function ae(){var a;D.value?(await J(),document.getElementById("canvasShowPreviewCropId").toBlob(l=>{I.value=l,G(I.value),D.value=!1})):g.value&&((a=o.value)==null||a.toBlob(n=>{I.value=n,G(I.value),g.value=!1}))}async function X(){g.value=!1,D.value=!1}function Oe(){var n;const a=new File([I.value],((n=t.fileImage)==null?void 0:n.name.split(".")[0])+".png",{type:"image/png"});r("finishEditing",a)}return e({enablePainting:ge,enableCroping:ie,finishEditing:Oe,download:M,saveChanges:ae,cancelChanges:X}),(a,n)=>(c.openBlock(),c.createElementBlock("div",nt,[c.createElementVNode("div",rt,[c.createElementVNode("div",it,[c.createElementVNode("canvas",{style:c.normalizeStyle({maxWidth:a.maxWidth?a.maxWidth+"px":"unset",maxHeight:a.maxHeight?a.maxHeight+"px":"unset"}),class:"canvas-style",onTouchmove:te,onTouchend:k,onTouchstart:be,onMousedown:be,onMouseup:k,onMousemove:te,width:"400",height:"300",id:"mainImageCanvasId"},null,36),c.withDirectives(c.createElementVNode("div",ot,[c.createElementVNode("div",{class:"resizers",style:c.normalizeStyle({border:`3px solid ${a.borderCropDivColor}`})},[c.createElementVNode("div",{style:c.normalizeStyle({border:`3px solid ${a.borderCropDivColor}`,background:a.backgroundCropDivColor}),onTouchstart:n[0]||(n[0]=l=>W(l,"top-left")),onMousedown:n[1]||(n[1]=l=>A(l,"top-left")),class:"resizer top-left"},null,36),c.createElementVNode("div",{style:c.normalizeStyle({border:`3px solid ${a.borderCropDivColor}`,background:a.backgroundCropDivColor}),onTouchstart:n[2]||(n[2]=l=>W(l,"top-right")),onMousedown:n[3]||(n[3]=l=>A(l,"top-right")),class:"resizer top-right"},null,36),c.createElementVNode("div",{style:c.normalizeStyle({border:`3px solid ${a.borderCropDivColor}`,background:a.backgroundCropDivColor}),onTouchstart:n[4]||(n[4]=l=>W(l,"bottom-left")),onMousedown:n[5]||(n[5]=l=>A(l,"bottom-left")),class:"resizer bottom-left"},null,36),c.createElementVNode("div",{style:c.normalizeStyle({border:`3px solid ${a.borderCropDivColor}`,background:a.backgroundCropDivColor}),onTouchstart:n[6]||(n[6]=l=>W(l,"bottom-right")),onMousedown:n[7]||(n[7]=l=>A(l,"bottom-right")),class:"resizer bottom-right"},null,36)],4)],512),[[c.vShow,D.value]])])]),lt]))}});const st=(i,e)=>{const r=i.__vccOpts||i;for(const[t,o]of e)r[t]=o;return r},Me=st(ut,[["__scopeId","data-v-7c7d336a"]]),ct={install:i=>{i.component("ImageEditor",Me)}};exports.ImageEditor=Me;exports.default=ct;