@klesh/vue-crop/dist/vue-crop.min.js

Light-weight Vue.js component for photo cropping with zooming/dragging support

var VueCrop=function(e){"use strict";var t={name:"VueCrop",props:{src:{type:String},value:{type:Object},ratio:{type:Number}},computed:{bgOverlapStyle:function(){var e=this.bg,t=e.x;return{top:e.y+"px",left:t+"px",width:e.w+"px",height:e.h+"px"}},bgImageStyle:function(){return Object.assign({},this.bgOverlapStyle,{opacity:this.box.actived?.3:1})},boxStyle:function(){var e=this.box,t=this.bg;return{top:e.y*t.zr+t.y-1+"px",left:e.x*t.zr+t.x-1+"px",width:e.w*t.zr+"px",height:e.h*t.zr+"px"}},boxImageStyle:function(){var e=this.box,t=this.bg;return{top:-e.y*t.zr+"px",left:-e.x*t.zr+"px",width:t.w+"px",height:t.h+"px"}}},data:function(){return{initials:[],bg:{x:0,y:0,w:0,h:0,ow:null,oh:null,or:null,zr:1},box:{x:10,y:10,w:100,h:100,ax:0,ay:0,actived:!1,mode:null}}},mounted:function(){var e=this;this.$watch("value",function(){return e.reload()},{deep:!0}),this.$watch("src",function(){return e.reload()}),setTimeout(function(){return e.reload()})},methods:{reload:function(){var e=this,t=new Image;if(t.onload=function(){var o=e.bg;if(o.ow!==t.width||o.oh!==t.height){o.ow=t.width,o.oh=t.height,o.or=o.ow/o.oh;var i=e.$el.offsetWidth/e.$el.offsetHeight;o.or>i?(o.w=Math.min(o.ow,e.$el.offsetWidth),o.h=o.w/o.or):(o.h=Math.min(o.oh,e.$el.offsetHeight),o.w=o.h*o.or),o.zr=o.w/o.ow,o.x=(e.$el.offsetWidth-o.w)/2,o.y=(e.$el.offsetHeight-o.h)/2}},t.src=this.src,this.value){var o=this.value,i=o.x,n=o.y,a=o.w,s=o.h;this.box=Object.assign({},this.box,{x:i,y:n,w:a,h:s,actived:!0})}else this.box.actived=!1},mouseWheel:function(e){var t=this.bg,o=t.w,i=t.w+e.wheelDeltaY;if(!(i<50)){t.w=i,t.h=t.w/t.or;var n=t.w/o-1;t.x-=e.offsetX*n,t.y-=e.offsetY*n,t.zr=t.w/t.ow}},mouseDown:function(e){this.initials[e.button]={e:e,bg:Object.assign({},this.bg),box:Object.assign({},this.box)}},mouseUp:function(e){this.initials[e.button]=null,this.box.mode=null},mouseMove:function(e){var t=this.initials,o=t[0],i=t[2],n=this.bg,a=this.box;if(i&&(n.x=i.bg.x+e.x-i.e.x,n.y=i.bg.y+e.y-i.e.y),o&&"IMG"===e.target.tagName){if(!a.actived&&Math.abs(e.x-o.e.x)>5&&Math.abs(e.y-o.e.y)>5){var s=o.e.offsetX/n.zr,r=o.e.offsetY/n.zr;s>0&&r>0&&(this.box={ax:s,ay:r,mode:"resizing",actived:!0})}if(a.mode){var l=o.box,d=l.x,u=l.y,f=l.w,c=l.h;if("resizing"===a.mode){var h,v,b=a.ax,m=a.ay;if(~b&&(h=e.offsetX/n.zr,d=Math.min(h,b),f=Math.abs(h-b)),~m&&(v=e.offsetY/n.zr,u=Math.min(v,m),c=Math.abs(v-m)),this.ratio)if(Math.abs(e.x-o.e.x)>Math.abs(e.y-o.e.y)){var p=f/this.ratio;v<m&&(u+=c-p),c=p}else{var x=c*this.ratio;h<b&&(d+=f-x),f=x}if(d<0||d+f>n.ow||u<0||u+c>n.oh)return}else"moving"===a.mode&&(d=o.box.x+(e.x-o.e.x)/n.zr,u=o.box.y+(e.y-o.e.y)/n.zr,d=Math.min(Math.max(0,d),n.ow-a.w),u=Math.min(Math.max(0,u),n.oh-a.h));this.box=Object.assign({},this.box,{x:d,y:u,w:f,h:c})}}},setResizing:function(e){var t=this.box;t.ax=-1,t.ay=-1,~e.indexOf("n")&&(t.ay=t.y+t.h),~e.indexOf("s")&&(t.ay=t.y),~e.indexOf("w")&&(t.ax=t.x+t.w),~e.indexOf("e")&&(t.ax=t.x),t.mode="resizing"},setMoving:function(){this.box.mode="moving"},ok:function(){var e=this.box,t=e.x,o=e.y,i=e.w,n=e.h;this.$emit("input",Object.assign({},this.value,{x:t,y:o,w:i,h:n})),this.$emit("change")}}};var o,i=function(e,t,o,i,n,a,s,r,l,d){"boolean"!=typeof s&&(l=r,r=s,s=!1);var u,f="function"==typeof o?o.options:o;if(e&&e.render&&(f.render=e.render,f.staticRenderFns=e.staticRenderFns,f._compiled=!0,n&&(f.functional=!0)),i&&(f._scopeId=i),a?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},f._ssrRegister=u):t&&(u=s?function(){t.call(this,d(this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),u)if(f.functional){var c=f.render;f.render=function(e,t){return u.call(t),c(e,t)}}else{var h=f.beforeCreate;f.beforeCreate=h?[].concat(h,u):[u]}return o},n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var a={};var s=i({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"vp",on:{mousewheel:function(t){return t.stopPropagation(),t.preventDefault(),e.mouseWheel(t)},mousedown:e.mouseDown,mouseup:e.mouseUp,mousemove:e.mouseMove,contextmenu:function(e){e.preventDefault()},dblclick:function(t){e.box.actived=!1}}},[o("div",{staticClass:"movable bgoverlap",style:e.bgOverlapStyle}),e._v(" "),o("img",{staticClass:"movable",style:e.bgImageStyle,attrs:{src:e.src,draggable:"false"}}),e._v(" "),e.box.actived?o("div",{staticClass:"movable box",style:e.boxStyle},[o("div",{staticClass:"vp fill",on:{mousedown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?null:"button"in t&&0!==t.button?null:e.setMoving(t)},dblclick:function(t){return t.stopPropagation(),e.ok(t)}}},[o("img",{staticClass:"movable",style:e.boxImageStyle,attrs:{src:e.src,draggable:"false"}})]),e._v(" "),o("div",{staticClass:"indicator top left",on:{mousedown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?null:"button"in t&&0!==t.button?null:e.setResizing("nw")}}}),e._v(" "),o("div",{staticClass:"indicator top center",on:{mousedown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?null:"button"in t&&0!==t.button?null:e.setResizing("n")}}}),e._v(" "),o("div",{staticClass:"indicator top right",on:{mousedown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?null:"button"in t&&0!==t.button?null:e.setResizing("ne")}}}),e._v(" "),o("div",{staticClass:"indicator middle left ",on:{mousedown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?null:"button"in t&&0!==t.button?null:e.setResizing("w")}}}),e._v(" "),o("div",{staticClass:"indicator middle right ",on:{mousedown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?null:"button"in t&&0!==t.button?null:e.setResizing("e")}}}),e._v(" "),o("div",{staticClass:"indicator bottom left",on:{mousedown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?null:"button"in t&&0!==t.button?null:e.setResizing("sw")}}}),e._v(" "),o("div",{staticClass:"indicator bottom center",on:{mousedown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?null:"button"in t&&0!==t.button?null:e.setResizing("s")}}}),e._v(" "),o("div",{staticClass:"indicator bottom right",on:{mousedown:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"left",37,t.key,["Left","ArrowLeft"])?null:"button"in t&&0!==t.button?null:e.setResizing("se")}}})]):e._e()])},staticRenderFns:[]},function(e){e&&e("data-v-03773cf4_0",{source:".vp[data-v-03773cf4]{position:relative;overflow:hidden;user-select:none}.vp .movable[data-v-03773cf4]{position:absolute}.vp .bgoverlap[data-v-03773cf4]{background:#000}.vp .box[data-v-03773cf4]{border:solid 1px #00f}.vp .fill[data-v-03773cf4]{width:100%;height:100%}.vp .box .indicator[data-v-03773cf4]{position:absolute;background:#00f;border:solid 1px #fff;width:8px;height:8px;margin:-4px 0 0 -4px;box-sizing:border-box}.indicator.top[data-v-03773cf4]{top:0}.indicator.middle[data-v-03773cf4]{top:50%}.indicator.bottom[data-v-03773cf4]{top:100%}.indicator.left[data-v-03773cf4]{left:0}.indicator.center[data-v-03773cf4]{left:50%}.indicator.right[data-v-03773cf4]{left:100%}.indicator.top.left[data-v-03773cf4]{cursor:nw-resize}.indicator.top.center[data-v-03773cf4]{cursor:n-resize}.indicator.top.right[data-v-03773cf4]{cursor:ne-resize}.indicator.middle.left[data-v-03773cf4]{cursor:w-resize}.indicator.middle.right[data-v-03773cf4]{cursor:e-resize}.indicator.bottom.left[data-v-03773cf4]{cursor:sw-resize}.indicator.bottom.center[data-v-03773cf4]{cursor:s-resize}.indicator.bottom.right[data-v-03773cf4]{cursor:se-resize}",map:void 0,media:void 0})},t,"data-v-03773cf4",!1,void 0,function(e){return function(e,t){return function(e,t){var i=n?t.media||"default":e,s=a[i]||(a[i]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var r=t.source;if(t.map&&(r+="\n/*# sourceURL="+t.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===o&&(o=document.head||document.getElementsByTagName("head")[0]),o.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(r),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var l=s.ids.size-1,d=document.createTextNode(r),u=s.element.childNodes;u[l]&&s.element.removeChild(u[l]),u.length?s.element.insertBefore(d,u[l]):s.element.appendChild(d)}}}(e,t)}},void 0);function r(e){r.installed||(r.installed=!0,e.component("VueCrop",s))}var l={install:r},d=null;return"undefined"!=typeof window?d=window.Vue:"undefined"!=typeof global&&(d=global.Vue),d&&d.use(l),s.install=r,e.default=s,e}({});