vuejs-avatar-crop/dist/js/app.7d56920d.js

Support cutting of avatars of PC and mobile phones.

(function(t){function e(e){for(var s,r,n=e[0],h=e[1],c=e[2],u=0,f=[];u<n.length;u++)r=n[u],Object.prototype.hasOwnProperty.call(o,r)&&o[r]&&f.push(o[r][0]),o[r]=0;for(s in h)Object.prototype.hasOwnProperty.call(h,s)&&(t[s]=h[s]);l&&l(e);while(f.length)f.shift()();return a.push.apply(a,c||[]),i()}function i(){for(var t,e=0;e<a.length;e++){for(var i=a[e],s=!0,n=1;n<i.length;n++){var h=i[n];0!==o[h]&&(s=!1)}s&&(a.splice(e--,1),t=r(r.s=i[0]))}return t}var s={},o={app:0},a=[];function r(e){if(s[e])return s[e].exports;var i=s[e]={i:e,l:!1,exports:{}};return t[e].call(i.exports,i,i.exports,r),i.l=!0,i.exports}r.m=t,r.c=s,r.d=function(t,e,i){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(r.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)r.d(i,s,function(e){return t[e]}.bind(null,s));return i},r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="/";var n=window["webpackJsonp"]=window["webpackJsonp"]||[],h=n.push.bind(n);n.push=e,n=n.slice();for(var c=0;c<n.length;c++)e(n[c]);var l=h;a.push([0,"chunk-vendors"]),i()})({0:function(t,e,i){t.exports=i("56d7")},"56d7":function(t,e,i){"use strict";i.r(e);i("cadf"),i("551c"),i("f751"),i("097d");var s=i("2b0e"),o=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"app",attrs:{id:"app"}},[t.file?i("div",{staticStyle:{position:"fixed",left:"0",top:"0",width:"100%",height:"100%"}},[i("vue-avatar",{attrs:{file:t.file},on:{cancel:t.cancel,done:t.done,touch:t.touch}})],1):t._e(),i("div",[i("input",{attrs:{id:"avatar",type:"file"},on:{change:t.changeUpload}})]),i("br"),i("br"),i("br"),t._v("\n  ==================\n  "),i("br"),i("button",{on:{click:function(e){t.review=!t.review}}},[t._v("现在图片预览")]),t.review?i("div",{staticStyle:{position:"fixed",left:"0",top:"0",width:"100%",height:"100%"}},[i("vue-avatar",{attrs:{file:"http://192.168.101.252:5050/uInfo?token=c446af4ebd64a620080a8e22808c820729f5b98ad32fdc8b3e9b86b989ee61ee&image_type=thumbs&file_id=if1957082a6ec7f82c7a763909043a2cf",edit:!1},on:{touch:t.touch}})],1):t._e()])},a=[],r=(i("96cf"),i("3b8d")),n=i("7618"),h=function(){var t,e=this,i=e.$createElement,s=e._self._c||i;return s("div",{staticClass:"container"},[s("div",{staticClass:"draw",style:{width:e.clothW+"px",height:e.clothH+"px"}},[e.target.url?s("div",{ref:"tietu",staticClass:"tietu",class:(t={},t[e.select]=1,t),style:{top:e.target.top+"px",left:e.target.left+"px"},on:{click:function(t){t.stopPropagation()}}},[s("div",{staticClass:"target",style:{transform:"scale("+e.target.scale+")"},on:{mousedown:function(t){return t.preventDefault(),e.mousedown(t)},mousemove:function(t){return t.preventDefault(),e.mousemove(t)},mouseup:function(t){return t.preventDefault(),e.mouseup(t)},touchstart:function(t){return t.preventDefault(),e.touchstart(t)},mouseout:function(t){return t.preventDefault(),e.mouseup(t)},touchmove:function(t){return t.preventDefault(),e.touchmove(t)},touchend:function(t){return t.preventDefault(),e.touchend(t)}}},[s("img",{attrs:{src:e.target.url,width:e.target.w,height:e.target.h},on:{click:function(t){return e.$emit("touch")}}})])]):e._e(),e.edit?[s("div",{staticClass:"shadow bottom"}),s("div",{staticClass:"shadow top"}),s("div",{staticClass:"shadow left"}),s("div",{staticClass:"shadow right"})]:e._e()],2),s("div",{staticClass:"ac-slider-container",style:{width:e.clothW+"px"}},[s("div",{staticClass:"ac-slider",on:{touchmove:e.sliderMove,touchend:e.sliderEnd,mousemove:e.sliderMove}},[s("div",{staticClass:"ac-slider-bar",style:{width:100*e.pecent+"%"}},[s("div",{staticClass:"ac-slider-button"})])])]),e.edit?s("div",{staticClass:"operate"},[s("div",{on:{click:function(t){return e.$emit("cancel")}}},[s("em",[e._v("取消")])]),s("div",{on:{click:e.generate}},[s("em",[e._v("确认")])])]):e._e(),s("canvas",{ref:"canvas",staticStyle:{display:"none"},attrs:{width:e.clothW,height:e.clothH}})])},c=[],l=(i("34ef"),i("4917"),i("28a5"),{props:{file:null,edit:{type:Boolean,default:!0}},data:function(){return{offsettop:0,offsetleft:0,defaulthypotenuse:0,select:"",t:null,offsetAngle:0,target:{w:0,h:0,url:"",scale:1,left:0,top:0,Image:null,diffw:0,diffh:0,difforiginw:0,difforiginh:0,originw:0,originh:0},sourceImg:{w:0,h:0,type:""},clothW:.875*document.documentElement.clientWidth,clothH:.875*document.documentElement.clientWidth,touchmoveActive:0,firstTwoTouchSize:0,firstScale:1,mouse:{hold:!1},pecent:0}},computed:{maxWidth:function(){return-(this.sourceImg.w*this.target.scale-this.clothW)},maxHeight:function(){return-(this.sourceImg.h*this.target.scale-this.clothH)}},created:function(){this.edit||(this.clothW=document.documentElement.clientWidth,this.clothH=document.documentElement.clientHeight),this.getSize(this.file)},methods:{positionCorrect:function(){var t=this.target.top-this.target.diffh*(this.target.scale-1);(t>0||t<this.maxHeight)&&(Math.abs(t)>Math.abs(Math.abs(t)-Math.abs(this.maxHeight))?this.target.top=this.maxHeight+this.target.diffh*(this.target.scale-1):this.target.top=0+this.target.diffh*(this.target.scale-1));var e=this.target.left-this.target.diffw*(this.target.scale-1);(e>0||e<this.maxWidth)&&(Math.abs(e)>Math.abs(Math.abs(e)-Math.abs(this.maxWidth))?this.target.left=this.maxWidth+this.target.diffw*(this.target.scale-1):this.target.left=0+this.target.diffw*(this.target.scale-1))},generate:function(){var t=this.$refs.canvas,e=t.getContext("2d");e.clearRect(0,0,this.clothW,this.clothH),e.fillStyle="#ffffff",e.fillRect(0,0,this.clothW,this.clothH),e.drawImage(this.target.Image,this.target.left-this.target.diffw*(this.target.scale-1),this.target.top-this.target.diffh*(this.target.scale-1),this.target.w*this.target.scale,this.target.h*this.target.scale);var i=t.toDataURL(this.sourceImg.type),s=this.dataURLtoBlob(i),o=URL.createObjectURL(s);this.$emit("done",{base64:i,img:s,url:o})},getSize:function(t){var e=this;if("object"===Object(n["a"])(t)){this.sourceImg.type=t.type;var i=new FileReader;i.readAsDataURL(t),i.onload=function(t){e.target.Image=new Image,e.target.Image.src=t.target.result;var i=e.dataURLtoBlob(t.target.result),s=URL.createObjectURL(i);e.target.url=s,e.target.Image.onload=function(){e.computedSize(this.width,this.height)}}}else{e.target.url=t;var s=new Image;s.src=t,s.onload=function(){e.computedSize(s.width,s.height)}}},computedSize:function(t,e){var i;t>e&&this.edit?(i=e/this.clothH,e/=i,t/=i,this.target.top=0,this.target.left=-(t-this.clothW)/2):(i=t/this.clothW,t/=i,e/=i,t>e&&e<this.clothH&&(this.clothH=e),this.target.top=-(e-this.clothH)/2,this.target.left=0),this.sourceImg.w=t,this.sourceImg.h=e,this.target.w=t,this.target.h=e,this.target.diffw=t/2,this.target.diffh=e/2,this.target.difforiginw=this.target.diffw-this.target.left,this.target.difforiginh=this.target.diffh-this.target.top,this.target.originw=t/2,this.target.originh=e/2;var s=t/2,o=e/2;this.defaulthypotenuse=Math.sqrt(s*s+o*o)},dataURLtoBlob:function(t){var e=t.split(","),i=e[0].match(/:(.*?);/)[1],s=atob(e[1]),o=s.length,a=new Uint8Array(o);while(o--)a[o]=s.charCodeAt(o);return new Blob([a],{type:i})},moveImg:function(t){var e=t.clientY-this.offsettop-this.target.diffh*(this.target.scale-1);e>0?this.target.top=(this.maxHeight+(this.sourceImg.h-this.clothH))/2*-1:e<this.maxHeight?this.target.top=(this.maxHeight-(this.sourceImg.h-this.clothH))/2:this.target.top=t.clientY-this.offsettop;var i=t.clientX-this.offsetleft-this.target.diffw*(this.target.scale-1);i>0?this.target.left=(this.maxWidth+(this.sourceImg.w-this.clothW))/2*-1:i<this.maxWidth?this.target.left=(this.maxWidth-(this.sourceImg.w-this.clothW))/2:this.target.left=t.clientX-this.offsetleft,this.target.originw=this.sourceImg.w-(this.target.left+this.target.difforiginw),this.target.originh=this.sourceImg.h-(this.target.top+this.target.difforiginh)},holdStart:function(t){var e=this;this.select="select-create",this.t=setTimeout((function(){e.select="select-created"}),200),this.offsettop=t.clientY-this.$refs.tietu.offsetTop,this.offsetleft=t.clientX-this.$refs.tietu.offsetLeft},touchstart:function(t){this.holdStart(t.touches[0]),t.touches.length>1?this.touchmoveActive=0:this.touchmoveActive=1},touchmove:function(t){t.touches.length>1||!this.touchmoveActive?this.pinch(t):(this.t&&clearTimeout(this.t),this.select="select-created",this.moveImg(t.touches[0]))},touchend:function(t){var e=this;t.touches.length<2&&(this.firstTwoTouchSize=0,this.firstScale=1,this.target.scale<1&&(this.target.scale=1),this.positionCorrect()),this.t&&clearTimeout(this.t),this.select="select-destroy",setTimeout((function(){e.select=""}),200)},mousedown:function(t){this.mouse.hold=!0,this.holdStart(t)},mousemove:function(t){this.mouse.hold&&this.moveImg(t)},mouseup:function(){var t=this;this.mouse.hold=!1,this.t&&clearTimeout(this.t),this.select="select-destroy",setTimeout((function(){t.select=""}),200)},pinch:function(t){var e=Math.abs(t.touches[0].clientX-t.touches[1].clientX),i=Math.abs(t.touches[0].clientY-t.touches[1].clientY),s=Math.sqrt(e*e+i*i);0===this.firstTwoTouchSize&&(this.firstTwoTouchSize=s,this.firstScale=this.target.scale);var o=s/this.firstTwoTouchSize;this.target.scale=this.firstScale*o},sliderMove:function(t){var e=document.documentElement.clientWidth;t.touches&&t.touches[0]&&(t=t.touches[0]);var i=t.clientX-.0625*e;i<0?i=0:i>this.clothW&&(i=this.clothW),this.target.scale=1+i/this.clothW,this.pecent=i/this.clothW},sliderEnd:function(){this.positionCorrect()}}}),u=l,f=(i("d2ca"),i("2877")),d=Object(f["a"])(u,h,c,!1,null,"7e78fa13",null),g=d.exports;function p(t){p.installed||(p.installed=!0,t.component("vue-avatar",g))}var m={install:p,Avatar:g};void 0!==("undefined"===typeof window?"undefined":Object(n["a"])(window))&&window.Vue&&window.Vue.use(m);var v=m;console.log(v);var w={name:"app",data:function(){return{file:null,review:!1}},methods:{changeUpload:function(){var t=Object(r["a"])(regeneratorRuntime.mark((function t(){var e;return regeneratorRuntime.wrap((function(t){while(1)switch(t.prev=t.next){case 0:e=document.getElementById("avatar"),this.file=e.files[0];case 2:case"end":return t.stop()}}),t,this)})));function e(){return t.apply(this,arguments)}return e}(),cancel:function(){this.file=null},done:function(t){console.log(t)},touch:function(){console.log("点击了")}}},b=w,y=(i("7c55"),Object(f["a"])(b,o,a,!1,null,null,null)),x=y.exports;s["a"].use(v),window.Vue=s["a"],window.RootApp=new s["a"]({render:function(t){return t(x)}}).$mount("#app")},"5c48":function(t,e,i){},"7c55":function(t,e,i){"use strict";var s=i("5c48"),o=i.n(s);o.a},"8da5":function(t,e,i){},d2ca:function(t,e,i){"use strict";var s=i("8da5"),o=i.n(s);o.a}});