vue-select-avatar-base/lib/dist/lib.umd.min.js

基于vue选择头像的包

(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["lib"]=t(require("vue")):e["lib"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={203:function(t){t.exports=e}},i={};function n(e){var o=i[e];if(void 0!==o)return o.exports;var r=i[e]={exports:{}};return t[e](r,r.exports,n),r.exports}!function(){n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,{a:t}),t}}(),function(){n.d=function(e,t){for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})}}(),function(){n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){n.p=""}();var o={};return function(){if(n.r(o),n.d(o,{AvatarBody:function(){return x},fileToBase64:function(){return b},selectImage:function(){return S}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(n.p=t[1])}var i=function(){var e=this,t=e._self._c;e._self._setupProxy;return t("div",{staticClass:"__avatar_body",class:{__grid_bg:e.innerConfig.gridBackground,__edge_line:e.innerConfig.edgeLine,__opaque_cropper:e.cropperOpaque},style:e.style},[t("div",{staticClass:"__image_container"},[t("img",{directives:[{name:"show",rawName:"v-show",value:e.src,expression:"src"}],ref:"img",style:{width:e.__width+"px",height:e.__height+"px","--x":e.x+"px","--y":e.y+"px"},attrs:{alt:"image",src:e.src},on:{wheel:e.__onWheel,"~wheel":function(t){return e.__onMouseMove.apply(null,arguments)},mousedown:e.__onMouseDown,mousemove:e.__onMouseMove}})]),t("div",{staticClass:"__cropper top",on:{mousedown:e.__onCropperMouseDown}}),t("div",{staticClass:"__cropper right",on:{mousedown:e.__onCropperMouseDown}}),t("div",{staticClass:"__cropper bottom",on:{mousedown:e.__onCropperMouseDown}}),t("div",{staticClass:"__cropper left",on:{mousedown:e.__onCropperMouseDown}}),t("transition",{attrs:{name:"__loading"}},[t("div",{directives:[{name:"show",rawName:"v-show",value:"pending"===e.loading||"error"===e.loading,expression:"loading === 'pending' || loading === 'error'"}],staticClass:"__loading_mask"},[t("div",{staticClass:"__loading_inner"},["pending"===e.loading?t("div",{staticClass:"__loading_spinner"},[t("svg",{staticClass:"__circular",attrs:{viewBox:"25 25 50 50"}},[t("circle",{attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})])]):e._e(),"pending"===e.loading?t("p",{staticClass:"__loading_text"},[e._v(e._s(e.innerConfig.loadingText))]):e._e(),"error"===e.loading?t("p",{staticClass:"__loading_text __error"},[e._v(e._s(e.innerConfig.loadingErrorText))]):e._e()])])])],1)},r=[];function s(e,t,i,n){function o(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,r){function s(e){try{c(n.next(e))}catch(t){r(t)}}function a(e){try{c(n["throw"](e))}catch(t){r(t)}}function c(e){e.done?i(e.value):o(e.value).then(s,a)}c((n=n.apply(e,t||[])).next())}))}function a(e,t){var i,n,o,r,s={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return r={next:a(0),throw:a(1),return:a(2)},"function"===typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function a(e){return function(t){return c([e,t])}}function c(r){if(i)throw new TypeError("Generator is already executing.");while(s)try{if(i=1,n&&(o=2&r[0]?n["return"]:r[0]?n["throw"]||((o=n["return"])&&o.call(n),0):n.next)&&!(o=o.call(n,r[1])).done)return o;switch(n=0,o&&(r=[2&r[0],o.value]),r[0]){case 0:case 1:o=r;break;case 4:return s.label++,{value:r[1],done:!1};case 5:s.label++,n=r[1],r=[0];continue;case 7:r=s.ops.pop(),s.trys.pop();continue;default:if(o=s.trys,!(o=o.length>0&&o[o.length-1])&&(6===r[0]||2===r[0])){s=0;continue}if(3===r[0]&&(!o||r[1]>o[0]&&r[1]<o[3])){s.label=r[1];break}if(6===r[0]&&s.label<o[1]){s.label=o[1],o=r;break}if(o&&s.label<o[2]){s.label=o[2],s.ops.push(r);break}o[2]&&s.ops.pop(),s.trys.pop();continue}r=t.call(e,s)}catch(a){r=[6,a],n=0}finally{i=o=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}}var c=n(203),u=n.n(c),l={jpg:"image/jpeg",png:"image/png",webp:"image/webp"};function h(e){return new Promise((function(t,i){var n=new FileReader;n.readAsDataURL(e),n.onload=function(){return t(n.result)},n.onerror=i}))}var f=["jpg","jpeg","png","svg","svgz","webp","ico","xbm","tif","jfif","tiff","bmp","pjp","apng","pjpeg","avif"];function d(e){return new Promise((function(t){var i=document.createElement("input");i.type="file",i.accept=f.map((function(e){return"."+e})).join(","),i.onchange=function(){var n=i.files;n&&n.length>0?(e&&(null===e||void 0===e||e.inject(n[0])),t(n[0])):t(void 0),i.remove()},i.click()}))}var p=/^[0-9]$/;function g(e){return"number"===typeof e||p.test(e)?e+"px":e}var _={width:"100%",height:"100%",viewfinderSize:300,gridBackground:!0,cropperLongPressOpaque:!0,edgeLine:!1,maxZoomRatio:6,limitImageMaxSize:0,limitImageMinSize:0,defaultFilename:"avatar",imageFormat:"png",loading:!0,immediateLoading:!1,loadingText:"加载中...",loadingErrorText:"加载失败！"},m=u().extend({name:"avatar-body",props:{config:Object,width:String,height:String},data:function(){return{innerConfig:{},style:"",src:"",filename:"",initialWidth:0,initialHeight:0,naturalWidth:0,naturalHeight:0,x:0,y:0,scale:0,maxScale:0,zoomSpeed:.05,rapidZoomSpeed:.2,rapidZoom:!1,moveSpeed:1,loading:"success",drag:!1,CTT:100,CWT:100,cropperOpaque:!1,timer1:-1,timer2:-1,timer3:-1,timer4:-1,mouseState:{zoomOffsetX:.5,zoomOffsetY:.5,downX:0,downY:0}}},created:function(){this.__initConfig()},methods:{__init:function(e){return s(this,void 0,void 0,(function(){var t,i=this;return a(this,(function(n){switch(n.label){case 0:return this.innerConfig.loading&&(this.loading="pending"),this.src="",this.scale=this.x=this.y=this.maxScale=0,[4,h(e)];case 1:return t=n.sent(),this.filename=e.name,this.src=t,this.$nextTick((function(){var e=i.$refs.img,t=function(){e.onload=null,e.onerror=null};e.onload=function(){i.innerConfig.loading&&(i.loading="success"),i.naturalWidth=e.naturalWidth,i.naturalHeight=e.naturalHeight,i.__initialPosition(),t()},e.onerror=function(){i.innerConfig.loading&&(i.loading="error"),console.error("Image loading failed"),t()}})),[2]}}))}))},__initialPosition:function(){var e=this.naturalWidth>this.naturalHeight,t=Math.max(this.naturalWidth,this.naturalHeight),i=Math.min(this.naturalWidth,this.naturalHeight),n=this.innerConfig.viewfinderSize/i,o=Math.floor(t*n),r=-(o-this.innerConfig.viewfinderSize)/2;e?(this.initialWidth=o,this.initialHeight=this.innerConfig.viewfinderSize,this.x=r,this.y=0):(this.initialWidth=this.innerConfig.viewfinderSize,this.initialHeight=o,this.x=0,this.y=r);var s=this.innerConfig.limitImageMinSize;s>0&&i>s&&(this.maxScale=i/s-1)},__initConfig:function(){Object.assign(this.innerConfig,_),this.width&&(this.innerConfig.width=this.width),this.height&&(this.innerConfig.height=this.height),Object.assign(this.innerConfig,this.config),this.__generateStyle(),this.innerConfig.immediateLoading&&(this.loading="pending")},__generateStyle:function(){this.style="--CTT: ".concat(this.CTT,"ms;\n\t\t\t\t--body-width: ").concat(g(this.innerConfig.width),";\n        --body-height: ").concat(g(this.innerConfig.height),";\n        --viewfinder-size: ").concat(this.innerConfig.viewfinderSize,"px;"),this.innerConfig.backgroundColor&&(this.style+="--body-bg-color: ".concat(this.innerConfig.backgroundColor,";")),this.innerConfig.cropperColor&&(this.style+="--cropper-color: ".concat(this.innerConfig.cropperColor,";")),this.innerConfig.cropperOpaqueColor&&(this.style+="--cropper-opaque-color: ".concat(this.innerConfig.cropperOpaqueColor,";")),this.innerConfig.edgeLineColor&&(this.style+="--edge-line-color: ".concat(this.innerConfig.edgeLineColor,";"))},__zoom:function(e,t,i){var n=this;clearTimeout(this.timer3),this.__transitionClass();var o=!1;t="number"===typeof t?t:this.mouseState.zoomOffsetX,i="number"===typeof i?i:this.mouseState.zoomOffsetY;var r=this.__width,s=this.__height;if("number"===typeof e)this.scale+=e;else{var a=this.rapidZoom?this.rapidZoomSpeed:this.zoomSpeed;e?this.scale+=a:this.scale-=a}if(this.scale<0?(this.scale=0,o=!0):this.scale>this.innerConfig.maxZoomRatio&&(this.scale=this.innerConfig.maxZoomRatio,o=!0),this.maxScale>0&&this.scale>this.maxScale&&(this.scale=this.maxScale,o=!0),!o){var c=(this.__width-r)*t,u=(this.__height-s)*i;this.x-=c,this.y-=u,this.drag&&(this.mouseState.downX-=c,this.mouseState.downY-=u)}this.__correctPosition(),this.rapidZoom=!0,this.timer3=setTimeout((function(){n.rapidZoom=!1,n.__correctPosition()}),50)},__correctPosition:function(){var e=this;clearTimeout(this.timer1),clearTimeout(this.timer2),this.drag||this.rapidZoom||(this.__transitionClass(),this.timer1=setTimeout((function(){var t,i=!1,n=e.innerConfig.viewfinderSize;e.y>0&&(e.y=0,i=!0),e.x>0&&(e.x=0,i=!0),(t=n-(e.__width+e.x))>0&&(e.x+=t,i=!0),(t=n-(e.__height+e.y))>0&&(e.y+=t,i=!0),i&&(e.__transitionClass(!0),e.timer2=setTimeout((function(){return e.__transitionClass()}),e.CTT))}),this.CWT))},__onMouseDown:function(e){var t=this;if(0===e.button){e.preventDefault(),this.__transitionClass();var i=e.target;if(i&&"IMG"===i.tagName){this.drag=!0;var n=e.clientX,o=e.clientY;this.mouseState.downX=this.x,this.mouseState.downY=this.y;var r=function(e){t.x=e.clientX-n+t.mouseState.downX,t.y=e.clientY-o+t.mouseState.downY,e.preventDefault()},s=function(){window.removeEventListener("mousemove",r),window.removeEventListener("mouseup",s),t.drag=!1,t.__correctPosition()};window.addEventListener("mousemove",r),window.addEventListener("mouseup",s)}}},__onWheel:function(e){e.preventDefault(),this.__zoom(e.deltaY<0)},__onMouseMove:function(e){this.mouseState.zoomOffsetX=e.offsetX/this.__width,this.mouseState.zoomOffsetY=e.offsetY/this.__height},__onCropperMouseDown:function(){var e=this;if(this.innerConfig.cropperLongPressOpaque){clearTimeout(this.timer4),this.timer4=setTimeout((function(){return e.cropperOpaque=!0}),200);var t=function(){clearTimeout(e.timer4),e.cropperOpaque=!1,window.removeEventListener("mouseup",t)};window.addEventListener("mouseup",t)}},__transitionClass:function(e){void 0===e&&(e=!1);var t=this.$refs.img,i="__transition";t&&(e?t.classList.add(i):t.classList.remove(i))},__getFilename:function(e){if(e)return e;if(this.innerConfig.defaultFilename)return this.innerConfig.defaultFilename;var t=this.filename.split(".");return t.length>1&&t.splice(t.length-1,1),t.join(".")},inject:function(e){e&&this.__init(e)},capture:function(e,t,i){var n=this;return void 0===e&&(e="all"),new Promise((function(o,r){if(!n.src)return o(null);var c=n.innerConfig,u=c.viewfinderSize,f=n.__width/n.naturalWidth,d=Math.round(Math.abs(n.x/f)),p=Math.round(Math.abs(n.y/f)),g=Math.round(Math.abs(u/f)),_=g;c.limitImageMaxSize>0&&_>c.limitImageMaxSize&&(_=c.limitImageMaxSize);var m=document.createElement("canvas"),v=m.getContext("2d");if(!v)return r(new Error("Canvas 2D Context is not supported"));m.width=_,m.height=_;try{v.drawImage(n.$refs.img,d,p,g,g,0,0,_,_)}catch(y){return r(new Error("Can not draw image"))}var w=n.__getFilename(i)+"."+(t=t||c.imageFormat||"png"),C=l[t];m.toBlob((function(t){return s(n,void 0,void 0,(function(){var i,n,s;return a(this,(function(a){switch(a.label){case 0:if(!t)return[2,r(new Error("Can not get blob"))];a.label=1;case 1:return a.trys.push([1,5,,6]),i=new File([t],w,{type:C}),"all"!==e&&"base64"!==e?[3,3]:[4,h(i)];case 2:return n=a.sent(),o("all"===e?{base64:n,file:i}:n),[3,4];case 3:"file"===e&&o(i),a.label=4;case 4:return[3,6];case 5:return s=a.sent(),[2,r(s)];case 6:return[2]}}))}))}),C)}))},move:function(e){switch(e){case"t":this.y-=this.moveSpeed;break;case"r":this.y+=this.moveSpeed;break;case"b":this.x+=this.moveSpeed;break;case"l":this.x-=this.moveSpeed;break}},zoom:function(e,t,i){this.__zoom(e,t,i)}},watch:{config:function(){this.__initConfig()}},computed:{__width:function(){return Math.floor(this.initialWidth*(this.scale+1))},__height:function(){return Math.floor(this.initialHeight*(this.scale+1))}}}),v=m;function w(e,t,i,n,o,r,s,a){var c,u="function"===typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=i,u._compiled=!0),n&&(u.functional=!0),r&&(u._scopeId="data-v-"+r),s?(c=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},u._ssrRegister=c):o&&(c=a?function(){o.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:o),c)if(u.functional){u._injectStyles=c;var l=u.render;u.render=function(e,t){return c.call(t),l(e,t)}}else{var h=u.beforeCreate;u.beforeCreate=h?[].concat(h,c):[c]}return{exports:e,options:u}}var C=w(v,i,r,!1,null,null,null),y=C.exports,x=y,b=h,S=d}(),o}()}));