weiyun-ui/lib/packages/wy-camera/index.js

UI library For Vue

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("wy-camera",[],e):"object"==typeof exports?exports["wy-camera"]=e():t["wy-camera"]=e()}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=587)}({1:function(t,e,n){var i=n(25)("wks"),r=n(18),o=n(2).Symbol,s="function"==typeof o;(t.exports=function(t){return i[t]||(i[t]=s&&o[t]||(s?o:r)("Symbol."+t))}).store=i},10:function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},103:function(t,e,n){"use strict";var i=n(38),r=RegExp.prototype.exec;t.exports=function(t,e){var n=t.exec;if("function"==typeof n){var o=n.call(t,e);if("object"!=typeof o)throw new TypeError("RegExp exec method returned something other than an Object or null");return o}if("RegExp"!==i(t))throw new TypeError("RegExp#exec called on incompatible receiver");return r.call(t,e)}},104:function(t,e,n){"use strict";n(116);var i=n(9),r=n(11),o=n(8),s=n(19),a=n(1),c=n(72),h=a("species"),p=!o((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$<a>")})),u=function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2===n.length&&"a"===n[0]&&"b"===n[1]}();t.exports=function(t,e,n){var l=a(t),f=!o((function(){var e={};return e[l]=function(){return 7},7!=""[t](e)})),g=f?!o((function(){var e=!1,n=/a/;return n.exec=function(){return e=!0,null},"split"===t&&(n.constructor={},n.constructor[h]=function(){return n}),n[l](""),!e})):void 0;if(!f||!g||"replace"===t&&!p||"split"===t&&!u){var d=/./[l],m=n(s,l,""[t],(function(t,e,n,i,r){return e.exec===c?f&&!r?{done:!0,value:d.call(e,n,i)}:{done:!0,value:t.call(n,e,i)}:{done:!1}})),v=m[0],A=m[1];i(String.prototype,t,v),r(RegExp.prototype,l,2==e?function(t,e){return A.call(t,this,e)}:function(t){return A.call(t,this)})}}},106:function(t,e,n){"use strict";var i=n(61)(!0);t.exports=function(t,e,n){return e+(n?i(t,e).length:1)}},109:function(t,e,n){var i=n(6),r=n(14),o=n(1)("match");t.exports=function(t){var e;return i(t)&&(void 0!==(e=t[o])?!!e:"RegExp"==r(t))}},11:function(t,e,n){var i=n(7),r=n(22);t.exports=n(4)?function(t,e,n){return i.f(t,e,r(1,n))}:function(t,e,n){return t[e]=n,t}},116:function(t,e,n){"use strict";var i=n(72);n(3)({target:"RegExp",proto:!0,forced:i!==/./.exec},{exec:i})},119:function(t,e,n){"use strict";var i=n(109),r=n(5),o=n(69),s=n(106),a=n(16),c=n(103),h=n(72),p=n(8),u=Math.min,l=[].push,f="length",g=!p((function(){RegExp(4294967295,"y")}));n(104)("split",2,(function(t,e,n,p){var d;return d="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1)[f]||2!="ab".split(/(?:ab)*/)[f]||4!=".".split(/(.?)(.?)/)[f]||".".split(/()()/)[f]>1||"".split(/.?/)[f]?function(t,e){var r=String(this);if(void 0===t&&0===e)return[];if(!i(t))return n.call(r,t,e);for(var o,s,a,c=[],p=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),u=0,g=void 0===e?4294967295:e>>>0,d=new RegExp(t.source,p+"g");(o=h.call(d,r))&&!((s=d.lastIndex)>u&&(c.push(r.slice(u,o.index)),o[f]>1&&o.index<r[f]&&l.apply(c,o.slice(1)),a=o[0][f],u=s,c[f]>=g));)d.lastIndex===o.index&&d.lastIndex++;return u===r[f]?!a&&d.test("")||c.push(""):c.push(r.slice(u)),c[f]>g?c.slice(0,g):c}:"0".split(void 0,0)[f]?function(t,e){return void 0===t&&0===e?[]:n.call(this,t,e)}:n,[function(n,i){var r=t(this),o=null==n?void 0:n[e];return void 0!==o?o.call(n,r,i):d.call(String(r),n,i)},function(t,e){var i=p(d,t,this,e,d!==n);if(i.done)return i.value;var h=r(t),l=String(this),f=o(h,RegExp),m=h.unicode,v=(h.ignoreCase?"i":"")+(h.multiline?"m":"")+(h.unicode?"u":"")+(g?"y":"g"),A=new f(g?h:"^(?:"+h.source+")",v),x=void 0===e?4294967295:e>>>0;if(0===x)return[];if(0===l.length)return null===c(A,l)?[l]:[];for(var w=0,C=0,y=[];C<l.length;){A.lastIndex=g?C:0;var b,W=c(A,g?l:l.slice(C));if(null===W||(b=u(a(A.lastIndex+(g?0:C)),l.length))===w)C=s(l,C,m);else{if(y.push(l.slice(w,C)),y.length===x)return y;for(var H=1;H<=W.length-1;H++)if(y.push(W[H]),y.length===x)return y;C=w=b}}return y.push(l.slice(w)),y}]}))},12:function(t,e,n){var i=n(45),r=n(19);t.exports=function(t){return i(r(t))}},124:function(t,e,n){var i=Date.prototype,r=i.toString,o=i.getTime;new Date(NaN)+""!="Invalid Date"&&n(9)(i,"toString",(function(){var t=o.call(this);return t==t?r.call(this):"Invalid Date"}))},125:function(t,e,n){"use strict";n(126);var i=n(5),r=n(91),o=n(4),s=/./.toString,a=function(t){n(9)(RegExp.prototype,"toString",t,!0)};n(8)((function(){return"/a/b"!=s.call({source:"a",flags:"b"})}))?a((function(){var t=i(this);return"/".concat(t.source,"/","flags"in t?t.flags:!o&&t instanceof RegExp?r.call(t):void 0)})):"toString"!=s.name&&a((function(){return s.call(this)}))},126:function(t,e,n){n(4)&&"g"!=/./g.flags&&n(7).f(RegExp.prototype,"flags",{configurable:!0,get:n(91)})},13:function(t,e){var n=t.exports={version:"2.6.12"};"number"==typeof __e&&(__e=n)},14:function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},15:function(t,e,n){var i=n(29);t.exports=function(t,e,n){if(i(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,i){return t.call(e,n,i)};case 3:return function(n,i,r){return t.call(e,n,i,r)}}return function(){return t.apply(e,arguments)}}},16:function(t,e,n){var i=n(26),r=Math.min;t.exports=function(t){return t>0?r(i(t),9007199254740991):0}},17:function(t,e,n){var i=n(19);t.exports=function(t){return Object(i(t))}},18:function(t,e){var n=0,i=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+i).toString(36))}},19:function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on  "+t);return t}},2:function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},20:function(t,e,n){var i=n(47),r=n(35);t.exports=Object.keys||function(t){return i(t,r)}},21:function(t,e){t.exports=!1},22:function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},23:function(t,e){t.exports={}},24:function(t,e,n){var i=n(6);t.exports=function(t,e){if(!i(t))return t;var n,r;if(e&&"function"==typeof(n=t.toString)&&!i(r=n.call(t)))return r;if("function"==typeof(n=t.valueOf)&&!i(r=n.call(t)))return r;if(!e&&"function"==typeof(n=t.toString)&&!i(r=n.call(t)))return r;throw TypeError("Can't convert object to primitive value")}},25:function(t,e,n){var i=n(13),r=n(2),o=r["__core-js_shared__"]||(r["__core-js_shared__"]={});(t.exports=function(t,e){return o[t]||(o[t]=void 0!==e?e:{})})("versions",[]).push({version:i.version,mode:n(21)?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},26:function(t,e){var n=Math.ceil,i=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?i:n)(t)}},27:function(t,e,n){"use strict";function i(t,e,n,i,r,o,s,a){var c,h="function"==typeof t?t.options:t;if(e&&(h.render=e,h.staticRenderFns=n,h._compiled=!0),i&&(h.functional=!0),o&&(h._scopeId="data-v-"+o),s?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},h._ssrRegister=c):r&&(c=a?function(){r.call(this,(h.functional?this.parent:this).$root.$options.shadowRoot)}:r),c)if(h.functional){h._injectStyles=c;var p=h.render;h.render=function(t,e){return c.call(e),p(t,e)}}else{var u=h.beforeCreate;h.beforeCreate=u?[].concat(u,c):[c]}return{exports:t,options:h}}n.d(e,"a",(function(){return i}))},28:function(t,e,n){var i=n(7).f,r=n(10),o=n(1)("toStringTag");t.exports=function(t,e,n){t&&!r(t=n?t:t.prototype,o)&&i(t,o,{configurable:!0,value:e})}},29:function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},3:function(t,e,n){var i=n(2),r=n(13),o=n(11),s=n(9),a=n(15),c=function(t,e,n){var h,p,u,l,f=t&c.F,g=t&c.G,d=t&c.S,m=t&c.P,v=t&c.B,A=g?i:d?i[e]||(i[e]={}):(i[e]||{}).prototype,x=g?r:r[e]||(r[e]={}),w=x.prototype||(x.prototype={});for(h in g&&(n=e),n)u=((p=!f&&A&&void 0!==A[h])?A:n)[h],l=v&&p?a(u,i):m&&"function"==typeof u?a(Function.call,u):u,A&&s(A,h,u,t&c.U),x[h]!=u&&o(x,h,l),m&&w[h]!=u&&(w[h]=u)};i.core=r,c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,t.exports=c},30:function(t,e,n){var i=n(34),r=n(22),o=n(12),s=n(24),a=n(10),c=n(41),h=Object.getOwnPropertyDescriptor;e.f=n(4)?h:function(t,e){if(t=o(t),e=s(e,!0),c)try{return h(t,e)}catch(t){}if(a(t,e))return r(!i.f.call(t,e),t[e])}},31:function(t,e,n){var i=n(7).f,r=Function.prototype,o=/^\s*function ([^ (]*)/;"name"in r||n(4)&&i(r,"name",{configurable:!0,get:function(){try{return(""+this).match(o)[1]}catch(t){return""}}})},32:function(t,e,n){var i=n(5),r=n(57),o=n(35),s=n(37)("IE_PROTO"),a=function(){},c=function(){var t,e=n(33)("iframe"),i=o.length;for(e.style.display="none",n(42).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),c=t.F;i--;)delete c.prototype[o[i]];return c()};t.exports=Object.create||function(t,e){var n;return null!==t?(a.prototype=i(t),n=new a,a.prototype=null,n[s]=t):n=c(),void 0===e?n:r(n,e)}},321:function(t,e,n){var i;self,i=()=>(()=>{"use strict";var t={750:(t,e,n)=>{n.d(e,{A:()=>l});var i=n(354),r=n.n(i),o=n(314),s=n.n(o),a=n(417),c=n.n(a),h=new URL(n(107),n.b),p=s()(r()),u=c()(h);p.push([t.id,`\n.vue-cropper[data-v-01ee97ad] {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  direction: ltr;\n  touch-action: none;\n  text-align: left;\n  background-image: url(${u});\n}\n.cropper-box[data-v-01ee97ad],\n.cropper-box-canvas[data-v-01ee97ad],\n.cropper-drag-box[data-v-01ee97ad],\n.cropper-crop-box[data-v-01ee97ad],\n.cropper-face[data-v-01ee97ad] {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  user-select: none;\n}\n.cropper-box-canvas img[data-v-01ee97ad] {\n  position: relative;\n  text-align: left;\n  user-select: none;\n  transform: none;\n  max-width: none;\n  max-height: none;\n}\n.cropper-box[data-v-01ee97ad] {\n  overflow: hidden;\n}\n.cropper-move[data-v-01ee97ad] {\n  cursor: move;\n}\n.cropper-crop[data-v-01ee97ad] {\n  cursor: crosshair;\n}\n.cropper-modal[data-v-01ee97ad] {\n  background: rgba(0, 0, 0, 0.5);\n}\n.cropper-crop-box[data-v-01ee97ad] {\n  /*border: 2px solid #39f;*/\n}\n.cropper-view-box[data-v-01ee97ad] {\n  display: block;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  outline: 1px solid #39f;\n  outline-color: rgba(51, 153, 255, 0.75);\n  user-select: none;\n}\n.cropper-view-box img[data-v-01ee97ad] {\n  user-select: none;\n  text-align: left;\n  max-width: none;\n  max-height: none;\n}\n.cropper-face[data-v-01ee97ad] {\n  top: 0;\n  left: 0;\n  background-color: #fff;\n  opacity: 0.1;\n}\n.crop-info[data-v-01ee97ad] {\n  position: absolute;\n  left: 0px;\n  min-width: 65px;\n  text-align: center;\n  color: white;\n  line-height: 20px;\n  background-color: rgba(0, 0, 0, 0.8);\n  font-size: 12px;\n}\n.crop-line[data-v-01ee97ad] {\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n  opacity: 0.1;\n}\n.line-w[data-v-01ee97ad] {\n  top: -3px;\n  left: 0;\n  height: 5px;\n  cursor: n-resize;\n}\n.line-a[data-v-01ee97ad] {\n  top: 0;\n  left: -3px;\n  width: 5px;\n  cursor: w-resize;\n}\n.line-s[data-v-01ee97ad] {\n  bottom: -3px;\n  left: 0;\n  height: 5px;\n  cursor: s-resize;\n}\n.line-d[data-v-01ee97ad] {\n  top: 0;\n  right: -3px;\n  width: 5px;\n  cursor: e-resize;\n}\n.crop-point[data-v-01ee97ad] {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  opacity: 0.75;\n  background-color: #39f;\n  border-radius: 100%;\n}\n.point1[data-v-01ee97ad] {\n  top: -4px;\n  left: -4px;\n  cursor: nw-resize;\n}\n.point2[data-v-01ee97ad] {\n  top: -5px;\n  left: 50%;\n  margin-left: -3px;\n  cursor: n-resize;\n}\n.point3[data-v-01ee97ad] {\n  top: -4px;\n  right: -4px;\n  cursor: ne-resize;\n}\n.point4[data-v-01ee97ad] {\n  top: 50%;\n  left: -4px;\n  margin-top: -3px;\n  cursor: w-resize;\n}\n.point5[data-v-01ee97ad] {\n  top: 50%;\n  right: -4px;\n  margin-top: -3px;\n  cursor: e-resize;\n}\n.point6[data-v-01ee97ad] {\n  bottom: -5px;\n  left: -4px;\n  cursor: sw-resize;\n}\n.point7[data-v-01ee97ad] {\n  bottom: -5px;\n  left: 50%;\n  margin-left: -3px;\n  cursor: s-resize;\n}\n.point8[data-v-01ee97ad] {\n  bottom: -5px;\n  right: -4px;\n  cursor: se-resize;\n}\n@media screen and (max-width: 500px) {\n.crop-point[data-v-01ee97ad] {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    opacity: 0.45;\n    background-color: #39f;\n    border-radius: 100%;\n}\n.point1[data-v-01ee97ad] {\n    top: -10px;\n    left: -10px;\n}\n.point2[data-v-01ee97ad],\n  .point4[data-v-01ee97ad],\n  .point5[data-v-01ee97ad],\n  .point7[data-v-01ee97ad] {\n    display: none;\n}\n.point3[data-v-01ee97ad] {\n    top: -10px;\n    right: -10px;\n}\n.point4[data-v-01ee97ad] {\n    top: 0;\n    left: 0;\n}\n.point6[data-v-01ee97ad] {\n    bottom: -10px;\n    left: -10px;\n}\n.point8[data-v-01ee97ad] {\n    bottom: -10px;\n    right: -10px;\n}\n}\n`,"",{version:3,sources:["webpack://./src/vue-cropper.vue"],names:[],mappings:";AA6+DA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,sBAAA;EACA,iBAAA;EACA,yBAAA;EACA,sBAAA;EACA,qBAAA;EACA,cAAA;EACA,kBAAA;EACA,gBAAA;EACA,yDAAA;AACA;AAEA;;;;;EAKA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,iBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,iBAAA;EACA,eAAA;EACA,eAAA;EACA,gBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;AACA;AAEA;EACA,iBAAA;AACA;AAEA;EACA,8BAAA;AACA;AAEA;EACA,0BAAA;AACA;AAEA;EACA,cAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,uCAAA;EACA,iBAAA;AACA;AAEA;EACA,iBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;AACA;AAEA;EACA,MAAA;EACA,OAAA;EACA,sBAAA;EACA,YAAA;AACA;AAEA;EACA,kBAAA;EACA,SAAA;EACA,eAAA;EACA,kBAAA;EACA,YAAA;EACA,iBAAA;EACA,oCAAA;EACA,eAAA;AACA;AAEA;EACA,kBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;AACA;AAEA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,gBAAA;AACA;AAEA;EACA,MAAA;EACA,UAAA;EACA,UAAA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;EACA,OAAA;EACA,WAAA;EACA,gBAAA;AACA;AAEA;EACA,MAAA;EACA,WAAA;EACA,UAAA;EACA,gBAAA;AACA;AAEA;EACA,kBAAA;EACA,UAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;AACA;AAEA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;AACA;AAEA;EACA,SAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;AACA;AAEA;EACA,SAAA;EACA,WAAA;EACA,iBAAA;AACA;AAEA;EACA,QAAA;EACA,UAAA;EACA,gBAAA;EACA,gBAAA;AACA;AAEA;EACA,QAAA;EACA,WAAA;EACA,gBAAA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;EACA,UAAA;EACA,iBAAA;AACA;AAEA;EACA,YAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;AACA;AAEA;EACA,YAAA;EACA,WAAA;EACA,iBAAA;AACA;AAEA;AACA;IACA,kBAAA;IACA,WAAA;IACA,YAAA;IACA,aAAA;IACA,sBAAA;IACA,mBAAA;AACA;AAEA;IACA,UAAA;IACA,WAAA;AACA;AAEA;;;;IAIA,aAAA;AACA;AAEA;IACA,UAAA;IACA,YAAA;AACA;AAEA;IACA,MAAA;IACA,OAAA;AACA;AAEA;IACA,aAAA;IACA,WAAA;AACA;AAEA;IACA,aAAA;IACA,YAAA;AACA;AACA",sourcesContent:['<template>\n  <div class="vue-cropper" ref="cropper" @mouseover="scaleImg" @mouseout="cancelScale">\n    <div class="cropper-box" v-if="imgs">\n      <div\n        class="cropper-box-canvas"\n        v-show="!loading"\n        :style="{\n\t\t\t\t\t\'width\': trueWidth + \'px\',\n\t\t\t\t\t\'height\': trueHeight + \'px\',\n\t\t\t\t\t\'transform\': \'scale(\' + scale + \',\' + scale + \') \' + \'translate3d(\'+ x / scale + \'px,\' + y / scale + \'px,\' + \'0)\'\n\t\t\t\t\t+ \'rotateZ(\'+ rotate * 90 +\'deg)\'\n\t\t\t\t\t}"\n      >\n        <img :src="imgs" alt="cropper-img" ref="cropperImg">\n      </div>\n    </div>\n    <div\n      class="cropper-drag-box"\n      :class="{\'cropper-move\': move && !crop, \'cropper-crop\': crop, \'cropper-modal\': cropping}"\n      @mousedown="startMove"\n      @touchstart="startMove"\n    ></div>\n    <div\n      v-show="cropping"\n      class="cropper-crop-box"\n      :style="{\n\t\t\t\t\t\'width\': cropW + \'px\',\n\t\t\t\t\t\'height\': cropH + \'px\',\n\t\t\t\t\t\'transform\': \'translate3d(\'+ cropOffsertX + \'px,\' + cropOffsertY + \'px,\' + \'0)\'\n\t\t\t\t}"\n    >\n      <span class="cropper-view-box">\n        <img\n          :style="{\n\t\t\t\t\t\t\'width\': trueWidth + \'px\',\n\t\t\t\t\t\t\'height\': trueHeight + \'px\',\n\t\t\t\t\t\t\'transform\': \'scale(\' + scale + \',\' + scale + \') \' + \'translate3d(\'+ (x - cropOffsertX) / scale  + \'px,\' + (y - cropOffsertY) / scale + \'px,\' + \'0)\'\n\t\t\t\t\t\t+ \'rotateZ(\'+ rotate * 90 +\'deg)\'\n\t\t\t\t\t\t}"\n          :src="imgs"\n          alt="cropper-img"\n        >\n      </span>\n      <span class="cropper-face cropper-move" @mousedown="cropMove" @touchstart="cropMove"></span>\n      <span\n        class="crop-info"\n        v-if="info"\n        :style="{\'top\': cropInfo.top}"\n      >{{ cropInfo.width }} × {{ cropInfo.height }}</span>\n      <span v-if="!fixedBox">\n        <span\n          class="crop-line line-w"\n          @mousedown="changeCropSize($event, false, true, 0, 1)"\n          @touchstart="changeCropSize($event, false, true, 0, 1)"\n        ></span>\n        <span\n          class="crop-line line-a"\n          @mousedown="changeCropSize($event, true, false, 1, 0)"\n          @touchstart="changeCropSize($event, true, false, 1, 0)"\n        ></span>\n        <span\n          class="crop-line line-s"\n          @mousedown="changeCropSize($event, false, true, 0, 2)"\n          @touchstart="changeCropSize($event, false, true, 0, 2)"\n        ></span>\n        <span\n          class="crop-line line-d"\n          @mousedown="changeCropSize($event, true, false, 2, 0)"\n          @touchstart="changeCropSize($event, true, false, 2, 0)"\n        ></span>\n        <span\n          class="crop-point point1"\n          @mousedown="changeCropSize($event, true, true, 1, 1)"\n          @touchstart="changeCropSize($event, true, true, 1, 1)"\n        ></span>\n        <span\n          class="crop-point point2"\n          @mousedown="changeCropSize($event, false, true, 0, 1)"\n          @touchstart="changeCropSize($event, false, true, 0, 1)"\n        ></span>\n        <span\n          class="crop-point point3"\n          @mousedown="changeCropSize($event, true, true, 2, 1)"\n          @touchstart="changeCropSize($event, true, true, 2, 1)"\n        ></span>\n        <span\n          class="crop-point point4"\n          @mousedown="changeCropSize($event, true, false, 1, 0)"\n          @touchstart="changeCropSize($event, true, false, 1, 0)"\n        ></span>\n        <span\n          class="crop-point point5"\n          @mousedown="changeCropSize($event, true, false, 2, 0)"\n          @touchstart="changeCropSize($event, true, false, 2, 0)"\n        ></span>\n        <span\n          class="crop-point point6"\n          @mousedown="changeCropSize($event, true, true, 1, 2)"\n          @touchstart="changeCropSize($event, true, true, 1, 2)"\n        ></span>\n        <span\n          class="crop-point point7"\n          @mousedown="changeCropSize($event, false, true, 0, 2)"\n          @touchstart="changeCropSize($event, false, true, 0, 2)"\n        ></span>\n        <span\n          class="crop-point point8"\n          @mousedown="changeCropSize($event, true, true, 2, 2)"\n          @touchstart="changeCropSize($event, true, true, 2, 2)"\n        ></span>\n      </span>\n    </div>\n  </div>\n</template>\n\n<script>\nimport exifmin from "./exif-js-min";\n\nexport default {\n  data: function() {\n    return {\n      // 容器高宽\n      w: 0,\n      h: 0,\n      // 图片缩放比例\n      scale: 1,\n      // 图片偏移x轴\n      x: 0,\n      // 图片偏移y轴\n      y: 0,\n      // 图片加载\n      loading: true,\n      // 图片真实宽度\n      trueWidth: 0,\n      // 图片真实高度\n      trueHeight: 0,\n      move: true,\n      // 移动的x\n      moveX: 0,\n      // 移动的y\n      moveY: 0,\n      // 开启截图\n      crop: false,\n      // 正在截图\n      cropping: false,\n      // 裁剪框大小\n      cropW: 0,\n      cropH: 0,\n      cropOldW: 0,\n      cropOldH: 0,\n      // 判断是否能够改变\n      canChangeX: false,\n      canChangeY: false,\n      // 改变的基准点\n      changeCropTypeX: 1,\n      changeCropTypeY: 1,\n      // 裁剪框的坐标轴\n      cropX: 0,\n      cropY: 0,\n      cropChangeX: 0,\n      cropChangeY: 0,\n      cropOffsertX: 0,\n      cropOffsertY: 0,\n      // 支持的滚动事件\n      support: "",\n      // 移动端手指缩放\n      touches: [],\n      touchNow: false,\n      // 图片旋转\n      rotate: 0,\n      isIos: false,\n      orientation: 0,\n      imgs: "",\n      // 图片缩放系数\n      coe: 0.2,\n      // 是否正在多次缩放\n      scaling: false,\n      scalingSet: "",\n      coeStatus: "",\n      // 控制emit触发频率\n      isCanShow: true,\n      // 图片是否等于截图大小\n      imgIsQqualCrop: false\n    };\n  },\n  props: {\n    img: {\n      type: [String, Blob, null, File],\n      default: ""\n    },\n    // 输出图片压缩比\n    outputSize: {\n      type: Number,\n      default: 1\n    },\n    outputType: {\n      type: String,\n      default: "jpeg"\n    },\n    info: {\n      type: Boolean,\n      default: true\n    },\n    // 是否开启滚轮放大缩小\n    canScale: {\n      type: Boolean,\n      default: true\n    },\n    // 是否自成截图框\n    autoCrop: {\n      type: Boolean,\n      default: false\n    },\n    autoCropWidth: {\n      type: [Number, String],\n      default: 0\n    },\n    autoCropHeight: {\n      type: [Number, String],\n      default: 0\n    },\n    // 是否开启固定宽高比\n    fixed: {\n      type: Boolean,\n      default: false\n    },\n    // 宽高比 w/h\n    fixedNumber: {\n      type: Array,\n      default: () => {\n        return [1, 1];\n      }\n    },\n    // 固定大小 禁止改变截图框大小\n    fixedBox: {\n      type: Boolean,\n      default: false\n    },\n    // 输出截图是否缩放\n    full: {\n      type: Boolean,\n      default: false\n    },\n    // 是否可以拖动图片\n    canMove: {\n      type: Boolean,\n      default: true\n    },\n    // 是否可以拖动截图框\n    canMoveBox: {\n      type: Boolean,\n      default: true\n    },\n    // 上传图片按照原始比例显示\n    original: {\n      type: Boolean,\n      default: false\n    },\n    // 截图框能否超过图片\n    centerBox: {\n      type: Boolean,\n      default: false\n    },\n    // 是否根据dpr输出高清图片\n    high: {\n      type: Boolean,\n      default: true\n    },\n    // 截图框展示宽高类型\n    infoTrue: {\n      type: Boolean,\n      default: false\n    },\n    // 可以压缩图片宽高  默认不超过200\n    maxImgSize: {\n      type: [Number, String],\n      default: 2000\n    },\n    // 倍数  可渲染当前截图框的n倍 0 - 1000;\n    enlarge: {\n      type: [Number, String],\n      default: 1\n    },\n\n    // 自动预览的固定宽度\n    preW: {\n      type: [Number, String],\n      default: 0\n    },\n    /*\n      图片布局方式 mode 实现和css背景一样的效果\n      contain  居中布局 默认不会缩放 保证图片在容器里面 mode: \'contain\'\n      cover    拉伸布局 填充整个容器  mode: \'cover\'\n      如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。 mode: \'50px\'\n      如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。 mode: \'50px 60px\'\n    */\n    mode: {\n      type: String,\n      default: "contain"\n    },\n    //限制最小区域,可传1以上的数字和字符串，限制长宽都是这么大\n    // 也可以传数组[90,90] \n    limitMinSize: {\n      type: [Number, Array, String],\n      default: () => {\n        return 10;\n      },\n      validator: function (value) {\n        if (Array.isArray(value)) {\n          return Number(value[0]) >= 0 && Number(value[1]) >= 0;\n        } else {\n          return Number(value) >= 0;\n        }\n      },\n    },\n    // 导出时,填充背景颜色\n    fillColor: {\n      type: String,\n      default: "",\n    },\n  },\n  computed: {\n    cropInfo() {\n      let obj = {};\n      obj.top = this.cropOffsertY > 21 ? "-21px" : "0px";\n      obj.width = this.cropW > 0 ? this.cropW : 0;\n      obj.height = this.cropH > 0 ? this.cropH : 0;\n      if (this.infoTrue) {\n        let dpr = 1;\n        if (this.high && !this.full) {\n          dpr = window.devicePixelRatio;\n        }\n        if ((this.enlarge !== 1) & !this.full) {\n          dpr = Math.abs(Number(this.enlarge));\n        }\n        obj.width = obj.width * dpr;\n        obj.height = obj.height * dpr;\n        if (this.full) {\n          obj.width = obj.width / this.scale;\n          obj.height = obj.height / this.scale;\n        }\n      }\n      obj.width = obj.width.toFixed(0);\n      obj.height = obj.height.toFixed(0);\n      return obj;\n    },\n\n    isIE() {\n      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串\n      const isIE = !!window.ActiveXObject || \'ActiveXObject\' in window; //判断是否IE浏览器\n      return isIE;\n    },\n\n    passive () {\n      return this.isIE ? null : {\n        passive: false\n      }\n    }\n  },\n  watch: {\n    // 如果图片改变， 重新布局\n    img() {\n      // 当传入图片时, 读取图片信息同时展示\n      this.checkedImg();\n    },\n    imgs(val) {\n      if (val === "") {\n        return;\n      }\n      this.reload();\n    },\n    cropW() {\n      this.showPreview();\n    },\n    cropH() {\n      this.showPreview();\n    },\n    cropOffsertX() {\n      this.showPreview();\n    },\n    cropOffsertY() {\n      this.showPreview();\n    },\n    scale(val, oldVal) {\n      this.showPreview();\n    },\n    x() {\n      this.showPreview();\n    },\n    y() {\n      this.showPreview();\n    },\n    autoCrop(val) {\n      if (val) {\n        this.goAutoCrop();\n      }\n    },\n    // 修改了自动截图框\n    autoCropWidth() {\n      if (this.autoCrop) {\n        this.goAutoCrop();\n      }\n    },\n    autoCropHeight() {\n      if (this.autoCrop) {\n        this.goAutoCrop();\n      }\n    },\n    mode() {\n      this.checkedImg();\n    },\n    rotate() {\n      this.showPreview();\n      if (this.autoCrop) {\n        this.goAutoCrop(this.cropW, this.cropH);\n      } else {\n        if (this.cropW > 0 || this.cropH > 0) {\n          this.goAutoCrop(this.cropW, this.cropH);\n        }\n      }\n    }\n  },\n  methods: {\n    getVersion (name) {\n      var arr = navigator.userAgent.split(\' \'); \n      var chromeVersion = \'\';\n      let result = 0;\n      const reg = new RegExp(name, \'i\')\n      for(var i=0;i < arr.length;i++){\n          if(reg.test(arr[i]))\n          chromeVersion = arr[i]\n      }\n      if(chromeVersion){\n          result = chromeVersion.split(\'/\')[1].split(\'.\');\n      } else {\n          result = [\'0\', \'0\', \'0\'];\n      }\n      return result\n    },\n    checkOrientationImage(img, orientation, width, height) {\n      // 如果是 chrome内核版本在81 safari 在 605 以上不处理图片旋转\n      // alert(navigator.userAgent)\n      if (this.getVersion(\'chrome\')[0] >= 81) {\n        orientation = -1\n      } else {\n        if (this.getVersion(\'safari\')[0] >= 605 ) {\n          const safariVersion = this.getVersion(\'version\')\n          if (safariVersion[0] > 13 && safariVersion[1] > 1) {\n              orientation = -1\n          }\n        } else {\n          //  判断 ios 版本进行处理\n         // 针对 ios 版本大于 13.4的系统不做图片旋转\n         const isIos  = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)\n         if (isIos) {\n           let version = isIos[1]\n           version = version.split(\'_\')\n           if (version[0] > 13 ||  (version[0] >= 13 && version[1] >= 4)) {\n             orientation = -1\n           }\n         }\n        }\n      }\n      \n      // alert(`当前处理的orientation${orientation}`)\n      let canvas = document.createElement("canvas");\n      let ctx = canvas.getContext("2d");\n      ctx.save();\n      \n      switch (orientation) {\n        case 2:\n          canvas.width = width;\n          canvas.height = height;\n          // horizontal flip\n          ctx.translate(width, 0);\n          ctx.scale(-1, 1);\n          break;\n        case 3:\n          canvas.width = width;\n          canvas.height = height;\n          //180 graus\n          ctx.translate(width / 2, height / 2);\n          ctx.rotate((180 * Math.PI) / 180);\n          ctx.translate(-width / 2, -height / 2);\n          break;\n        case 4:\n          canvas.width = width;\n          canvas.height = height;\n          // vertical flip\n          ctx.translate(0, height);\n          ctx.scale(1, -1);\n          break;\n        case 5:\n          // vertical flip + 90 rotate right\n          canvas.height = width;\n          canvas.width = height;\n          ctx.rotate(0.5 * Math.PI);\n          ctx.scale(1, -1);\n          break;\n        case 6:\n          canvas.width = height;\n          canvas.height = width;\n          //90 graus\n          ctx.translate(height / 2, width / 2);\n          ctx.rotate((90 * Math.PI) / 180);\n          ctx.translate(-width / 2, -height / 2);\n          break;\n        case 7:\n          // horizontal flip + 90 rotate right\n          canvas.height = width;\n          canvas.width = height;\n          ctx.rotate(0.5 * Math.PI);\n          ctx.translate(width, -height);\n          ctx.scale(-1, 1);\n          break;\n        case 8:\n          canvas.height = width;\n          canvas.width = height;\n          //-90 graus\n          ctx.translate(height / 2, width / 2);\n          ctx.rotate((-90 * Math.PI) / 180);\n          ctx.translate(-width / 2, -height / 2);\n          break;\n        default:\n          canvas.width = width;\n          canvas.height = height;\n      }\n\n      ctx.drawImage(img, 0, 0, width, height);\n      ctx.restore();\n      canvas.toBlob(\n        blob => {\n          let data = URL.createObjectURL(blob);\n          URL.revokeObjectURL(this.imgs)\n          this.imgs = data;\n        },\n        "image/" + this.outputType,\n        1\n      );\n    },\n\n    // checkout img\n    checkedImg() {\n      if (this.img === null || this.img === \'\') {\n        this.imgs = \'\'\n        this.clearCrop()\n        return\n      }\n      this.loading = true;\n      this.scale = 1;\n      this.rotate = 0;\n      this.clearCrop();\n      let img = new Image();\n      img.onload = () => {\n        if (this.img === "") {\n          this.$emit("imgLoad", "error");\n          this.$emit("img-load", "error");\n          this.$emit("img-load", new Error(\'图片不能为空\'));\n          return false;\n        }\n\n        let width = img.width;\n        let height = img.height;\n        exifmin.getData(img).then(data => {\n          this.orientation = data.orientation || 1;\n          let max = Number(this.maxImgSize);\n          if (!this.orientation && (width < max) & (height < max)) {\n            this.imgs = this.img;\n            return;\n          }\n\n          if (width > max) {\n            height = (height / width) * max;\n            width = max;\n          }\n\n          if (height > max) {\n            width = (width / height) * max;\n            height = max;\n          }\n          this.checkOrientationImage(img, this.orientation, width, height);\n        }).catch(error => {\n          this.$emit("img-load", "error");\n          this.$emit("img-load-error", error);\n        });\n      };\n\n      img.onerror = () => {\n        this.$emit("imgLoad", "error");\n        this.$emit("img-load", "error");\n        this.$emit("img-load-error", error);\n      };\n\n      // 判断如果不是base64图片 再添加crossOrigin属性，否则会导致iOS低版本(10.2)无法显示图片\n      if (this.img.substr(0, 4) !== "data") {\n        img.crossOrigin = "";\n      }\n\n      if (this.isIE) {\n        var xhr = new XMLHttpRequest();\n        xhr.onload = function() {\n          var url = URL.createObjectURL(this.response);\n          img.src = url;\n        };\n        xhr.open("GET", this.img, true);\n        xhr.responseType = "blob";\n        xhr.send();\n      } else {\n        img.src = this.img;\n      }\n    },\n    // 当按下鼠标键\n    startMove(e) {\n      e.preventDefault();\n      // 如果move 为true 表示当前可以拖动\n      if (this.move && !this.crop) {\n        if (!this.canMove) {\n          return false;\n        }\n        // 开始移动\n        this.moveX = (\'clientX\' in e ? e.clientX : e.touches[0].clientX) - this.x;\n        this.moveY = (\'clientY\' in e ? e.clientY : e.touches[0].clientY) - this.y;\n        if (e.touches) {\n          window.addEventListener("touchmove", this.moveImg);\n          window.addEventListener("touchend", this.leaveImg);\n          if (e.touches.length == 2) {\n            // 记录手指刚刚放上去\n            this.touches = e.touches;\n            window.addEventListener("touchmove", this.touchScale);\n            window.addEventListener("touchend", this.cancelTouchScale);\n          }\n        } else {\n          window.addEventListener("mousemove", this.moveImg);\n          window.addEventListener("mouseup", this.leaveImg);\n        }\n        // 触发图片移动事件\n        this.$emit("imgMoving", {\n          moving: true,\n          axis: this.getImgAxis()\n        });\n        this.$emit("img-moving", {\n          moving: true,\n          axis: this.getImgAxis()\n        });\n      } else {\n        // 截图ing\n        this.cropping = true;\n        // 绑定截图事件\n        window.addEventListener("mousemove", this.createCrop);\n        window.addEventListener("mouseup", this.endCrop);\n        window.addEventListener("touchmove", this.createCrop);\n        window.addEventListener("touchend", this.endCrop);\n        this.cropOffsertX = e.offsetX\n          ? e.offsetX\n          : e.touches[0].pageX - this.$refs.cropper.offsetLeft;\n        this.cropOffsertY = e.offsetY\n          ? e.offsetY\n          : e.touches[0].pageY - this.$refs.cropper.offsetTop;\n        this.cropX = \'clientX\' in e ? e.clientX : e.touches[0].clientX;\n        this.cropY = \'clientY\' in e ? e.clientY : e.touches[0].clientY;\n        this.cropChangeX = this.cropOffsertX;\n        this.cropChangeY = this.cropOffsertY;\n        this.cropW = 0;\n        this.cropH = 0;\n      }\n    },\n\n    // 移动端缩放\n    touchScale(e) {\n      e.preventDefault();\n      let scale = this.scale;\n      // 记录变化量\n      // 第一根手指\n      var oldTouch1 = {\n        x: this.touches[0].clientX,\n        y: this.touches[0].clientY\n      };\n      var newTouch1 = {\n        x: e.touches[0].clientX,\n        y: e.touches[0].clientY\n      };\n      // 第二根手指\n      var oldTouch2 = {\n        x: this.touches[1].clientX,\n        y: this.touches[1].clientY\n      };\n      var newTouch2 = {\n        x: e.touches[1].clientX,\n        y: e.touches[1].clientY\n      };\n      var oldL = Math.sqrt(\n        Math.pow(oldTouch1.x - oldTouch2.x, 2) +\n          Math.pow(oldTouch1.y - oldTouch2.y, 2)\n      );\n      var newL = Math.sqrt(\n        Math.pow(newTouch1.x - newTouch2.x, 2) +\n          Math.pow(newTouch1.y - newTouch2.y, 2)\n      );\n      var cha = newL - oldL;\n      // 根据图片本身大小 决定每次改变大小的系数, 图片越大系数越小\n      // 1px - 0.2\n      var coe = 1;\n      coe =\n        coe / this.trueWidth > coe / this.trueHeight\n          ? coe / this.trueHeight\n          : coe / this.trueWidth;\n      coe = coe > 0.1 ? 0.1 : coe;\n      var num = coe * cha;\n      if (!this.touchNow) {\n        this.touchNow = true;\n        if (cha > 0) {\n          scale += Math.abs(num);\n        } else if (cha < 0) {\n          scale > Math.abs(num) ? (scale -= Math.abs(num)) : scale;\n        }\n        this.touches = e.touches;\n        setTimeout(() => {\n          this.touchNow = false;\n        }, 8);\n        if (!this.checkoutImgAxis(this.x, this.y, scale)) {\n          return false;\n        }\n        this.scale = scale;\n      }\n    },\n\n    cancelTouchScale(e) {\n      window.removeEventListener("touchmove", this.touchScale);\n    },\n\n    // 移动图片\n    moveImg(e) {\n      e.preventDefault();\n      if (e.touches && e.touches.length === 2) {\n        this.touches = e.touches;\n        window.addEventListener("touchmove", this.touchScale);\n        window.addEventListener("touchend", this.cancelTouchScale);\n        window.removeEventListener("touchmove", this.moveImg);\n        return false;\n      }\n      let nowX = \'clientX\' in e ? e.clientX : e.touches[0].clientX;\n      let nowY = \'clientY\' in e ? e.clientY : e.touches[0].clientY;\n\n      let changeX, changeY;\n      changeX = nowX - this.moveX;\n      changeY = nowY - this.moveY;\n\n      this.$nextTick(() => {\n        if (this.centerBox) {\n          let axis = this.getImgAxis(changeX, changeY, this.scale);\n          let cropAxis = this.getCropAxis();\n          let imgW = this.trueHeight * this.scale;\n          let imgH = this.trueWidth * this.scale;\n          let maxLeft, maxTop, maxRight, maxBottom;\n          switch (this.rotate) {\n            case 1:\n            case -1:\n            case 3:\n            case -3:\n              maxLeft =\n                this.cropOffsertX -\n                (this.trueWidth * (1 - this.scale)) / 2 +\n                (imgW - imgH) / 2;\n              maxTop =\n                this.cropOffsertY -\n                (this.trueHeight * (1 - this.scale)) / 2 +\n                (imgH - imgW) / 2;\n              maxRight = maxLeft - imgW + this.cropW;\n              maxBottom = maxTop - imgH + this.cropH;\n              break;\n            default:\n              maxLeft =\n                this.cropOffsertX - (this.trueWidth * (1 - this.scale)) / 2;\n              maxTop =\n                this.cropOffsertY - (this.trueHeight * (1 - this.scale)) / 2;\n              maxRight = maxLeft - imgH + this.cropW;\n              maxBottom = maxTop - imgW + this.cropH;\n              break;\n          }\n\n          // 图片左边 图片不能超过截图框\n          if (axis.x1 >= cropAxis.x1) {\n            changeX = maxLeft;\n          }\n\n          // 图片上边 图片不能超过截图框\n          if (axis.y1 >= cropAxis.y1) {\n            changeY = maxTop;\n          }\n\n          // 图片右边\n          if (axis.x2 <= cropAxis.x2) {\n            changeX = maxRight;\n          }\n\n          // 图片下边\n          if (axis.y2 <= cropAxis.y2) {\n            changeY = maxBottom;\n          }\n        }\n        this.x = changeX;\n        this.y = changeY;\n        // 触发图片移动事件\n        this.$emit("imgMoving", {\n          moving: true,\n          axis: this.getImgAxis()\n        });\n        this.$emit("img-moving", {\n          moving: true,\n          axis: this.getImgAxis()\n        });\n      });\n    },\n    // 移动图片结束\n    leaveImg(e) {\n      window.removeEventListener("mousemove", this.moveImg);\n      window.removeEventListener("touchmove", this.moveImg);\n      window.removeEventListener("mouseup", this.leaveImg);\n      window.removeEventListener("touchend", this.leaveImg);\n      // 触发图片移动事件\n      this.$emit("imgMoving", {\n        moving: false,\n        axis: this.getImgAxis()\n      });\n      this.$emit("img-moving", {\n        moving: false,\n        axis: this.getImgAxis()\n      });\n    },\n    // 缩放图片\n    scaleImg() {\n      if (this.canScale) {\n        window.addEventListener(this.support, this.changeSize, this.passive);\n      }\n    },\n    // 移出框\n    cancelScale() {\n      if (this.canScale) {\n        window.removeEventListener(this.support, this.changeSize);\n      }\n    },\n    // 改变大小函数\n    changeSize(e) {\n      e.preventDefault();\n      let scale = this.scale;\n      var change = e.deltaY || e.wheelDelta;\n      // 根据图片本身大小 决定每次改变大小的系数, 图片越大系数越小\n      var isFirefox = navigator.userAgent.indexOf("Firefox");\n      change = isFirefox > 0 ? change * 30 : change;\n      // 修复ie的滚动缩放\n      if (this.isIE) {\n        change = -change;\n      }\n      // 1px - 0.2\n      var coe = this.coe;\n      coe =\n        coe / this.trueWidth > coe / this.trueHeight\n          ? coe / this.trueHeight\n          : coe / this.trueWidth;\n      var num = coe * change;\n      num < 0\n        ? (scale += Math.abs(num))\n        : scale > Math.abs(num)\n        ? (scale -= Math.abs(num))\n        : scale;\n      // 延迟0.1s 每次放大大或者缩小的范围\n      let status = num < 0 ? "add" : "reduce";\n      if (status !== this.coeStatus) {\n        this.coeStatus = status;\n        this.coe = 0.2;\n      }\n      if (!this.scaling) {\n        this.scalingSet = setTimeout(() => {\n          this.scaling = false;\n          this.coe = this.coe += 0.01;\n        }, 50);\n      }\n      this.scaling = true;\n      if (!this.checkoutImgAxis(this.x, this.y, scale)) {\n        return false;\n      }\n      this.scale = scale;\n    },\n\n    // 修改图片大小函数\n    changeScale(num) {\n      let scale = this.scale;\n      num = num || 1;\n      var coe = 20;\n      coe =\n        coe / this.trueWidth > coe / this.trueHeight\n          ? coe / this.trueHeight\n          : coe / this.trueWidth;\n      num = num * coe;\n      num > 0\n        ? (scale += Math.abs(num))\n        : scale > Math.abs(num)\n        ? (scale -= Math.abs(num))\n        : scale;\n      if (!this.checkoutImgAxis(this.x, this.y, scale)) {\n        return false;\n      }\n      this.scale = scale;\n    },\n    // 创建截图框\n    createCrop(e) {\n      e.preventDefault();\n      // 移动生成大小\n      var nowX = \'clientX\' in e ? e.clientX : e.touches ? e.touches[0].clientX : 0;\n      var nowY = \'clientY\' in e ? e.clientY : e.touches ? e.touches[0].clientY : 0;\n      this.$nextTick(() => {\n        var fw = nowX - this.cropX;\n        var fh = nowY - this.cropY;\n        if (fw > 0) {\n          this.cropW =\n            fw + this.cropChangeX > this.w ? this.w - this.cropChangeX : fw;\n          this.cropOffsertX = this.cropChangeX;\n        } else {\n          this.cropW =\n            this.w - this.cropChangeX + Math.abs(fw) > this.w\n              ? this.cropChangeX\n              : Math.abs(fw);\n          this.cropOffsertX =\n            this.cropChangeX + fw > 0 ? this.cropChangeX + fw : 0;\n        }\n\n        if (!this.fixed) {\n          if (fh > 0) {\n            this.cropH =\n              fh + this.cropChangeY > this.h ? this.h - this.cropChangeY : fh;\n            this.cropOffsertY = this.cropChangeY;\n          } else {\n            this.cropH =\n              this.h - this.cropChangeY + Math.abs(fh) > this.h\n                ? this.cropChangeY\n                : Math.abs(fh);\n            this.cropOffsertY =\n              this.cropChangeY + fh > 0 ? this.cropChangeY + fh : 0;\n          }\n        } else {\n          var fixedHeight =\n            (this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];\n          if (fixedHeight + this.cropOffsertY > this.h) {\n            this.cropH = this.h - this.cropOffsertY;\n            this.cropW =\n              (this.cropH / this.fixedNumber[1]) * this.fixedNumber[0];\n            if (fw > 0) {\n              this.cropOffsertX = this.cropChangeX;\n            } else {\n              this.cropOffsertX = this.cropChangeX - this.cropW;\n            }\n          } else {\n            this.cropH = fixedHeight;\n          }\n          this.cropOffsertY = this.cropOffsertY;\n        }\n      });\n    },\n\n    // 改变截图框大小\n    changeCropSize(e, w, h, typeW, typeH) {\n      e.preventDefault();\n      window.addEventListener("mousemove", this.changeCropNow);\n      window.addEventListener("mouseup", this.changeCropEnd);\n      window.addEventListener("touchmove", this.changeCropNow);\n      window.addEventListener("touchend", this.changeCropEnd);\n      this.canChangeX = w;\n      this.canChangeY = h;\n      this.changeCropTypeX = typeW;\n      this.changeCropTypeY = typeH;\n      this.cropX = \'clientX\' in e ? e.clientX : e.touches[0].clientX;\n      this.cropY = \'clientY\' in e ? e.clientY : e.touches[0].clientY;\n      this.cropOldW = this.cropW;\n      this.cropOldH = this.cropH;\n      this.cropChangeX = this.cropOffsertX;\n      this.cropChangeY = this.cropOffsertY;\n      if (this.fixed) {\n        if (this.canChangeX && this.canChangeY) {\n          this.canChangeY = 0;\n        }\n      }\n      this.$emit(\'changeCropSize\', {\n        width: this.cropW,\n        height: this.cropH\n      })\n      this.$emit(\'change-crop-size\', {\n        width: this.cropW,\n        height: this.cropH\n      })\n    },\n\n    // 正在改变\n    changeCropNow(e) {\n      e.preventDefault();\n      var nowX = \'clientX\' in e ? e.clientX : e.touches ? e.touches[0].clientX : 0;\n      var nowY = \'clientY\' in e ? e.clientY : e.touches ? e.touches[0].clientY : 0;\n      // 容器的宽高\n      let wrapperW = this.w;\n      let wrapperH = this.h;\n\n      // 不能超过的坐标轴\n      let minX = 0;\n      let minY = 0;\n\n      if (this.centerBox) {\n        let axis = this.getImgAxis();\n        let imgW = axis.x2;\n        let imgH = axis.y2;\n        minX = axis.x1 > 0 ? axis.x1 : 0;\n        minY = axis.y1 > 0 ? axis.y1 : 0;\n        if (wrapperW > imgW) {\n          wrapperW = imgW;\n        }\n\n        if (wrapperH > imgH) {\n          wrapperH = imgH;\n        }\n      }\n      const [minCropW,minCropH] = this.checkCropLimitSize()\n      this.$nextTick(() => {\n        var fw = nowX - this.cropX;\n        var fh = nowY - this.cropY;\n        if (this.canChangeX) {\n          if (this.changeCropTypeX === 1) {\n            if (this.cropOldW - fw < minCropW) {\n              this.cropW = minCropW\n              this.cropOffsertX = this.cropOldW + this.cropChangeX - minX - minCropW\n            } else if (this.cropOldW - fw > 0) {\n              this.cropW =\n                wrapperW - this.cropChangeX - fw <= wrapperW - minX\n                  ? this.cropOldW - fw\n                  : this.cropOldW + this.cropChangeX - minX;\n              this.cropOffsertX =\n                wrapperW - this.cropChangeX - fw <= wrapperW - minX\n                  ? this.cropChangeX + fw\n                  : minX;\n            } else {\n              this.cropW =\n                Math.abs(fw) + this.cropChangeX <= wrapperW\n                  ? Math.abs(fw) - this.cropOldW\n                  : wrapperW - this.cropOldW - this.cropChangeX;\n              this.cropOffsertX = this.cropChangeX + this.cropOldW;\n            }\n          } else if (this.changeCropTypeX === 2) {\n            if (this.cropOldW + fw < minCropW) {\n              this.cropW = minCropW\n            } else if (this.cropOldW + fw > 0) {\n              this.cropW =\n                this.cropOldW + fw + this.cropOffsertX <= wrapperW\n                  ? this.cropOldW + fw\n                  : wrapperW - this.cropOffsertX;\n              this.cropOffsertX = this.cropChangeX;\n            } else {\n              // 右侧坐标抽 超过左侧\n              this.cropW =\n                wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <=\n                wrapperW - minX\n                  ? Math.abs(fw + this.cropOldW)\n                  : this.cropChangeX - minX;\n              this.cropOffsertX =\n                wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <=\n                wrapperW - minX\n                  ? this.cropChangeX - Math.abs(fw + this.cropOldW)\n                  : minX;\n            }\n          }\n        }\n\n        if (this.canChangeY) {\n          if (this.changeCropTypeY === 1) {\n            if (this.cropOldH - fh < minCropH) {\n              this.cropH = minCropH\n              this.cropOffsertY = this.cropOldH + this.cropChangeY - minY - minCropH\n            } else if (this.cropOldH - fh > 0) {\n              this.cropH =\n                wrapperH - this.cropChangeY - fh <= wrapperH - minY\n                  ? this.cropOldH - fh\n                  : this.cropOldH + this.cropChangeY - minY;\n              this.cropOffsertY =\n                wrapperH - this.cropChangeY - fh <= wrapperH - minY\n                  ? this.cropChangeY + fh\n                  : minY;\n            } else {\n              this.cropH =\n                Math.abs(fh) + this.cropChangeY <= wrapperH\n                  ? Math.abs(fh) - this.cropOldH\n                  : wrapperH - this.cropOldH - this.cropChangeY;\n              this.cropOffsertY = this.cropChangeY + this.cropOldH;\n            }\n          } else if (this.changeCropTypeY === 2) {\n            if (this.cropOldH + fh < minCropH) {\n              this.cropH = minCropH\n            } else if (this.cropOldH + fh > 0) {\n              this.cropH =\n                this.cropOldH + fh + this.cropOffsertY <= wrapperH\n                  ? this.cropOldH + fh\n                  : wrapperH - this.cropOffsertY;\n              this.cropOffsertY = this.cropChangeY;\n            } else {\n              this.cropH =\n                wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <=\n                wrapperH - minY\n                  ? Math.abs(fh + this.cropOldH)\n                  : this.cropChangeY - minY;\n              this.cropOffsertY =\n                wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <=\n                wrapperH - minY\n                  ? this.cropChangeY - Math.abs(fh + this.cropOldH)\n                  : minY;\n            }\n          }\n        }\n\n        if (this.canChangeX && this.fixed) {\n          var fixedHeight =\n            (this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];\n          if (fixedHeight < minCropH) {\n            this.cropH = minCropH\n            this.cropW = this.fixedNumber[0] * minCropH / this.fixedNumber[1]\n            // 这里需要去修改 offsetX的值，去调整因为高度变化而导致的宽度变化\n            if (this.changeCropTypeX === 1) {\n              this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW)\n            }\n          } else if (fixedHeight + this.