vue-select-avatar/dist/index.js

一个头像集选择/裁剪的组件库

import{computed as e,createCommentVNode as t,createElementBlock as n,createElementVNode as r,defineComponent as i,mergeDefaults as a,nextTick as o,normalizeClass as s,normalizeStyle as c,onMounted as l,onUnmounted as u,openBlock as d,reactive as f,ref as p,renderSlot as m,unref as h,watch as g,watchEffect as _}from"vue";const v=`image/jpeg, image/png, image/webp, image/bmp, image/svg+xml, image/avif, image/tiff`,y=Object.freeze({size:300,view:.6,grid:!1,step:.05,ctrlStep:.02,shiftStep:2,reverse:!1,minView:10,padding:10,arrow:!0,wasd:!0,mask:`clip`,mode:`fixed-view`,border:!1}),b=()=>({viewportWidth:0,viewportHeight:0,viewX:0,viewY:0,viewSize:0,imageX:0,imageY:0,imageWidth:0,imageHeight:0,imageScale:1});var x={UNKNOWN:`未知错误`,CANCEL:`取消`,NOT_IMAGE_FILES:`非图片文件`,IMAGE_FILE_TOO_LARGE:`图片文件过大`,IMAGE_TOO_SMALL:`图片尺寸过小`,IMAGE_TOO_LARGE:`图片尺寸过大`,IMAGE_LOAD_FAILED:`图片加载失败`,CANVAS_TO_BLOB_FAILED:`canvas 转 blob 失败`,BLOB_TO_BASE64_FAILED:`blob 转 base64 失败`,CANVAS_CONTEXT_NOT_DEFINED:`canvas context 未定义`,NO_IMAGE_SELECTED:`未选择图片`},S={UNKNOWN:`Unknown error`,CANCEL:`Canceled`,NOT_IMAGE_FILES:`File is not an image`,IMAGE_FILE_TOO_LARGE:`Image file is too large`,IMAGE_TOO_SMALL:`Image dimensions are too small`,IMAGE_TOO_LARGE:`Image dimensions are too large`,IMAGE_LOAD_FAILED:`Image load failed`,CANVAS_TO_BLOB_FAILED:`Failed to convert canvas to blob`,BLOB_TO_BASE64_FAILED:`Failed to convert blob to base64`,CANVAS_CONTEXT_NOT_DEFINED:`Canvas context is undefined`,NO_IMAGE_SELECTED:`No image selected`};let C=x;function w(e){return C[e]||e}function T(e){C=e}var E=class e extends Error{static is(t){return t instanceof e}static isCancel(t){return e.is(t)&&t.code===`CANCEL`}code;constructor(e){super(w(e)),this.name=`AvatarError`,this.code=e}};const D=e=>new Promise((t,n)=>{let{accept:r,multiple:i}=e||{},a=document.createElement(`input`);a.type=`file`,r&&(a.accept=r),i&&(a.multiple=i),a.onchange=()=>{let e=Array.from(a.files||[]);e.length>0?t(e):n(new E(`CANCEL`))},a.oncancel=()=>n(new E(`CANCEL`)),a.onerror=(e,t,r,i,a)=>n(a||new E(`UNKNOWN`)),a.click()}),O=async e=>{let{accept:t=v,maxFileSize:n=2*1024*1024,minSize:r,maxSize:i=5e3,resizeToMax:a=!1,compress:o=!1,quality:s=.8,minVectorSize:c=1024}=e||{},[l]=await D({accept:t});if(!l||!l.type.startsWith(`image/`))throw new E(`NO_IMAGE_SELECTED`);if(l.size>n)throw new E(`IMAGE_FILE_TOO_LARGE`);let u=await k(l);if(F(l)){if(Math.min(u.width,u.height)<c){let e=c/Math.min(u.width,u.height);u={width:Math.floor(u.width*e),height:Math.floor(u.height*e)}}}else{if(typeof r==`number`&&Math.min(u.width,u.height)<r)throw new E(`IMAGE_TOO_SMALL`);if(Math.max(u.width,u.height)>i){if(!a)throw new E(`IMAGE_TOO_LARGE`);let e=i/Math.max(u.width,u.height);u={width:Math.floor(u.width*e),height:Math.floor(u.height*e)}}}return A(l,o)?l=await j(l,u,`image/png`,s):(a||l.type!==`image/png`)&&(l=await j(l,u,`image/png`)),{file:l,...u}},k=async e=>{let t=await M(URL.createObjectURL(e),!0);return{width:t.width,height:t.height}},A=(e,t)=>typeof t==`number`?e.size>t:!!t,j=async(e,t,n,r)=>{let i=await M(URL.createObjectURL(e),!0),a=document.createElement(`canvas`);a.width=t.width,a.height=t.height;let o=a.getContext(`2d`);if(!o)throw new E(`CANVAS_CONTEXT_NOT_DEFINED`);o.drawImage(i,0,0,t.width,t.height);let s=await N(a,n||e.type,r);return new File([s],e.name,{type:n||e.type})},M=async(e,t=!1)=>new Promise((n,r)=>{let i=new Image;i.onload=()=>{t&&URL.revokeObjectURL(i.src),n(i)},i.onerror=()=>{t&&URL.revokeObjectURL(i.src),r(new E(`IMAGE_LOAD_FAILED`))},i.src=e}),N=(e,t,n)=>new Promise((r,i)=>{e.toBlob(e=>{e?r(e):i(new E(`CANVAS_TO_BLOB_FAILED`))},t,n)}),P=e=>new Promise((t,n)=>{let r=new FileReader;r.onload=()=>{typeof r.result==`string`?t(r.result):n(new E(`BLOB_TO_BASE64_FAILED`))},r.onerror=e=>{n(e)},r.readAsDataURL(e)}),F=e=>e.type.startsWith(`image/svg`),ee=async(e,t,n)=>{let{format:r=`file`,size:i,type:a=`image/png`,quality:o=1,filename:s,maxSize:c,useOriginSize:l=!0,backgroundColor:u=`#ffffff`}=n||{},d=e.url,f=!1;d||(d=URL.createObjectURL(e.file),f=!0);let p=await M(d);f&&URL.revokeObjectURL(d);let m=document.createElement(`canvas`),h=m.getContext(`2d`);if(!h)throw new E(`CANVAS_CONTEXT_NOT_DEFINED`);let g=t.viewSize/t.imageScale,_=(t.viewX-t.imageX)/t.imageScale,v=(t.viewY-t.imageY)/t.imageScale,y=t.viewSize/t.imageScale;typeof i==`number`?(g>i||!l)&&(g=i):typeof c==`number`&&g>c&&(g=c),m.width=g,m.height=g,a===`image/jpeg`&&u&&(h.fillStyle=u,h.fillRect(0,0,g,g)),h.drawImage(p,_,v,y,y,0,0,g,g);let b=await N(m,a,o);return r===`file`?new File([b],s||e.file.name,{type:a}):await P(b)},I=()=>`clipPath`in document.createElement(`div`).style,L=(e,t,n)=>{let r={x:0,y:0};switch(n){case`top-left`:r.x+=e.x-t.viewX,r.y+=e.y-t.viewY;break;case`top-right`:r.x+=e.x-(t.viewX+t.viewSize),r.y+=e.y-t.viewY;break;case`bottom-left`:r.x+=e.x-t.viewX,r.y+=e.y-(t.viewY+t.viewSize);break;case`bottom-right`:r.x+=e.x-(t.viewX+t.viewSize),r.y+=e.y-(t.viewY+t.viewSize);break}return r},R=e=>({width:e.width||e.size,height:e.height||e.size}),z=(e,t,n)=>((!e||e<=0)&&(e=t),e<=1?e=Math.min(n.viewportWidth,n.viewportHeight)*e:e),B=(e,t,n,r)=>((!e||e<=0)&&(e=t),e<1&&(e=r.viewSize*e),n*(e/r.viewSize)),V=e=>(e=Number(e),!Number.isNaN(e)&&e>0),te=e=>{let{imageMoving:t}=e,n=p(!1);return g(t,e=>{e&&(n.value=!1)}),{backing:n,handleTransitionEnd:e=>{`propertyName`in e&&e.propertyName!==`transform`||(n.value=!1)}}},H=`broadcast:info`,U=`broadcast:pos`,W=e=>{let{elEmitter:t}=e,n=document.createElement(`div`);return e.broadcastInfo=()=>{t.dispatchEvent(new CustomEvent(H,{detail:{...e.info.value}}))},e.broadcastPos=()=>{t.dispatchEvent(new CustomEvent(U,{detail:{...e.pos}}))},g(()=>e.pos,e.broadcastPos,{deep:!0}),{emitter:n}},G=e=>{let t=f(b()),n=p(),r=e=>{n.value=e.detail},i=e=>{Object.assign(t,e.detail)},a=()=>{};return g(()=>e.viewportRef,e=>{if(a(),!e?.elEmitter)return;let t=e.elEmitter;t.addEventListener(H,r),t.addEventListener(U,i),a=()=>{t.removeEventListener(H,r),t.removeEventListener(U,i)}},{immediate:!0}),u(a),{pos:t,info:n}},K=e=>{let{props:t,info:n,pos:r,backing:i}=e;e.checkImageBack=(e=!0)=>{if(!n.value||t.mode===`fixed-image`)return;let a=r.imageWidth*r.imageScale,o=r.imageHeight*r.imageScale,s=r.imageX;s>r.viewX?s=r.viewX:s<r.viewX+r.viewSize-a&&(s=r.viewX+r.viewSize-a);let c=r.imageY;c>r.viewY?c=r.viewY:c<r.viewY+r.viewSize-o&&(c=r.viewY+r.viewSize-o),(s!==r.imageX||c!==r.imageY)&&(r.imageX=s,r.imageY=c,i.value=e)}},ne=e=>{let{pos:t,info:n}=e;e.checkViewPosition=()=>{n.value&&(t.viewX<t.imageX&&(t.viewX=t.imageX),t.viewY<t.imageY&&(t.viewY=t.imageY),t.viewX+t.viewSize>t.imageX+t.imageWidth*t.imageScale&&(t.viewX=t.imageX+t.imageWidth*t.imageScale-t.viewSize),t.viewY+t.viewSize>t.imageY+t.imageHeight*t.imageScale&&(t.viewY=t.imageY+t.imageHeight*t.imageScale-t.viewSize))}},re=()=>{let e=document.createElement(`div`);return u(()=>{e.remove()}),e},ie=()=>{let e=p(),t;return u(()=>{e.value?.url&&URL.revokeObjectURL(e.value.url)}),_(()=>{t&&t!==e.value?.url&&URL.revokeObjectURL(t),t=e.value?.url}),e},ae=e=>{let{props:t,pos:n,info:r,minImageScale:i,step:a,ctrlStep:s,shiftStep:c,viewportRef:u}=e,d=!0,f=()=>{let{width:e,height:r}=R(t);n.viewportWidth=e===`full`?u.value?.clientWidth||0:e,n.viewportHeight=r===`full`?u.value?.clientHeight||0:r,(t.mode===`fixed-view`||d)&&(n.viewSize=z(t.view,y.view,n),n.viewX=(n.viewportWidth-n.viewSize)/2,n.viewY=(n.viewportHeight-n.viewSize)/2),d=!1},p=a=>{if(r.value=a,r.value.url=URL.createObjectURL(a.file),e.broadcastInfo(),n.imageWidth=a.width,n.imageHeight=a.height,t.mode===`fixed-view`)n.imageScale=Math.max(n.viewSize/a.width,n.viewSize/a.height),n.imageX=(n.viewportWidth-a.width*n.imageScale)/2,n.imageY=(n.viewportHeight-a.height*n.imageScale)/2,i.value=n.imageScale,m();else if(t.mode===`fixed-image`)n.imageScale=Math.abs(a.width-n.viewportWidth)>Math.abs(a.height-n.viewportHeight)?(n.viewportWidth-t.padding*2)/a.width:(n.viewportHeight-t.padding*2)/a.height,n.imageX=(n.viewportWidth-a.width*n.imageScale)/2,n.imageY=(n.viewportHeight-a.height*n.imageScale)/2,n.viewSize=Math.min(n.imageWidth,n.imageHeight)*n.imageScale,n.viewX=(n.viewportWidth-n.viewSize)/2,n.viewY=(n.viewportHeight-n.viewSize)/2;else throw Error(`Invalid mode: ${t.mode}`)},m=()=>{a.value=B(t.step,y.step,i.value,n),s.value=B(t.ctrlStep,y.step,i.value,n),c.value=B(t.shiftStep,y.step,i.value,n)};g([()=>t.size,()=>t.width,()=>t.height,()=>t.view],f),g([()=>t.step,()=>t.ctrlStep,()=>t.shiftStep,()=>n.viewSize,i],m),g(()=>t.mode,()=>{r.value&&p(r.value)}),g(()=>t.info,e=>{e&&p(e)});let{width:h,height:_}=R(t),v=h===`full`||_===`full`;return v||f(),l(async()=>{await o(),v&&f(),t.info&&p(t.info)}),{positionInit:p}},oe=e=>{let{props:t,pos:n,info:r}=e,i=i=>{if(t.mode===`fixed-image`){if(t.arrow)switch(i.key){case`ArrowUp`:--n.viewY;break;case`ArrowRight`:n.viewX+=1;break;case`ArrowDown`:n.viewY+=1;break;case`ArrowLeft`:--n.viewX;break}if(t.wasd)switch(i.key){case`w`:--n.viewY;break;case`d`:n.viewX+=1;break;case`s`:n.viewY+=1;break;case`a`:--n.viewX;break}e.checkViewPosition()}else{if(!r.value)return;if(t.arrow)switch(i.key){case`ArrowUp`:--n.imageY;break;case`ArrowRight`:n.imageX+=1;break;case`ArrowDown`:n.imageY+=1;break;case`ArrowLeft`:--n.imageX;break}if(t.wasd)switch(i.key){case`w`:--n.imageY;break;case`d`:n.imageX+=1;break;case`s`:n.imageY+=1;break;case`a`:--n.imageX;break}e.checkImageBack()}},a;g([()=>t.wasd,()=>t.arrow],()=>{let e=t.wasd||t.arrow;e!==a&&(a=e,e?document.addEventListener(`keydown`,i):document.removeEventListener(`keydown`,i))},{immediate:!0}),u(()=>{document.removeEventListener(`keydown`,i)})},q=e=>{let t=p(!1),n=n=>{n.key===e&&(t.value=!0)},r=n=>{n.key===e&&(t.value=!1)};return l(()=>{window.addEventListener(`keydown`,n),window.addEventListener(`keyup`,r)}),u(()=>{window.removeEventListener(`keydown`,n),window.removeEventListener(`keyup`,r)}),t},se=e=>{let{imageMoving:t,viewMoving:n,viewResizing:r,info:i,pos:a,props:o,viewportRef:s,pointPosition:c}=e,l=p({x:0,y:0}),u=p({x:0,y:0}),d=p({x:0,y:0}),f=p({x:0,y:0}),m=p({x:0,y:0}),h=e=>{if(o.mode===`fixed-image`)return x(e);i.value&&(e.preventDefault(),e.stopPropagation(),l.value.x=e.clientX,l.value.y=e.clientY,t.value=!0,document.addEventListener(`mousemove`,g),document.addEventListener(`mouseup`,_))},g=e=>{e.preventDefault(),e.stopPropagation(),a.imageX+=e.clientX-l.value.x,a.imageY+=e.clientY-l.value.y,l.value.x=e.clientX,l.value.y=e.clientY},_=()=>{t.value=!1,document.removeEventListener(`mousemove`,g),document.removeEventListener(`mouseup`,_),e.checkImageBack()},v=(e,t)=>{if(!s.value)return;e.preventDefault(),e.stopPropagation(),r.value=!0,c.value=t;let{left:n,top:i}=s.value.getBoundingClientRect();f.value.x=n,f.value.y=i,l.value.x=e.clientX-n,l.value.y=e.clientY-i,m.value=L(l.value,a,t),l.value.x-=m.value.x,l.value.y-=m.value.y,document.addEventListener(`mousemove`,y),document.addEventListener(`mouseup`,b)},y=t=>{if(!s.value)return;t.preventDefault(),t.stopPropagation();let n={x:t.clientX-f.value.x,y:t.clientY-f.value.y};n.x-=m.value.x,n.y-=m.value.y,e.resizeView(n),l.value=n},b=()=>{r.value=!1,c.value=void 0,document.removeEventListener(`mousemove`,y),document.removeEventListener(`mouseup`,b)},x=e=>{o.mode===`fixed-view`||!s.value||(e.preventDefault(),e.stopPropagation(),n.value=!0,u.value.x=e.clientX,u.value.y=e.clientY,d.value.x=a.viewX,d.value.y=a.viewY,document.addEventListener(`mousemove`,S),document.addEventListener(`mouseup`,C))},S=t=>{t.preventDefault(),t.stopPropagation(),a.viewX=t.clientX-u.value.x+d.value.x,a.viewY=t.clientY-u.value.y+d.value.y,e.checkViewPosition()},C=()=>{n.value=!1,document.removeEventListener(`mousemove`,S),document.removeEventListener(`mouseup`,C)};return{handleMouseDown:h,handlePointMouseDown:v}},ce=e=>{let{pos:t,pointPosition:n,props:r,info:i}=e;e.resizeView=e=>{switch(n.value){case`top-left`:let n=e.x-t.viewX,a=e.y-t.viewY,o=n;e.x>=t.viewX+a&&e.x<=t.viewX+t.viewSize+a&&(o=a),t.viewX+=o,t.viewY+=o,t.viewSize-=o,t.viewSize<r.minView&&(t.viewX+=t.viewSize-r.minView,t.viewY+=t.viewSize-r.minView,t.viewSize=r.minView),i.value&&t.viewX<t.imageX&&(t.viewSize-=t.imageX-t.viewX,t.viewY+=t.imageX-t.viewX,t.viewX=t.imageX),i.value&&t.viewY<t.imageY&&(t.viewSize-=t.imageY-t.viewY,t.viewX+=t.imageY-t.viewY,t.viewY=t.imageY);break;case`top-right`:let s=e.x-(t.viewX+t.viewSize),c=e.y-t.viewY;e.x>=t.viewX&&e.x<=t.viewX+t.viewSize-c?(t.viewY+=c,t.viewSize-=c,t.viewSize<r.minView&&(t.viewY+=t.viewSize-r.minView,t.viewSize=r.minView)):(t.viewY-=s,t.viewSize+=s,t.viewSize<r.minView&&(t.viewY+=t.viewSize-r.minView,t.viewSize=r.minView)),i.value&&t.viewY<t.imageY&&(t.viewSize-=t.imageY-t.viewY,t.viewY=t.imageY),i.value&&t.viewX+t.viewSize>t.imageX+t.imageWidth*t.imageScale&&(t.viewY-=t.imageX+t.imageWidth*t.imageScale-(t.viewX+t.viewSize),t.viewSize=t.imageX+t.imageWidth*t.imageScale-t.viewX);break;case`bottom-left`:let l=e.x-t.viewX,u=e.y-(t.viewY+t.viewSize);e.x>=t.viewX-u&&e.x<=t.viewX-u+(t.viewSize+u)?(t.viewX-=u,t.viewSize+=u,t.viewSize<r.minView&&(t.viewX=t.viewX+t.viewSize-r.minView,t.viewSize=r.minView)):(t.viewX+=l,t.viewSize-=l,t.viewSize<r.minView&&(t.viewX=t.viewX+t.viewSize-r.minView,t.viewSize=r.minView)),i.value&&t.viewX<t.imageX&&(t.viewSize-=t.imageX-t.viewX,t.viewX=t.imageX),i.value&&t.viewY+t.viewSize>t.imageY+t.imageHeight*t.imageScale&&(t.viewX-=t.imageY+t.imageHeight*t.imageScale-(t.viewY+t.viewSize),t.viewSize=t.imageY+t.imageHeight*t.imageScale-t.viewY);break;case`bottom-right`:let d=e.x-(t.viewX+t.viewSize),f=e.y-(t.viewY+t.viewSize);e.x>=t.viewX&&e.x<=t.viewX+t.viewSize+f?t.viewSize+=f:t.viewSize+=d,t.viewSize<r.minView&&(t.viewSize=r.minView),i.value&&t.viewX+t.viewSize>t.imageX+t.imageWidth*t.imageScale&&(t.viewSize=t.imageX+t.imageWidth*t.imageScale-t.viewX),i.value&&t.viewY+t.viewSize>t.imageY+t.imageHeight*t.imageScale&&(t.viewSize=t.imageY+t.imageHeight*t.imageScale-t.viewY);break}}},le=e=>{let{pos:t,showViewLayer:n,props:r}=e,i=f({}),a=f({}),o=f({}),s=f({}),c=f({}),l=f({});return _(()=>{let{width:e,height:u}=R(r),d=V(r.border)?Number(r.border):1;if(i.width=e===`full`?`100%`:`${t.viewportWidth}px`,i.height=u===`full`?`100%`:`${t.viewportHeight}px`,i[`--border-width`]=`${d}px`,s.width=`${t.imageWidth}px`,s.height=`${t.imageHeight}px`,s.transform=`translate3d(${t.imageX}px, ${t.imageY}px, 0px) scale(${t.imageScale})`,r.mode===`fixed-image`||V(r.border)?(o.width=`${t.viewSize+d*2}px`,o.height=`${t.viewSize+d*2}px`,o.transform=`translate3d(${t.viewX-d}px, ${t.viewY-d}px, 0px)`):(o.width=`${t.viewSize}px`,o.height=`${t.viewSize}px`,o.transform=`translate3d(${t.viewX}px, ${t.viewY}px, 0px)`),l.width=`${t.viewSize+d*2}px`,l.height=`${t.viewSize+d*2}px`,l.transform=`translate3d(${t.viewX-d}px, ${t.viewY-d}px, 0px)`,r.mask===`clip`){let{viewX:e,viewY:n,viewSize:r}=t;a.clipPath=`polygon(0% 0%, 0% 100%, ${e}px 100%, ${e}px ${n}px, ${e+r}px ${n}px, ${e+r}px ${n+r}px, ${e}px ${n+r}px, ${e}px 100%, 100% 100%, 100% 0%)`}else a.clipPath=void 0;n.value&&(c.width=`${t.imageWidth}px`,c.height=`${t.imageHeight}px`,c.transform=`translate3d(${t.imageX-t.viewX}px, ${t.imageY-t.viewY}px, 0px) scale(${t.imageScale})`)}),{viewportStyle:i,maskStyle:a,viewStyle:o,imageStyle:s,innerImageStyle:c,consolesStyle:l}},ue=e=>{let{info:t,imageMoving:n,pos:r,minImageScale:i,viewportRef:a,pointPosition:o,viewResizing:s,props:c,viewMoving:l}=e,u=p(),d=p(),f=p(!1),m=p({x:0,y:0}),h=p({x:0,y:0}),g=p({x:0,y:0}),_=p({x:0,y:0}),v=e=>{if(c.mode===`fixed-image`)return E(e);if(t.value){if(e.preventDefault(),e.stopPropagation(),e.touches.length===1){let t=e.touches[0];u.value={x:t.clientX,y:t.clientY},f.value=!1}else if(e.touches.length>=2){let t=e.touches[0],n=e.touches[1];f.value=!0,m.value={x:(t.clientX+n.clientX)/2,y:(t.clientY+n.clientY)/2},d.value=Math.hypot(t.clientX-n.clientX,t.clientY-n.clientY)}n.value=!0,document.addEventListener(`touchmove`,y,{passive:!1}),document.addEventListener(`touchend`,b),document.addEventListener(`touchcancel`,b)}},y=e=>{if(!(!t.value||!n.value)){if(e.preventDefault(),e.stopPropagation(),!f.value){let t=e.touches[0];if(u.value){let e=t.clientX-u.value.x,n=t.clientY-u.value.y;r.imageX+=e,r.imageY+=n,u.value={x:t.clientX,y:t.clientY}}}else if(e.touches.length>=2){let t=e.touches[0],n=e.touches[1],o=Math.hypot(t.clientX-n.clientX,t.clientY-n.clientY),s={x:(t.clientX+n.clientX)/2,y:(t.clientY+n.clientY)/2},c=s.x-m.value.x,l=s.y-m.value.y;if(r.imageX+=c,r.imageY+=l,m.value=s,d.value){let e=o/d.value,t=Math.max(i.value,r.imageScale*e),n=a.value.getBoundingClientRect(),s=m.value.x-n.left,c=m.value.y-n.top;r.imageX=s-(s-r.imageX)*(t/r.imageScale),r.imageY=c-(c-r.imageY)*(t/r.imageScale),r.imageScale=t,d.value=o}}}},b=t=>{if(n.value){if(t.touches.length===1){let e=t.touches[0];u.value={x:e.clientX,y:e.clientY},f.value=!1}t.touches.length>0||(u.value=void 0,d.value=void 0,f.value=!1,n.value=!1,e.checkImageBack(),document.removeEventListener(`touchmove`,y),document.removeEventListener(`touchend`,b),document.removeEventListener(`touchcancel`,x))}},x=e=>{b(e)},S=(e,t)=>{if(!a.value)return;e.preventDefault(),e.stopPropagation(),s.value=!0,o.value=t;let n=e.touches[0],{left:i,top:c}=a.value.getBoundingClientRect();h.value.x=i,h.value.y=c,m.value.x=n.clientX-i,m.value.y=n.clientY-c,_.value=L(m.value,r,t),m.value.x-=_.value.x,m.value.y-=_.value.y,document.addEventListener(`touchmove`,C,{passive:!1}),document.addEventListener(`touchend`,w),document.addEventListener(`touchcancel`,T)},C=t=>{if(!a.value)return;t.preventDefault(),t.stopPropagation();let n=t.touches[0],r={x:n.clientX-h.value.x,y:n.clientY-h.value.y};r.x-=_.value.x,r.y-=_.value.y,e.resizeView(r),m.value=r},w=e=>{e.touches.length>0||(s.value=!1,o.value=void 0,document.removeEventListener(`touchmove`,C),document.removeEventListener(`touchend`,w),document.removeEventListener(`touchcancel`,T))},T=e=>{w(e)},E=e=>{if(c.mode===`fixed-view`||!a.value)return;e.preventDefault(),e.stopPropagation(),l.value=!0;let t=e.touches[0];m.value.x=t.clientX,m.value.y=t.clientY,g.value.x=r.viewX,g.value.y=r.viewY,document.addEventListener(`touchmove`,D,{passive:!1}),document.addEventListener(`touchend`,O),document.addEventListener(`touchcancel`,k)},D=t=>{t.preventDefault(),t.stopPropagation();let n=t.touches[0];r.viewX=n.clientX-m.value.x+g.value.x,r.viewY=n.clientY-m.value.y+g.value.y,e.checkViewPosition()},O=e=>{e.touches.length>0||(l.value=!1,document.removeEventListener(`touchmove`,D),document.removeEventListener(`touchend`,O),document.removeEventListener(`touchcancel`,k))},k=e=>{O(e)};return{handleTouchStart:v,handlePointTouchStart:S}},de=e=>{let{props:t,imageMoving:n,pos:r,viewportRef:i,info:a,minImageScale:o,pressCtrl:s,pressShift:c,step:l,ctrlStep:u,shiftStep:d}=e,f=(e=-1)=>{let n=l.value;return t.shiftStep>0&&c.value?n=d.value:t.ctrlStep>0&&s.value&&(n=u.value),e>0&&(n=-n),t.reverse&&(n=-n),n};return{handleWheel:s=>{if(!a.value||n.value||t.mode===`fixed-image`)return;s.preventDefault(),s.stopPropagation();let c=i.value.getBoundingClientRect(),l=s.clientX-c.left,u=s.clientY-c.top,d=r.imageScale,p=f(s.deltaY),m=Math.max(o.value,d+p);r.imageX=l-(l-r.imageX)*(m/d),r.imageY=u-(u-r.imageY)*(m/d),r.imageScale=m,e.checkImageBack(!1)}}};var J=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n};const Y=[`src`];var X=J(i({__name:`Preview`,props:{size:{default:180},viewportRef:{},round:{type:Boolean},bg:{}},setup(r){let i=r,{pos:a,info:o}=G(i),u=p(),f=p(0),m=()=>{i.size===`full`&&u.value&&(u.value.classList.add(`full-gauging`),f.value=Math.min(u.value.clientWidth,u.value.clientHeight),u.value.classList.remove(`full-gauging`))};l(m),g(()=>i.size,e=>{typeof e==`number`?f.value=e:m()},{immediate:!0});let _=e(()=>i.viewportRef?.backing),v=e(()=>({width:`${f.value}px`,height:`${f.value}px`,"--bg":i.bg})),y=e(()=>{let e=f.value/(a.viewSize/a.imageScale),t=(a.imageX-a.viewX)/a.imageScale*e,n=(a.imageY-a.viewY)/a.imageScale*e;return{watch:`${a.imageWidth}px`,height:`${a.imageHeight}px`,transform:`translate3d(${t}px, ${n}px, 0px) scale(${e})`}});return(e,i)=>(d(),n(`div`,{class:s([`preview`,{backing:_.value,round:r.round}]),ref_key:`containerRef`,ref:u,style:c(v.value)},[h(o)?.url?(d(),n(`img`,{key:0,class:`image`,src:h(o).url,alt:`image`,style:c(y.value)},null,12,Y)):t(`v-if`,!0)],6))}}),[[`__scopeId`,`data-v-b7181a42`]]);const fe=[`src`],pe=[`src`];var Z=J(i({__name:`Viewport`,props:a({size:{},width:{},height:{},info:{},view:{},grid:{type:Boolean},step:{},ctrlStep:{},shiftStep:{},reverse:{type:Boolean},minView:{},padding:{},arrow:{type:Boolean},wasd:{type:Boolean},mask:{},mode:{},border:{type:[Boolean,Number]}},{...y}),setup(i,{expose:a}){let o=i,l=f(b()),u=ie(),g=e(()=>u.value?.url),_=p(!1),v=p(!1),y=p(!1),x=p(),S=p(0),C=p(0),w=p(0),T=p(0),D=q(`Control`),k=q(`Shift`),A=p(I()),j=p(),M=e(()=>o.mask===`double`||!!g.value&&!A.value),N=re(),{backing:P,handleTransitionEnd:F}=te({imageMoving:_}),L={props:o,pos:l,info:u,imageMoving:_,viewMoving:v,viewResizing:y,viewportRef:x,minImageScale:S,step:C,ctrlStep:w,shiftStep:T,pressCtrl:D,pressShift:k,isClipPathSupported:A,pointPosition:j,backing:P,elEmitter:N,showViewLayer:M,checkImageBack:()=>{},checkViewPosition:()=>{},resizeView:()=>{},broadcastInfo:()=>{},broadcastPos:()=>{}};W(L),K(L),ne(L),ce(L),oe(L);let{viewportStyle:R,maskStyle:z,viewStyle:B,imageStyle:H,innerImageStyle:U,consolesStyle:G}=le(L),{positionInit:J}=ae(L),{handleMouseDown:Y,handlePointMouseDown:X}=se(L),{handleWheel:Z}=de(L),{handleTouchStart:Q,handlePointTouchStart:$}=ue(L);return a({select:async e=>{try{J(await O(e))}catch(e){if(E.isCancel(e))return;throw e}},crop:async e=>{if(!u.value)throw new E(`NO_IMAGE_SELECTED`);return ee(u.value,l,e)},positionInit:J,elEmitter:N,backing:P}),(e,a)=>(d(),n(`div`,{class:s([`viewport`,[i.mode,j.value,{grid:i.grid,backing:h(P),"image-moving":_.value,"view-moving":v.value,"view-resizing":y.value,"show-border":h(V)(o.border)}]]),style:c(h(R)),ref_key:`viewportRef`,ref:x,onMousedown:a[9]||=(...e)=>h(Y)&&h(Y)(...e),onWheel:a[10]||=(...e)=>h(Z)&&h(Z)(...e),onTouchstart:a[11]||=(...e)=>h(Q)&&h(Q)(...e)},[g.value?(d(),n(`img`,{key:0,class:`image`,alt:`bottom layer image`,src:g.value,style:c(h(H)),onTransitionend:a[0]||=(...e)=>h(F)&&h(F)(...e)},null,44,fe)):t(`v-if`,!0),r(`div`,{class:`mask`,style:c(h(z))},null,4),M.value?(d(),n(`div`,{key:1,class:`view`,style:c(h(B))},[r(`img`,{class:`upper-image`,src:g.value,alt:`upper layer image`,style:c(h(U))},null,12,pe)],4)):t(`v-if`,!0),i.mode===`fixed-image`?(d(),n(`div`,{key:2,class:`consoles`,style:c(h(G))},[r(`div`,{class:`point top-left`,onMousedown:a[1]||=e=>h(X)(e,`top-left`),onTouchstart:a[2]||=e=>h($)(e,`top-left`)},[m(e.$slots,`point-top-left`,{},void 0,!0)],32),r(`div`,{class:`point top-right`,onMousedown:a[3]||=e=>h(X)(e,`top-right`),onTouchstart:a[4]||=e=>h($)(e,`top-right`)},[m(e.$slots,`point-top-right`,{},void 0,!0)],32),r(`div`,{class:`point bottom-left`,onMousedown:a[5]||=e=>h(X)(e,`bottom-left`),onTouchstart:a[6]||=e=>h($)(e,`bottom-left`)},[m(e.$slots,`point-bottom-left`,{},void 0,!0)],32),r(`div`,{class:`point bottom-right`,onMousedown:a[7]||=e=>h(X)(e,`bottom-right`),onTouchstart:a[8]||=e=>h($)(e,`bottom-right`)},[m(e.$slots,`point-bottom-right`,{},void 0,!0)],32)],4)):t(`v-if`,!0)],38))}}),[[`__scopeId`,`data-v-3993095b`]]);export{E as AvatarError,v as DEFAULT_ACCEPT,y as DEFAULT_VIEWPORT_PROPS,X as Preview,Z as Viewport,P as blobToBase64,N as canvasToBlob,S as en,M as loadImage,D as selectFile,O as selectImage,T as setLocale,x as zh_cn};