UNPKG

vue-xcrop

Version:

A simple mobile image cropper for Vue 1/2

12 lines (11 loc) • 21.1 kB
1
2
3
4
5
6
7
8
9
10
11
12
/*! * @name vue-xcrop v1.0.0 * @github https://github.com/ffx0s/vue-crop * @license MIT. */ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Crop=e()}(this,function(){"use strict";function t(t,e){for(var n in e)t[n]=e[n];return t}var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},n=function(t,e){return e={exports:{}},t(e,e.exports),e.exports}(function(t,n){/*! * @name xcrop v1.0.2 * @github https://github.com/ffx0s/xcrop * @license MIT. */ !function(e,i){"object"==typeof n&&void 0!==t?t.exports=i():e.Crop=i()}(e,function(){function t(){}function e(t,e){for(var n in e)t[n]=e[n];return t}function n(t){var e=void 0;e=t.split(",")[0].indexOf("base64")>=0?window.atob(t.split(",")[1]):unescape(t.split(",")[1]);for(var n=t.split(",")[0].split(":")[1].split(";")[0],i=new ArrayBuffer(e.length),o=new Uint8Array(i),a=0;a<e.length;a++)o[a]=e.charCodeAt(a);var r=void 0;try{r=new window.Blob([i],{type:n})}catch(t){if(window.BlobBuilder=window.BlobBuilder||window.WebKitBlobBuilder||window.MozBlobBuilder||window.MSBlobBuilder,"TypeError"===t.name&&window.BlobBuilder){var c=new window.BlobBuilder;c.append(o.buffer),r=c.getBlob(n)}else"InvalidStateError"===t.name&&(r=new window.Blob([i],{type:n}))}return r}function i(t,e){var n=new window.XMLHttpRequest;n.open("GET",t,!0),n.responseType="blob",n.onload=function(t){200!==this.status&&0!==this.status||e(this.response)},n.send()}function o(t,e){var n=new window.XMLHttpRequest;n.onload=function(){if(200!==this.status&&0!==this.status)throw new Error("Could not load image");e(n.response),n=null},n.open("GET",t,!0),n.responseType="arraybuffer",n.send(null)}function a(t,e){var n=document.createElement("canvas"),i=n.getContext("2d"),o=t.width,a=t.height;return n.width=o*e,n.height=a*e,i.drawImage(t,0,0,o,a,0,0,n.width,n.height),n}function r(t,e){var n=document.createElement("canvas"),i=n.getContext("2d"),o=t.getContext("2d"),a=t.width,r=t.height,c=a*e,s=r*e;n.width=c,n.height=s;for(var h=Math.ceil(Math.log(a/c)/Math.log(2)),l=0;l<h;l++)o.drawImage(t,0,0,.5*a,.5*r);return i.drawImage(t,0,0,t.width*Math.pow(.5,h),t.height*Math.pow(.5,h),0,0,c,s),n}function c(t){var e=new DataView(t);if(65496!==e.getUint16(0,!1))return-2;for(var n=e.byteLength,i=2;i<n;){var o=e.getUint16(i,!1);if(i+=2,65505===o){if(1165519206!==e.getUint32(i+=2,!1))return-1;var a=18761===e.getUint16(i+=6,!1);i+=e.getUint32(i+4,a);var r=e.getUint16(i,a);i+=2;for(var c=0;c<r;c++)if(274===e.getUint16(i+12*c,a))return e.getUint16(i+12*c+8,a)}else{if(65280!=(65280&o))break;i+=e.getUint16(i,!1)}}return-1}function s(t,e,n,i){var o=t.naturalWidth,a=t.naturalHeight;if(o+a){var r=n.width,c=n.height,s=e.getContext("2d");s.save(),u(e,s,r,c,n.orientation);h(t)&&(o/=2,a/=2);var d=1024,f=document.createElement("canvas");f.width=f.height=d;for(var p=f.getContext("2d"),m=i?l(t,o,a):1,v=Math.ceil(d*r/o),g=Math.ceil(d*c/a/m),w=0,y=0;w<a;){for(var x=0,b=0;x<o;)p.clearRect(0,0,d,d),p.drawImage(t,-x,-w),s.drawImage(f,0,0,d,d,b,y,v,g),x+=d,b+=v;w+=d,y+=g}s.restore(),f=p=null}}function h(t){var e=t.naturalWidth;if(e*t.naturalHeight>1048576){var n=document.createElement("canvas");n.width=n.height=1;var i=n.getContext("2d");return i.drawImage(t,1-e,0),0===i.getImageData(0,0,1,1).data[3]}return!1}function l(t,e,n){var i=document.createElement("canvas");i.width=1,i.height=n;var o=i.getContext("2d");o.drawImage(t,0,0);for(var a=o.getImageData(0,0,1,n).data,r=0,c=n,s=n;s>r;){0===a[4*(s-1)+3]?c=s:r=s,s=c+r>>1}var h=s/n;return 0===h?1:h}function u(t,e,n,i,o){switch([5,6,7,8].indexOf(o)>-1?(t.width=i,t.height=n):(t.width=n,t.height=i),o){case 2:e.transform(-1,0,0,1,n,0);break;case 3:e.transform(-1,0,0,-1,n,i);break;case 4:e.transform(1,0,0,-1,0,i);break;case 5:e.transform(0,1,1,0,0,0);break;case 6:e.transform(0,1,-1,0,i,0);break;case 7:e.transform(0,-1,-1,0,i,n);break;case 8:e.transform(0,-1,1,0,0,n);break;default:e.transform(1,0,0,1,0,0)}}function d(t,e,n,i){var o=t/e,a=n,r=a/o,c=0,s=-(r-i)/2;return r<i&&(r=i,a=o*r,c=-(a-n)/2,s=0),{width:a,height:r,x:c,y:s}}function f(t,a,r){function s(t,e){var n=c(t),i="string"!=typeof e,o=i?H.createObjectURL(e):e,r=i&&"image/jpeg"===e.type,s=new window.Image;W(o)||(s.crossOrigin="*"),s.onload=function(){p(s,n,a,r,l),i&&H.revokeObjectURL(o)},s.src=o}function h(t){var e=new window.FileReader;e.onload=function(e){s(e.target.result,t)},e.readAsArrayBuffer(t)}var l=e({maxWidth:2e3,maxHeight:2e3},r);return window.FileReader&&(t instanceof window.Blob||t instanceof window.File)?void h(t):"object"===(void 0===t?"undefined":A(t))&&t.nodeType?("IMG"===t.tagName&&f(t.src,a),void("CANVAS"===t.tagName&&a(t))):W(t)?void h(n(t)):void(I(t)?i(t,h):o(t,function(e){s(e,t)}))}function p(t,e,n,i,o){var a=document.createElement("canvas"),r=o.maxWidth,c=o.maxHeight,h=o.width,l=o.height,u=t.naturalWidth,d=t.naturalHeight;h&&!l?l=d*h/u<<0:l&&!h?h=u*l/d<<0:(h=u,l=d),r&&u>r&&(h=r,l=d*h/u<<0),c&&l>c&&(l=c,h=u*l/d<<0),s(t,a,{orientation:e,width:h,height:l},i),n(a)}function m(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[];for(var i in e)this[i]=e[i];this.tagName=t,this.children=n}function v(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t;if("string"==typeof e){var i=document.createTextNode(e);return n(e),i}var o=e.create();return e.children.forEach(function(t){var e=v(t,n);o.appendChild(e)}),n(e),o}function g(t,e){"string"!=typeof t&&(t.children.forEach(function(t){g(t,!1)}),t.removeEvent(),e&&document.body.removeChild(t.el))}function w(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document.getElementsByTagName("head")[0],n=document.createElement("style");try{n.appendChild(document.createTextNode(t))}catch(e){n.stylesheet.cssText=t}return e.appendChild(n),n}function y(t){t.canvas=x(t.options.width,t.options.height),t.context=t.canvas.getContext("2d")}function x(t,e){var n=document.createElement("canvas");return n.width=t,n.height=e,n.style.cssText="width:100%;height:100%;",n}function b(){this.events={}}function T(e){e.eventList=["mousewheel","touchstart","touchmove","touchend"],e.observer=new b,e.last={scale:1,point:{x:0,y:0},move:{x:0,y:0},time:0,dis:{time:0,x:0,y:0}},e.touchDelay=3,e.animation={stop:t}}function S(t,e){var n=[];for(var i in t)"number"!=typeof+i||isNaN(+i)||n.push(e(t[i],i));return n}function E(t){t.scale=1,t.firstOrigin={x:0,y:0},t.position={x:0,y:0,width:0,height:0},t.image={width:0,height:0,el:null}}function C(t,e){return t+e}function k(t){return{x:t.map(function(t){return t.x}).reduce(C)/t.length,y:t.map(function(t){return t.y}).reduce(C)/t.length}}function B(t,e,n){n=n||["x","y"];var i=e[n[0]]-t[n[0]],o=e[n[1]]-t[n[1]];return Math.sqrt(i*i+o*o)}function R(t,e){return B(e[0],e[1])/B(t[0],t[1])}function D(t,e,n,i,o){var a=n.x-t.x,r=n.y-t.y,c=t.x+a*(1-o),s=t.y+r*(1-o),h=c-e.x,l=s-e.y;return{scale:i*o,x:e.x+h,y:e.y+l}}function N(){return{target:null,maxTargetWidth:2e3,maxTargetHeight:2e3,el:null,width:800,height:800,maxScale:2,touchTarget:null,offset:{left:0,right:0,top:0,bottom:0},loaded:t}}function U(t,e){e.el=t,this.init(e),this.render(),this.bindEvent(),this.load(e.target)}function L(){return{maxTargetWidth:2e3,maxTargetHeight:2e3,el:document.body,width:300,height:300,x:void 0,y:void 0,maxScale:2,canvasScale:2,touchTarget:null,created:t,mounted:t,loaded:t,cancle:t,confirm:t}}function O(t){this.init(t)}function M(t){var e=t.options,n=e.target,i=e.maxTargetWidth,o=e.maxTargetHeight,a=e.canvasScale,r=e.x,c=e.y,s=e.el,h=e.maxScale,l=e.minScale,u=e.loaded,d=t.root,f=d.el,p=d.width,m=d.height,v={target:n,maxTargetWidth:i,maxTargetHeight:o,el:s,maxScale:h,minScale:l,loaded:u,touchTarget:f,width:p*a,height:m*a,offset:{left:r*a,right:(p-t.area.width-r)*a,top:c*a,bottom:(m-t.area.height-c)*a}};t.pinch=new U(f,v)}var H=window.URL&&window.URL.createObjectURL?window.URL:window.webkitURL&&window.webkitURL.createObjectURL?window.webkitURL:null,I=function(t){return/^blob:/i.test(t)},A="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},W=function(t){return t.indexOf(";base64,")>0};m.prototype={create:function(){return this.el=document.createElement(this.tagName),this.el.className=this.className,this.addEvent(),this.el}},["addEvent","removeEvent"].forEach(function(t){m.prototype[t]=function(){for(var e in this.events)this.el[t+"Listener"](e,this.events[e],!1)}});var _=Array.prototype.slice;b.prototype={on:function(t,e){var n=this;t.split(" ").forEach(function(t){n.events[t]||(n.events[t]=[]),e&&n.events[t].push(e)})},emit:function(t){var e=this,n=_.call(arguments,1);t=t.split(" ").forEach(function(t){var i=e.events[t];i&&i.forEach(function(t){return t.apply(e,n)})})},off:function(t,e){var n=this,i=n.events[t];i&&i.forEach(function(t){return i.splice(i.indexOf(t),1)})}};var j={easeOutStrong:function(t,e,n,i){return-n*((t=t/i-1)*t*t*t-1)+e},easeOutCubic:function(t,e,n,i){return n*((t=t/i-1)*t*t+1)+e}},q=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(t,1e3/60)},z=window.cancelAnimationFrame||window.mozCancelAnimationFrame||function(t){clearTimeout(t)},F=function(){return(new Date).getTime()},X=function(t){function e(){var t=F(),i=1-(Math.max(0,l-t+o)/o||0),a=[];c.forEach(function(t){var e=t[0]===t[1]?t[0]:j[r](i*o,t[0],t[1]-t[0],o)||0;a.push(e)}),s(a),1===i?(z(n),h&&h()):n=q(e)}var n=null,i=t.time,o=void 0===i?500:i,a=t.type,r=void 0===a?"easeOutQuad":a,c=t.targets,s=t.running,h=t.end,l=F();return n=q(e),{stop:function(){z(n)}}};return U.prototype.init=function(t){var n=this;n.options=e(N(),t),y(n),T(n),E(n)},function(t){t.getTouchCenter=k,t.getDistance=B,t.getScale=R,t.calculate=D,t.Observer=b}(U),function(t){t.prototype.render=function(){var t=this,e=t.options;e.el="string"==typeof e.el?document.querySelector(e.el):e.el,e.el.appendChild(t.canvas),t.rect=t.canvas.getBoundingClientRect(),t.canvasScale=e.width/t.rect.width}}(U),function(t){var e=t.prototype;e.bindEvent=function(){var t=this,e=t.options.touchTarget||t.canvas;t.eventList.forEach(function(n){e.addEventListener(n,t,!1)})},e.handleEvent=function(t){var e=this;switch(t.type){case"touchstart":e.touchstart(t);break;case"touchmove":e.touchmove(t);break;case"touchend":e.touchend(t);break;case"mousewheel":e.mousewheel(t)}},e.mousewheel=function(t){t.preventDefault();var e=this;e.rect=e.canvas.getBoundingClientRect();var n={x:(t.clientX-e.rect.left)*e.canvasScale,y:(t.clientY-e.rect.top)*e.canvasScale},i=t.deltaY,o=Math.pow(.99,i);e.last.point=n,e.scaleTo(n,e.scale*o),e.emit("mousewheel",t)},e.touchstart=function(t){t.preventDefault();var e=this,n=t.touches;e.rect=e.canvas.getBoundingClientRect(),e.animation.stop(),2===n.length?e.pinchstart(t):1===n.length&&e.dragstart(t)},e.touchmove=function(t){var e=this,n=t.touches;2===n.length?e.pinchmove(t):1===n.length&&e.dragmove(t)},e.touchend=function(t){var e=this;t.touches.length?(e.emit("pinchend",t),e.dragstart(t)):e.dragend(t)},e.dragstart=function(t){var e=this,n=t.touches;e.last.move={x:n[0].clientX-e.rect.left,y:n[0].clientY-e.rect.top},e.last.dis={time:0,x:0,y:0},e.last.time=(new Date).getTime(),e.touchDelay=3,e.emit("dragstart",t)},e.dragmove=function(t){var e=this,n=t.touches,i={x:n[0].clientX-e.rect.left,y:n[0].clientY-e.rect.top},o=(i.x-e.last.move.x)*e.canvasScale,a=(i.y-e.last.move.y)*e.canvasScale,r=(new Date).getTime();if(e.last.dis={x:o,y:a,time:r-e.last.time},e.last.time=r,e.last.move=i,e.touchDelay)return void e.touchDelay--;e.moveTo(e.position.x+o,e.position.y+a),e.emit("dragmove",t)},e.dragend=function(t){var e=this;if(!e.validation()){var n=e.last.dis.x/e.last.dis.time,i=e.last.dis.y/e.last.dis.time;if(Math.abs(n)>.5||Math.abs(i)>.5){var o=e.position.x+200*n,a=e.position.y+200*i,r=e.checkBorder({x:o,y:a},e.scale,{x:o,y:a});r.isDraw&&(o=r.xpos,a=r.ypos),e.animation=X({time:400,targets:[[e.position.x,o],[e.position.y,a]],type:"easeOutStrong",running:function(t){e.position.x=t[0],e.position.y=t[1],e.draw()},end:function(){e.validation()}})}}e.emit("dragend",t)},e.pinchstart=function(e){var n=this,i=S(e.touches,function(t){return{x:t.clientX,y:t.clientY}}),o=t.getTouchCenter(i);n.last.zoom=i,n.last.point={x:(o.x-n.rect.left)*n.canvasScale,y:(o.y-n.rect.top)*n.canvasScale},n.touchDelay=5,n.emit("pinchstart",e)},e.pinchmove=function(e){var n=this,i=S(e.touches,function(t){return{x:t.clientX,y:t.clientY}}),o=t.getTouchCenter(i),a={x:(o.x-n.rect.left)*n.canvasScale,y:(o.y-n.rect.top)*n.canvasScale},r=a.x-n.last.point.x,c=a.y-n.last.point.y,s=t.getScale(n.last.zoom,i);if(n.last.zoom=i,n.last.point=a,n.touchDelay)return void n.touchDelay--;n.position.x+=r,n.position.y+=c,n.scaleTo(a,n.scale*s),n.emit("pinchmove",e)},e.emit=function(t){this.observer.emit.apply(this.observer,arguments)},["on","off"].forEach(function(t){e[t]=function(e,n){this.observer[t](e,n&&n.bind(this))}})}(U),function(t){var e=t.prototype;e.load=function(t,e){function n(t){var n={el:t,width:t.width,height:t.height},o=a-(c.left+c.right),h=r-(c.top+c.bottom);i.position=d(n.width,n.height,o,h),i.position.x+=c.left,i.position.y+=c.top,i.scale=i.position.width/n.width;var l=Math.max(i.scale,u),f=i.scale;i.options.maxScale=l===f?i.scale*Math.max(u,1):u,i.options.minScale=f,i.image=n,i.firstOrigin={x:i.position.x,y:i.position.y},i.draw(),setTimeout(function(){e&&e(),s.call(i)})}var i=this,o=i.options,a=o.width,r=o.height,c=o.offset,s=o.loaded,h=o.maxTargetWidth,l=o.maxTargetHeight,u=o.maxScale;f(t,n,{maxWidth:h,maxHeight:l})},e.remove=function(){var t=this,e=t.options.touchTarget||t.canvas;t.eventList.forEach(function(n){e.removeEventListener(n,t,!1)}),t.options.el.removeChild(t.canvas)},e.draw=function(){var t=this,e=t.options,n=t.context,i=t.position,o=i.x,a=i.y;n.clearRect(0,0,e.width,e.height),n.save(),t.context.translate(o,a),n.scale(t.scale,t.scale),n.drawImage(t.image.el,0,0,t.image.width,t.image.height),n.restore()},e.moveTo=function(t,e,n){var i=this;n?i.animate(i.scale,t,e):(i.position.x=t,i.position.y=e,i.draw())},e.scaleTo=function(e,n){var i=this;if(n!==i.scale){var o=n/i.scale,a=t.calculate(i.position,i.firstOrigin,e,n/o,o),r=a.x,c=a.y;i.scale=n,i.moveTo(r,c)}},e.animate=function(t,e,n){var i=this;i.animation=X({targets:[[i.scale,t],[i.position.x,e],[i.position.y,n]],time:450,type:"easeOutCubic",running:function(t){i.scale=t[0],i.position.x=t[1],i.position.y=t[2],i.draw()}})}}(U),function(t){var e=t.prototype;e.validation=function(){function e(e){var i=e/n.scale,o=t.calculate(n.position,n.firstOrigin,n.last.point,r,i),a=o.x,s=o.y;r=e,c=n.checkBorder({x:a,y:s},e,{x:a,y:s}),c.isDraw=!0}var n=this,i=n.options,o=i.maxScale,a=i.minScale,r=n.scale,c={xpos:n.position.x,ypos:n.position.y,isDraw:!1};return r>o?e(o):r<a?e(a):c=n.checkBorder(n.position,r,n.position),c.isDraw&&n.animate(r,c.xpos,c.ypos),c.isDraw},e.checkBorder=function(t,e,n){var i=this,o=i.options,a=o.width,r=o.height,c=o.offset,s=e*i.image.width,h=e*i.image.height,l=a-(c.left+c.right)-(s-(c.left-n.x)),u=r-(c.top+c.bottom)-(h-(c.top-n.y)),d=t.x,f=t.y,p=!1;return f>c.top?(f=c.top,p=!0):u>0&&(f+=u,p=!0),d>c.left?(d=c.left,p=!0):l>0&&(d+=l,p=!0),{xpos:d,ypos:f,isDraw:p}}}(U),O.prototype={init:function(t){this.options=e(L(),t),this.create()},create:function(){var t=this,e=t.options,n=e.el;t.options.el=n="string"==typeof n?document.querySelector(n):n;var i=[],o=e.width,a=e.height,r=document.documentElement,c={className:"crop-wrap",width:r.clientWidth,height:r.clientHeight,style:function(){return"\n ."+this.className+" {\n position: fixed;\n left: 0;\n top: 0;\n overflow: hidden;\n width: "+this.width+"px;\n height: "+this.height+"px;\n background: #000;\n z-index: 99;\n }\n "}},s={className:"crop-mask",left:"number"==typeof e.x?e.x-c.width:-(o+c.width)/2,top:"number"==typeof e.y?e.y-c.height:-(a+c.height)/2,style:function(){return"\n ."+this.className+" {\n position: absolute; \n left: "+this.left+"px;\n top: "+this.top+"px;\n width: "+o+"px; \n height: "+a+"px; \n overflow: hidden;\n border: 1px solid rgba(0, 0, 0, .6);\n border-width: "+c.height+"px "+c.width+"px;\n transform: translateZ(0);\n -webkit-transform: translateZ(0);\n box-sizing: content-box;\n }\n ."+this.className+":after {\n position: absolute;\n left: 0;\n top: 0;\n float: left;\n content: '';\n width: 200%;\n height: 200%;\n border: 1px solid #fff;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n -webkit-transform-origin: 0 0;\n transform-origin: 0 0;\n }\n "}},h={className:"crop-handle",style:function(){return"\n ."+this.className+" {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 50px;\n line-height: 50px;\n transform: translateZ(0);\n -webkit-transform: translateZ(0);\n }\n ."+this.className+" > div {\n height: 100px;\n width: 80px;\n color: #fff;\n font-size: 16px;\n text-align: center;\n }\n "}},l={className:"crop-cancle",style:function(){return"\n ."+this.className+" {\n float: left;\n }\n "},events:{touchstart:e.cancle.bind(t)}},u={className:"crop-confirm",style:function(){return"\n ."+this.className+" {\n float: right;\n }\n "},events:{touchstart:e.confirm.bind(t)}};t.root=new m("div",c,[new m("div",s),new m("div",h,[new m("div",l,["取消"]),new m("div",u,["确认"])])]),v(t.root,function(t){t.style&&i.push(t.style())}),t.styles=i.join(""),t.area={width:o,height:a},e.x=c.width+s.left,e.y=c.height+s.top,e.created.call(t)},render:function(){var t=this,e=t.options;O.isRenderStyle||(w(t.styles),O.isRenderStyle=!0),e.el.appendChild(t.root.el),M(t),setTimeout(function(){e.mounted.call(t)},0)},get:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{width:void 0,height:void 0,type:"image/jpeg",quality:.85,format:"canvas"},e=this,i=e.pinch,o=t.width,c=t.height,s=t.type,h=t.quality,l=t.format,u=i.options.width/i.rect.width,d=e.area.width*u,f=e.area.height*u,p=function(){var t=document.createElement("canvas"),e=i.options.offset.left,n=i.options.offset.top,o=t.getContext("2d");return t.width=d,t.height=f,o.drawImage(i.canvas,e,n,d,f,0,0,d,f),t}(),m={},v=o||c;if(v){var g=o?o/d:c/f,w=v>=150?a(p,g):r(p,g);m.canvas=w}else m.canvas=p;switch(l){case"src":m.src=m.canvas.toDataURL(s,h);break;case"blob":m.blob=n(m.canvas.toDataURL(s,h));break;case"url":m.url=H.createObjectURL(n(m.canvas.toDataURL(s,h)))}return m},load:function(t){var e=this;e.options.target=t,e.pinch?e.pinch.load(t):this.render()},show:function(){var t=this;setTimeout(function(){t.root.el.style.display="block"})},hide:function(){var t=this;setTimeout(function(){t.root.el.style.display="none"})},destroy:function(){var t=this;t.pinch&&(t.pinch.remove(),g(t.root,t.options.el))},moveTo:function(t,e){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],i=this.pinch.checkBorder({x:t,y:e},this.pinch.scale,{x:t,y:e});i.isDraw&&(t=i.xpos,e=i.ypos),this.pinch.moveTo(t,e,n)},scaleTo:function(t,e){this.pinch.scaleTo(t,e)}},O.isRenderStyle=!1,O.loadImage=f,O.Pinch=U,O})}),i={target:{type:null,required:!0},options:{type:Object,default:function(){return{maxTargetWidth:2e3,maxTargetHeight:2e3,width:300,height:300,x:void 0,y:void 0,maxScale:2,canvasScale:2,touchTarget:null}}},autoClose:{type:Boolean,default:!0}},o={name:"crop",props:i,template:'<div class="vue-crop-component" style="width: 0; height: 0;"></div>',watch:{target:function(t){this.load()}},ready:function(){this.init()},mounted:function(){this.init()},methods:{init:function(){var e=this,i=t(e.options,{el:e.$el,cancle:function(){e.$emit("on-cancle"),e.autoClose&&e._crop.hide()},confirm:function(){e.$emit("on-confirm",e._crop),e.autoClose&&e._crop.hide()},loaded:function(){e.$emit("on-loaded",e._crop),e._crop.show()},mounted:function(){e.$emit("on-mounted",e._crop),e.addTouchEvents()}});e._crop=new n(i)},load:function(){this.target&&this._crop&&this._crop.load(this.target)},addTouchEvents:function(){var t=this;["dragstart","dragmove","dragend","pinchstart","pinchmove","pinchend"].forEach(function(e){t._crop.pinch.on(e,function(n){t.$emit("on-"+e,n)})})}},beforeDestroy:function(){this._crop&&this._crop.destroy(),this._crop=null}};return"undefined"!=typeof window&&window.Vue&&window.Vue.component("crop",o),o});