vue-croppa - npm Package Compare versions

Comparing version 1.1.5 to 1.2.0

.eslintrc.js

 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: 'vue-eslint-parser',
   env: {
@@ -8,18 +8,16 @@ browser: true,
   },
-  extends: 'standard',
+  extends: 'plugin:vue/recommended',
   // required to lint *.vue files
-  plugins: [
-    'html'
-  ],
+  plugins: ['html'],
   // add your custom rules here
   rules: {
-    "space-before-function-paren": 0,
-    "eol-last": 0,
-    "eqeqeq": 0,
-    "camelcase": 0,
-    "no-useless-call": 0
+    'space-before-function-paren': 0,
+    'eol-last': 0,
+    eqeqeq: 0,
+    camelcase: 0,
+    'no-useless-call': 0
   },
   globals: {
-    "DocumentTouch": true
+    DocumentTouch: true
   }
 }

dist/vue-croppa.js

 /*
- * vue-croppa v1.1.5
+ * vue-croppa v1.2.0
  * https://github.com/zhanziyang/vue-croppa
  * 
- * Copyright (c) 2017 zhanziyang
+ * Copyright (c) 2018 zhanziyang
  * Released under the ISC license
@@ -25,3 +25,3 @@ */
 
-var canvasExifOrientation = createCommonjsModule(function (module, exports) {
+var index = createCommonjsModule(function (module, exports) {
 (function (root, factory) {
@@ -263,3 +263,3 @@ if (typeof undefined === 'function' && undefined.amd) {
   getRotatedImage: function getRotatedImage(img, orientation) {
-    var _canvas = canvasExifOrientation.drawImage(img, orientation);
+    var _canvas = index.drawImage(img, orientation);
     var _img = new Image();
@@ -421,3 +421,8 @@ _img.src = _canvas.toDataURL();
   },
-  replaceDrop: Boolean
+  replaceDrop: Boolean,
+  passive: Boolean,
+  imageBorderRadius: {
+    type: [Number, String],
+    default: 0
+  }
 };
@@ -453,6 +458,8 @@
 var PINCH_ACCELERATION = 1; // The amount of times by which the pinching is more sensitive than the scolling
+
+var syncData = ['imgData', 'img', 'imgSet', 'originalImage', 'naturalHeight', 'naturalWidth', 'orientation', 'scaleRatio'];
 // const DEBUG = false
 
 var component = { render: function render() {
-    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { ref: "wrapper", class: 'croppa-container ' + (_vm.img ? 'croppa--has-target' : '') + ' ' + (_vm.disabled ? 'croppa--disabled' : '') + ' ' + (_vm.disableClickToChoose ? 'croppa--disabled-cc' : '') + ' ' + (_vm.disableDragToMove && _vm.disableScrollToZoom ? 'croppa--disabled-mz' : '') + ' ' + (_vm.fileDraggedOver ? 'croppa--dropzone' : ''), on: { "dragenter": function dragenter($event) {
+    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { ref: "wrapper", class: 'croppa-container ' + (_vm.img ? 'croppa--has-target' : '') + ' ' + (_vm.passive ? 'croppa--passive' : '') + ' ' + (_vm.disabled ? 'croppa--disabled' : '') + ' ' + (_vm.disableClickToChoose ? 'croppa--disabled-cc' : '') + ' ' + (_vm.disableDragToMove && _vm.disableScrollToZoom ? 'croppa--disabled-mz' : '') + ' ' + (_vm.fileDraggedOver ? 'croppa--dropzone' : ''), on: { "dragenter": function dragenter($event) {
           $event.stopPropagation();$event.preventDefault();_vm._handleDragEnter($event);
@@ -465,3 +472,3 @@ }, "dragleave": function dragleave($event) {
           $event.stopPropagation();$event.preventDefault();_vm._handleDrop($event);
-        } } }, [_c('input', _vm._b({ ref: "fileInput", staticStyle: { "height": "1px", "width": "1px", "overflow": "hidden", "margin-left": "-99999px", "position": "absolute" }, attrs: { "type": "file", "accept": _vm.accept, "disabled": _vm.disabled }, on: { "change": _vm._handleInputChange } }, 'input', _vm.inputAttrs, false)), _vm._v(" "), _c('div', { staticClass: "slots", staticStyle: { "width": "0", "height": "0", "visibility": "hidden" } }, [_vm._t("initial"), _vm._v(" "), _vm._t("placeholder")], 2), _vm._v(" "), _c('canvas', { ref: "canvas", on: { "click": function click($event) {
+        } } }, [_c('input', _vm._b({ ref: "fileInput", staticStyle: { "height": "1px", "width": "1px", "overflow": "hidden", "margin-left": "-99999px", "position": "absolute" }, attrs: { "type": "file", "accept": _vm.accept, "disabled": _vm.disabled }, on: { "change": _vm._handleInputChange } }, 'input', _vm.inputAttrs)), _c('div', { staticClass: "slots", staticStyle: { "width": "0", "height": "0", "visibility": "hidden" } }, [_vm._t("initial"), _vm._t("placeholder")], 2), _c('canvas', { ref: "canvas", on: { "click": function click($event) {
           $event.stopPropagation();$event.preventDefault();_vm._handleClick($event);
@@ -498,5 +505,5 @@ }, "touchstart": function touchstart($event) {
           $event.stopPropagation();_vm._handleWheel($event);
-        } } }), _vm._v(" "), _vm.showRemoveButton && _vm.img ? _c('svg', { staticClass: "icon icon-remove", style: 'top: -' + _vm.height / 40 + 'px; right: -' + _vm.width / 40 + 'px', attrs: { "viewBox": "0 0 1024 1024", "version": "1.1", "xmlns": "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink", "width": _vm.removeButtonSize || _vm.width / 10, "height": _vm.removeButtonSize || _vm.width / 10 }, on: { "click": _vm.remove } }, [_c('path', { attrs: { "d": "M511.921231 0C229.179077 0 0 229.257846 0 512 0 794.702769 229.179077 1024 511.921231 1024 794.781538 1024 1024 794.702769 1024 512 1024 229.257846 794.781538 0 511.921231 0ZM732.041846 650.633846 650.515692 732.081231C650.515692 732.081231 521.491692 593.683692 511.881846 593.683692 502.429538 593.683692 373.366154 732.081231 373.366154 732.081231L291.761231 650.633846C291.761231 650.633846 430.316308 523.500308 430.316308 512.196923 430.316308 500.696615 291.761231 373.523692 291.761231 373.523692L373.366154 291.918769C373.366154 291.918769 503.453538 430.395077 511.881846 430.395077 520.349538 430.395077 650.515692 291.918769 650.515692 291.918769L732.041846 373.523692C732.041846 373.523692 593.447385 502.547692 593.447385 512.196923 593.447385 521.412923 732.041846 650.633846 732.041846 650.633846Z", "fill": _vm.removeButtonColor } })]) : _vm._e(), _vm._v(" "), _vm.showLoading && _vm.loading ? _c('div', { staticClass: "sk-fading-circle", style: _vm.loadingStyle }, _vm._l(12, function (i) {
+        } } }), _vm.showRemoveButton && _vm.img && !_vm.passive ? _c('svg', { staticClass: "icon icon-remove", style: 'top: -' + _vm.height / 40 + 'px; right: -' + _vm.width / 40 + 'px', attrs: { "viewBox": "0 0 1024 1024", "version": "1.1", "xmlns": "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink", "width": _vm.removeButtonSize || _vm.width / 10, "height": _vm.removeButtonSize || _vm.width / 10 }, on: { "click": _vm.remove } }, [_c('path', { attrs: { "d": "M511.921231 0C229.179077 0 0 229.257846 0 512 0 794.702769 229.179077 1024 511.921231 1024 794.781538 1024 1024 794.702769 1024 512 1024 229.257846 794.781538 0 511.921231 0ZM732.041846 650.633846 650.515692 732.081231C650.515692 732.081231 521.491692 593.683692 511.881846 593.683692 502.429538 593.683692 373.366154 732.081231 373.366154 732.081231L291.761231 650.633846C291.761231 650.633846 430.316308 523.500308 430.316308 512.196923 430.316308 500.696615 291.761231 373.523692 291.761231 373.523692L373.366154 291.918769C373.366154 291.918769 503.453538 430.395077 511.881846 430.395077 520.349538 430.395077 650.515692 291.918769 650.515692 291.918769L732.041846 373.523692C732.041846 373.523692 593.447385 502.547692 593.447385 512.196923 593.447385 521.412923 732.041846 650.633846 732.041846 650.633846Z", "fill": _vm.removeButtonColor } })]) : _vm._e(), _vm.showLoading && _vm.loading ? _c('div', { staticClass: "sk-fading-circle", style: _vm.loadingStyle }, _vm._l(12, function (i) {
       return _c('div', { key: i, class: 'sk-circle' + i + ' sk-circle' }, [_c('div', { staticClass: "sk-circle-indicator", style: { backgroundColor: _vm.loadingColor } })]);
-    })) : _vm._e(), _vm._v(" "), _vm._t("default")], 2);
+    })) : _vm._e(), _vm._t("default")], 2);
   }, staticRenderFns: [],
@@ -570,2 +577,4 @@ model: {
   mounted: function mounted() {
+    var _this = this;
+
     this._initialize();
@@ -579,2 +588,29 @@ u.rAFPolyfill();
     }
+
+    if (this.passive) {
+      this.$watch('value._data', function (data) {
+        var set$$1 = false;
+        if (!data) return;
+        for (var key in data) {
+          if (syncData.indexOf(key) >= 0) {
+            var val = data[key];
+            if (val !== _this[key]) {
+              _this.$set(_this, key, val);
+              set$$1 = true;
+            }
+          }
+        }
+        if (set$$1) {
+          if (!_this.img) {
+            _this.remove();
+          } else {
+            _this.$nextTick(function () {
+              _this._draw();
+            });
+          }
+        }
+      }, {
+        deep: true
+      });
+    }
   },
@@ -597,2 +633,7 @@
     },
+    imageBorderRadius: function imageBorderRadius() {
+      if (this.img) {
+        this._draw();
+      }
+    },
     placeholder: function placeholder() {
@@ -620,2 +661,3 @@ if (!this.img) {
     scaleRatio: function scaleRatio(val, oldVal) {
+      if (this.passive) return;
       if (!this.img) return;
@@ -635,2 +677,9 @@ if (!u.numberValid(val)) return;
 
+      if (!this.userMetadata && this.imageSet && !this.rotating) {
+        var offsetX = (x - 1) * (pos.x - this.imgData.startX);
+        var offsetY = (x - 1) * (pos.y - this.imgData.startY);
+        this.imgData.startX = this.imgData.startX - offsetX;
+        this.imgData.startY = this.imgData.startY - offsetY;
+      }
+
       if (this.preventWhiteSpace) {
@@ -640,11 +689,6 @@ this._preventZoomingToWhiteSpace();
       }
-
-      if (this.userMetadata || !this.imageSet || this.rotating) return;
-      var offsetX = (x - 1) * (pos.x - this.imgData.startX);
-      var offsetY = (x - 1) * (pos.y - this.imgData.startY);
-      this.imgData.startX = this.imgData.startX - offsetX;
-      this.imgData.startY = this.imgData.startY - offsetY;
     },
 
     'imgData.width': function imgDataWidth(val, oldVal) {
+      // if (this.passive) return
       if (!u.numberValid(val)) return;
@@ -660,6 +704,20 @@ this.scaleRatio = val / this.naturalWidth;
     'imgData.height': function imgDataHeight(val) {
+      // if (this.passive) return
       if (!u.numberValid(val)) return;
       this.scaleRatio = val / this.naturalHeight;
     },
+    'imgData.startX': function imgDataStartX(val) {
+      // if (this.passive) return
+      if (this.hasImage()) {
+        this.$nextTick(this._draw);
+      }
+    },
+    'imgData.startY': function imgDataStartY(val) {
+      // if (this.passive) return
+      if (this.hasImage()) {
+        this.$nextTick(this._draw);
+      }
+    },
     loading: function loading(val) {
+      if (this.passive) return;
       if (val) {
@@ -684,3 +742,3 @@ this.$emit(events.LOADING_START);
     move: function move(offset) {
-      if (!offset) return;
+      if (!offset || this.passive) return;
       var oldX = this.imgData.startX;
@@ -722,2 +780,3 @@ var oldY = this.imgData.startY;
 
+      if (this.passive) return;
       var realSpeed = this.zoomSpeed * acceleration;
@@ -743,3 +802,3 @@ var speed = this.outputWidth * PCT_PER_ZOOM * realSpeed;
 
-      if (this.disableRotation || this.disabled) return;
+      if (this.disableRotation || this.disabled || this.passive) return;
       step = parseInt(step);
@@ -753,7 +812,7 @@ if (isNaN(step) || step > 3 || step < -3) {
     flipX: function flipX() {
-      if (this.disableRotation || this.disabled) return;
+      if (this.disableRotation || this.disabled || this.passive) return;
       this._setOrientation(2);
     },
     flipY: function flipY() {
-      if (this.disableRotation || this.disabled) return;
+      if (this.disableRotation || this.disabled || this.passive) return;
       this._setOrientation(4);
@@ -768,3 +827,3 @@ },
     applyMetadata: function applyMetadata(metadata) {
-      if (!metadata) return;
+      if (!metadata || this.passive) return;
       this.userMetadata = metadata;
@@ -786,3 +845,3 @@ var ori = metadata.orientation || this.orientation || 1;
     promisedBlob: function promisedBlob() {
-      var _this = this;
+      var _this2 = this;
 
@@ -799,3 +858,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
         try {
-          _this.generateBlob.apply(_this, [function (blob) {
+          _this2.generateBlob.apply(_this2, [function (blob) {
             resolve(blob);
@@ -831,2 +890,3 @@ }].concat(args));
     chooseFile: function chooseFile() {
+      if (this.passive) return;
       this.$refs.fileInput.click();
@@ -857,2 +917,12 @@ },
     },
+    addClipPlugin: function addClipPlugin(plugin) {
+      if (!this.clipPlugins) {
+        this.clipPlugins = [];
+      }
+      if (typeof plugin === 'function' && this.clipPlugins.indexOf(plugin) < 0) {
+        this.clipPlugins.push(plugin);
+      } else {
+        throw Error('Clip plugins should be functions');
+      }
+    },
     _initialize: function _initialize() {
@@ -867,3 +937,5 @@ this.canvas = this.$refs.canvas;
       this._setInitial();
-      this.$emit(events.INIT_EVENT, this);
+      if (!this.passive) {
+        this.$emit(events.INIT_EVENT, this);
+      }
     },
@@ -901,3 +973,3 @@ _setSize: function _setSize() {
     _setImagePlaceholder: function _setImagePlaceholder() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -918,3 +990,3 @@ var img = void 0;
       var onLoad = function onLoad() {
-        _this2.ctx.drawImage(img, 0, 0, _this2.outputWidth, _this2.outputHeight);
+        _this3.ctx.drawImage(img, 0, 0, _this3.outputWidth, _this3.outputHeight);
       };
@@ -944,3 +1016,3 @@
     _setInitial: function _setInitial() {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -980,7 +1052,7 @@ var src = void 0,
           // this.$emit(events.INITIAL_IMAGE_LOADED_EVENT)
-          _this3._onload(img, +img.dataset['exifOrientation'], true);
+          _this4._onload(img, +img.dataset['exifOrientation'], true);
         };
 
         img.onerror = function () {
-          _this3._setPlaceholders();
+          _this4._setPlaceholders();
         };
@@ -1007,3 +1079,3 @@ }
     _handleClick: function _handleClick() {
-      if (!this.hasImage() && !this.disableClickToChoose && !this.disabled && !this.supportTouch) {
+      if (!this.hasImage() && !this.disableClickToChoose && !this.disabled && !this.supportTouch && !this.passive) {
         this.chooseFile();
@@ -1014,3 +1086,3 @@ }
       var input = this.$refs.fileInput;
-      if (!input.files.length) return;
+      if (!input.files.length || this.passive) return;
 
@@ -1021,3 +1093,3 @@ var file = input.files[0];
     _onNewFileIn: function _onNewFileIn(file) {
-      var _this4 = this;
+      var _this5 = this;
 
@@ -1050,4 +1122,4 @@ this.currentIsInitial = false;
           img.onload = function () {
-            _this4._onload(img, orientation);
-            _this4.$emit(events.NEW_IMAGE);
+            _this5._onload(img, orientation);
+            _this5.$emit(events.NEW_IMAGE);
           };
@@ -1188,2 +1260,3 @@ };
     _handlePointerStart: function _handlePointerStart(evt) {
+      if (this.passive) return;
       this.supportTouch = true;
@@ -1223,2 +1296,3 @@ this.pointerMoved = false;
     _handlePointerEnd: function _handlePointerEnd(evt) {
+      if (this.passive) return;
       var pointerMoveDistance = 0;
@@ -1247,2 +1321,3 @@ if (this.pointerStartCoord) {
     _handlePointerMove: function _handlePointerMove(evt) {
+      if (this.passive) return;
       this.pointerMoved = true;
@@ -1276,7 +1351,9 @@ if (!this.hasImage()) return;
     _handlePointerLeave: function _handlePointerLeave() {
+      if (this.passive) return;
       this.currentPointerCoord = null;
     },
     _handleWheel: function _handleWheel(evt) {
-      var _this5 = this;
+      var _this6 = this;
 
+      if (this.passive) return;
       if (this.disabled || this.disableScrollToZoom || !this.hasImage()) return;
@@ -1291,6 +1368,7 @@ evt.preventDefault();
       this.$nextTick(function () {
-        _this5.scrolling = false;
+        _this6.scrolling = false;
       });
     },
     _handleDragEnter: function _handleDragEnter(evt) {
+      if (this.passive) return;
       if (this.disabled || this.disableDragAndDrop || !u.eventHasFile(evt)) return;
@@ -1301,2 +1379,3 @@ if (this.hasImage() && !this.replaceDrop) return;
     _handleDragLeave: function _handleDragLeave(evt) {
+      if (this.passive) return;
       if (!this.fileDraggedOver || !u.eventHasFile(evt)) return;
@@ -1307,2 +1386,3 @@ this.fileDraggedOver = false;
     _handleDrop: function _handleDrop(evt) {
+      if (this.passive) return;
       if (!this.fileDraggedOver || !u.eventHasFile(evt)) return;
@@ -1357,3 +1437,3 @@ if (this.hasImage() && this.replaceDrop) {
     _setOrientation: function _setOrientation() {
-      var _this6 = this;
+      var _this7 = this;
 
@@ -1369,4 +1449,4 @@ var orientation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;
         _img.onload = function () {
-          _this6.img = _img;
-          _this6._placeImage(applyMetadata);
+          _this7.img = _img;
+          _this7._placeImage(applyMetadata);
         };
@@ -1407,10 +1487,10 @@ } else {
     _draw: function _draw() {
-      var _this7 = this;
+      var _this8 = this;
 
       this.$nextTick(function () {
-        if (!_this7.img) return;
+        if (!_this8.img) return;
         if (typeof window !== 'undefined' && window.requestAnimationFrame) {
-          requestAnimationFrame(_this7._drawFrame);
+          requestAnimationFrame(_this8._drawFrame);
         } else {
-          _this7._drawFrame();
+          _this8._drawFrame();
         }
@@ -1431,2 +1511,9 @@ });
       ctx.drawImage(this.img, startX, startY, width, height);
+
+      if (this.preventWhiteSpace) {
+        this._clip(this._createContainerClipPath
+        // this._clip(this._createImageClipPath)
+        );
+      }
+
       this.$emit(events.DRAW, ctx);
@@ -1439,4 +1526,56 @@ if (!this.imageSet) {
     },
+    _clipPathFactory: function _clipPathFactory(x, y, width, height) {
+      var ctx = this.ctx;
+      var radius = typeof this.imageBorderRadius === 'number' ? this.imageBorderRadius : !isNaN(Number(this.imageBorderRadius)) ? Number(this.imageBorderRadius) : 0;
+      ctx.beginPath();
+      ctx.moveTo(x + radius, y);
+      ctx.lineTo(x + width - radius, y);
+      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+      ctx.lineTo(x + width, y + height - radius);
+      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+      ctx.lineTo(x + radius, y + height);
+      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+      ctx.lineTo(x, y + radius);
+      ctx.quadraticCurveTo(x, y, x + radius, y);
+      ctx.closePath();
+    },
+    _createContainerClipPath: function _createContainerClipPath() {
+      var _this9 = this;
+
+      this._clipPathFactory(0, 0, this.outputWidth, this.outputHeight);
+      if (this.clipPlugins && this.clipPlugins.length) {
+        this.clipPlugins.forEach(function (func) {
+          func(_this9.ctx, 0, 0, _this9.outputWidth, _this9.outputHeight);
+        });
+      }
+    },
+
+
+    // _createImageClipPath () {
+    //   let { startX, startY, width, height } = this.imgData
+    //   let w = width
+    //   let h = height
+    //   let x = startX
+    //   let y = startY
+    //   if (w < h) {
+    //     h = this.outputHeight * (width / this.outputWidth)
+    //   }
+    //   if (h < w) {
+    //     w = this.outputWidth * (height / this.outputHeight)
+    //     x = startX + (width - this.outputWidth) / 2
+    //   }
+    //   this._clipPathFactory(x, startY, w, h)
+    // },
+
+    _clip: function _clip(createPath) {
+      var ctx = this.ctx;
+      ctx.save();
+      ctx.fillStyle = '#fff';
+      ctx.globalCompositeOperation = 'destination-in';
+      createPath();
+      ctx.fill();
+      ctx.restore();
+    },
     _applyMetadata: function _applyMetadata() {
-      var _this8 = this;
+      var _this10 = this;
 
@@ -1463,3 +1602,3 @@ if (!this.userMetadata) return;
       this.$nextTick(function () {
-        _this8.userMetadata = null;
+        _this10.userMetadata = null;
       });
@@ -1544,3 +1683,3 @@ },
 
-var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+var index$1 = shouldUseNative() ? Object.assign : function (target, source) {
 	var from;
@@ -1578,3 +1717,3 @@ var to = toObject(target);
   install: function install(Vue, options) {
-    options = objectAssign({}, defaultOptions, options);
+    options = index$1({}, defaultOptions, options);
     var version = Number(Vue.version.split('.')[0]);
@@ -1581,0 +1720,0 @@ if (version < 2) {

dist/vue-croppa.min.js

 /*
- * vue-croppa v1.1.5
+ * vue-croppa v1.2.0
  * https://github.com/zhanziyang/vue-croppa
  * 
- * Copyright (c) 2017 zhanziyang
+ * Copyright (c) 2018 zhanziyang
  * Released under the ISC license
  */
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.Croppa=i()}(this,function(){"use strict";"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var t=function(t,i){return i={exports:{}},t(i,i.exports),i.exports}(function(t,i){!function(i,e){t.exports=e()}(0,function(){return{drawImage:function(t,i,e,a,n,o){if(!/^[1-8]$/.test(i))throw new Error("orientation should be [1-8]");null==e&&(e=0),null==a&&(a=0),null==n&&(n=t.width),null==o&&(o=t.height);var s=document.createElement("canvas"),r=s.getContext("2d");switch(s.width=n,s.height=o,r.save(),+i){case 1:break;case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(1*Math.PI);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:s.width=o,s.height=n,r.rotate(.5*Math.PI),r.scale(1,-1);break;case 6:s.width=o,s.height=n,r.rotate(.5*Math.PI),r.translate(0,-o);break;case 7:s.width=o,s.height=n,r.rotate(1.5*Math.PI),r.translate(-n,o),r.scale(1,-1);break;case 8:s.width=o,s.height=n,r.translate(0,n),r.rotate(1.5*Math.PI)}return r.drawImage(t,e,a,n,o),r.restore(),s}}})}),i={onePointCoord:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.clientX,s=t.clientY;return{x:(o-n.left)*a,y:(s-n.top)*a}},getPointerCoords:function(t,i){var e=void 0;return e=t.touches&&t.touches[0]?t.touches[0]:t.changedTouches&&t.changedTouches[0]?t.changedTouches[0]:t,this.onePointCoord(e,i)},getPinchDistance:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return Math.sqrt(Math.pow(n.x-o.x,2)+Math.pow(n.y-o.y,2))},getPinchCenterCoord:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return{x:(n.x+o.x)/2,y:(n.y+o.y)/2}},imageLoaded:function(t){return t.complete&&0!==t.naturalWidth},rAFPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window){for(var t=0,i=["webkit","moz"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),a=Math.max(0,16.7-(e-t)),n=window.setTimeout(function(){i(e+a)},a);return t=e+a,n}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)}),Array.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)}}},toBlobPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window&&HTMLCanvasElement){var t,i,e;HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(a,n,o){t=atob(this.toDataURL(n,o).split(",")[1]),i=t.length,e=new Uint8Array(i);for(var s=0;s<i;s++)e[s]=t.charCodeAt(s);a(new Blob([e],{type:n||"image/png"}))}})}},eventHasFile:function(t){var i=t.dataTransfer||t.originalEvent.dataTransfer;if(i.types)for(var e=0,a=i.types.length;e<a;e++)if("Files"==i.types[e])return!0;return!1},getFileOrientation:function(t){var i=new DataView(t);if(65496!=i.getUint16(0,!1))return-2;for(var e=i.byteLength,a=2;a<e;){var n=i.getUint16(a,!1);if(a+=2,65505==n){if(1165519206!=i.getUint32(a+=2,!1))return-1;var o=18761==i.getUint16(a+=6,!1);a+=i.getUint32(a+4,o);var s=i.getUint16(a,o);a+=2;for(var r=0;r<s;r++)if(274==i.getUint16(a+12*r,o))return i.getUint16(a+12*r+8,o)}else{if(65280!=(65280&n))break;a+=i.getUint16(a,!1)}}return-1},base64ToArrayBuffer:function(t){t=t.replace(/^data:([^;]+);base64,/gim,"");for(var i=atob(t),e=i.length,a=new Uint8Array(e),n=0;n<e;n++)a[n]=i.charCodeAt(n);return a.buffer},getRotatedImage:function(i,e){var a=t.drawImage(i,e),n=new Image;return n.src=a.toDataURL(),n},flipX:function(t){return t%2==0?t-1:t+1},flipY:function(t){return{1:4,4:1,2:3,3:2,5:8,8:5,6:7,7:6}[t]},rotate90:function(t){return{1:6,2:7,3:8,4:5,5:2,6:3,7:4,8:1}[t]},numberValid:function(t){return"number"==typeof t&&!isNaN(t)}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var e=String;"undefined"!=typeof window&&window.Image&&(e=[String,Image]);var a={value:Object,width:{type:Number,default:200,validator:function(t){return t>0}},height:{type:Number,default:200,validator:function(t){return t>0}},placeholder:{type:String,default:"Choose an image"},placeholderColor:{default:"#606060"},placeholderFontSize:{type:Number,default:0,validator:function(t){return t>=0}},canvasColor:{default:"transparent"},quality:{type:Number,default:2,validator:function(t){return t>0}},zoomSpeed:{default:3,type:Number,validator:function(t){return t>0}},accept:String,fileSizeLimit:{type:Number,default:0,validator:function(t){return t>=0}},disabled:Boolean,disableDragAndDrop:Boolean,disableClickToChoose:Boolean,disableDragToMove:Boolean,disableScrollToZoom:Boolean,disablePinchToZoom:Boolean,disableRotation:Boolean,reverseScrollToZoom:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number},initialImage:e,initialSize:{type:String,default:"cover",validator:function(t){return"cover"===t||"contain"===t||"natural"===t}},initialPosition:{type:String,default:"center",validator:function(t){var i=["center","top","bottom","left","right"];return t.split(" ").every(function(t){return i.indexOf(t)>=0})||/^-?\d+% -?\d+%$/.test(t)}},inputAttrs:Object,showLoading:Boolean,loadingSize:{type:Number,default:20},loadingColor:{type:String,default:"#606060"},replaceDrop:Boolean},n="init",o="file-choose",s="file-size-exceed",r="file-type-mismatch",h="new-image",l="new-image-drawn",u="image-remove",c="move",d="zoom",g="draw",p="initial-image-loaded",f="loading-start",m="loading-end",v="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={render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{ref:"wrapper",class:"croppa-container "+(t.img?"croppa--has-target":"")+" "+(t.disabled?"croppa--disabled":"")+" "+(t.disableClickToChoose?"croppa--disabled-cc":"")+" "+(t.disableDragToMove&&t.disableScrollToZoom?"croppa--disabled-mz":"")+" "+(t.fileDraggedOver?"croppa--dropzone":""),on:{dragenter:function(i){i.stopPropagation(),i.preventDefault(),t._handleDragEnter(i)},dragleave:function(i){i.stopPropagation(),i.preventDefault(),t._handleDragLeave(i)},dragover:function(i){i.stopPropagation(),i.preventDefault(),t._handleDragOver(i)},drop:function(i){i.stopPropagation(),i.preventDefault(),t._handleDrop(i)}}},[e("input",t._b({ref:"fileInput",staticStyle:{height:"1px",width:"1px",overflow:"hidden","margin-left":"-99999px",position:"absolute"},attrs:{type:"file",accept:t.accept,disabled:t.disabled},on:{change:t._handleInputChange}},"input",t.inputAttrs,!1)),t._v(" "),e("div",{staticClass:"slots",staticStyle:{width:"0",height:"0",visibility:"hidden"}},[t._t("initial"),t._v(" "),t._t("placeholder")],2),t._v(" "),e("canvas",{ref:"canvas",on:{click:function(i){i.stopPropagation(),i.preventDefault(),t._handleClick(i)},touchstart:function(i){i.stopPropagation(),t._handlePointerStart(i)},mousedown:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerStart(i)},pointerstart:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerStart(i)},touchend:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerEnd(i)},touchcancel:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerEnd(i)},mouseup:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerEnd(i)},pointerend:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerEnd(i)},pointercancel:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerEnd(i)},touchmove:function(i){i.stopPropagation(),t._handlePointerMove(i)},mousemove:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerMove(i)},pointermove:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerMove(i)},pointerleave:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerLeave(i)},DOMMouseScroll:function(i){i.stopPropagation(),t._handleWheel(i)},wheel:function(i){i.stopPropagation(),t._handleWheel(i)},mousewheel:function(i){i.stopPropagation(),t._handleWheel(i)}}}),t._v(" "),t.showRemoveButton&&t.img?e("svg",{staticClass:"icon icon-remove",style:"top: -"+t.height/40+"px; right: -"+t.width/40+"px",attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",width:t.removeButtonSize||t.width/10,height:t.removeButtonSize||t.width/10},on:{click:t.remove}},[e("path",{attrs:{d:"M511.921231 0C229.179077 0 0 229.257846 0 512 0 794.702769 229.179077 1024 511.921231 1024 794.781538 1024 1024 794.702769 1024 512 1024 229.257846 794.781538 0 511.921231 0ZM732.041846 650.633846 650.515692 732.081231C650.515692 732.081231 521.491692 593.683692 511.881846 593.683692 502.429538 593.683692 373.366154 732.081231 373.366154 732.081231L291.761231 650.633846C291.761231 650.633846 430.316308 523.500308 430.316308 512.196923 430.316308 500.696615 291.761231 373.523692 291.761231 373.523692L373.366154 291.918769C373.366154 291.918769 503.453538 430.395077 511.881846 430.395077 520.349538 430.395077 650.515692 291.918769 650.515692 291.918769L732.041846 373.523692C732.041846 373.523692 593.447385 502.547692 593.447385 512.196923 593.447385 521.412923 732.041846 650.633846 732.041846 650.633846Z",fill:t.removeButtonColor}})]):t._e(),t._v(" "),t.showLoading&&t.loading?e("div",{staticClass:"sk-fading-circle",style:t.loadingStyle},t._l(12,function(i){return e("div",{key:i,class:"sk-circle"+i+" sk-circle"},[e("div",{staticClass:"sk-circle-indicator",style:{backgroundColor:t.loadingColor}})])})):t._e(),t._v(" "),t._t("default")],2)},staticRenderFns:[],model:{prop:"value",event:n},props:a,data:function(){return{canvas:null,ctx:null,originalImage:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{width:0,height:0,startX:0,startY:0},fileDraggedOver:!1,tabStart:0,scrolling:!1,pinching:!1,rotating:!1,pinchDistance:0,supportTouch:!1,pointerMoved:!1,pointerStartCoord:null,naturalWidth:0,naturalHeight:0,scaleRatio:null,orientation:1,userMetadata:null,imageSet:!1,currentPointerCoord:null,currentIsInitial:!1,loading:!1}},computed:{outputWidth:function(){return this.width*this.quality},outputHeight:function(){return this.height*this.quality},computedPlaceholderFontSize:function(){return this.placeholderFontSize*this.quality},aspectRatio:function(){return this.naturalWidth/this.naturalHeight},loadingStyle:function(){return{width:this.loadingSize+"px",height:this.loadingSize+"px",right:"15px",bottom:"10px"}}},mounted:function(){this._initialize(),i.rAFPolyfill(),i.toBlobPolyfill();this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality.")},watch:{outputWidth:function(){this.onDimensionChange()},outputHeight:function(){this.onDimensionChange()},canvasColor:function(){this.img?this._draw():this._setPlaceholders()},placeholder:function(){this.img||this._setPlaceholders()},placeholderColor:function(){this.img||this._setPlaceholders()},computedPlaceholderFontSize:function(){this.img||this._setPlaceholders()},preventWhiteSpace:function(t){t&&(this.imageSet=!1),this._placeImage()},scaleRatio:function(t,e){if(this.img&&i.numberValid(t)){var a=1;i.numberValid(e)&&0!==e&&(a=t/e);var n=this.currentPointerCoord||{x:this.imgData.startX+this.imgData.width/2,y:this.imgData.startY+this.imgData.height/2};if(this.imgData.width=this.naturalWidth*t,this.imgData.height=this.naturalHeight*t,this.preventWhiteSpace&&(this._preventZoomingToWhiteSpace(),this._preventMovingToWhiteSpace()),!this.userMetadata&&this.imageSet&&!this.rotating){var o=(a-1)*(n.x-this.imgData.startX),s=(a-1)*(n.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-o,this.imgData.startY=this.imgData.startY-s}}},"imgData.width":function(t,e){i.numberValid(t)&&(this.scaleRatio=t/this.naturalWidth,this.hasImage()&&Math.abs(t-e)>1e-5*t&&(this.$emit(d),this._draw()))},"imgData.height":function(t){i.numberValid(t)&&(this.scaleRatio=t/this.naturalHeight)},loading:function(t){t?this.$emit(f):this.$emit(m)}},methods:{getCanvas:function(){return this.canvas},getContext:function(){return this.ctx},getChosenFile:function(){return this.$refs.fileInput.files[0]},move:function(t){if(t){var i=this.imgData.startX,e=this.imgData.startY;this.imgData.startX+=t.x,this.imgData.startY+=t.y,this.preventWhiteSpace&&this._preventMovingToWhiteSpace(),this.imgData.startX===i&&this.imgData.startY===e||(this.$emit(c),this._draw())}},moveUpwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:0,y:-t})},moveDownwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:0,y:t})},moveLeftwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:-t,y:0})},moveRightwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:t,y:0})},zoom:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,e=this.zoomSpeed*i,a=1e-5*this.outputWidth*e,n=1;t?n=1+a:this.imgData.width>10&&(n=1-a),this.scaleRatio*=n},zoomIn:function(){this.zoom(!0)},zoomOut:function(){this.zoom(!1)},rotate:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.disableRotation||this.disabled||(t=parseInt(t),(isNaN(t)||t>3||t<-3)&&(console.warn("Invalid argument for rotate() method. It should one of the integers from -3 to 3."),t=1),this._rotateByStep(t))},flipX:function(){this.disableRotation||this.disabled||this._setOrientation(2)},flipY:function(){this.disableRotation||this.disabled||this._setOrientation(4)},refresh:function(){this.$nextTick(this._initialize)},hasImage:function(){return!!this.imageSet},applyMetadata:function(t){if(t){this.userMetadata=t;var i=t.orientation||this.orientation||1;this._setOrientation(i,!0)}},generateDataUrl:function(t,i){return this.hasImage()?this.canvas.toDataURL(t,i):""},generateBlob:function(t,i,e){this.hasImage()?this.canvas.toBlob(t,i,e):t(null)},promisedBlob:function(){for(var t=this,i=arguments.length,e=Array(i),a=0;a<i;a++)e[a]=arguments[a];if("undefined"!=typeof Promise)return new Promise(function(i,a){try{t.generateBlob.apply(t,[function(t){i(t)}].concat(e))}catch(t){a(t)}});console.warn("No Promise support. Please add Promise polyfill if you want to use this method.")},getMetadata:function(){if(!this.hasImage())return{};var t=this.imgData;return{startX:t.startX,startY:t.startY,scale:this.scaleRatio,orientation:this.orientation}},supportDetection:function(){if("undefined"!=typeof window){var t=document.createElement("div");return{basic:window.requestAnimationFrame&&window.File&&window.FileReader&&window.FileList&&window.Blob,dnd:"ondragstart"in t&&"ondrop"in t}}},chooseFile:function(){this.$refs.fileInput.click()},remove:function(){this._setPlaceholders();var t=null!=this.img;this.originalImage=null,this.img=null,this.$refs.fileInput.value="",this.imgData={width:0,height:0,startX:0,startY:0},this.orientation=1,this.scaleRatio=null,this.userMetadata=null,this.imageSet=!1,this.loading=!1,t&&this.$emit(u)},_initialize:function(){this.canvas=this.$refs.canvas,this._setSize(),this.canvas.style.backgroundColor=this.canvasColor&&"default"!=this.canvasColor?"string"==typeof this.canvasColor?this.canvasColor:"":"transparent",this.ctx=this.canvas.getContext("2d"),this.originalImage=null,this.img=null,this.imageSet=!1,this._setInitial(),this.$emit(n,this)},_setSize:function(){this.canvas.width=this.outputWidth,this.canvas.height=this.outputHeight,this.canvas.style.width=this.width+"px",this.canvas.style.height=this.height+"px"},_rotateByStep:function(t){var i=1;switch(t){case 1:i=6;break;case 2:i=3;break;case 3:case-1:i=8;break;case-2:i=3;break;case-3:i=6}this._setOrientation(i)},_setImagePlaceholder:function(){var t=this,e=void 0;if(this.$slots.placeholder&&this.$slots.placeholder[0]){var a=this.$slots.placeholder[0],n=a.tag,o=a.elm;"img"==n&&o&&(e=o)}if(e){var s=function(){t.ctx.drawImage(e,0,0,t.outputWidth,t.outputHeight)};i.imageLoaded(e)?s():e.onload=s}},_setTextPlaceholder:function(){var t=this.ctx;t.textBaseline="middle",t.textAlign="center";var i=this.outputWidth*(2/3)/this.placeholder.length,e=this.computedPlaceholderFontSize&&0!=this.computedPlaceholderFontSize?this.computedPlaceholderFontSize:i;t.font=e+"px sans-serif",t.fillStyle=this.placeholderColor&&"default"!=this.placeholderColor?this.placeholderColor:"#606060",t.fillText(this.placeholder,this.outputWidth/2,this.outputHeight/2)},_setPlaceholders:function(){this._paintBackground(),this._setImagePlaceholder(),this._setTextPlaceholder()},_setInitial:function(){var t=this,e=void 0,a=void 0;if(this.$slots.initial&&this.$slots.initial[0]){var n=this.$slots.initial[0],o=n.tag,s=n.elm;"img"==o&&s&&(a=s)}this.initialImage&&"string"==typeof this.initialImage?(e=this.initialImage,a=new Image,/^data:/.test(e)||/^blob:/.test(e)||a.setAttribute("crossOrigin","anonymous"),a.src=e):"object"===v(this.initialImage)&&this.initialImage instanceof Image&&(a=this.initialImage),e||a?(this.currentIsInitial=!0,i.imageLoaded(a)?this._onload(a,+a.dataset.exifOrientation,!0):(this.loading=!0,a.onload=function(){t._onload(a,+a.dataset.exifOrientation,!0)},a.onerror=function(){t._setPlaceholders()})):this._setPlaceholders()},_onload:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,e=arguments[2];this.originalImage=t,this.img=t,isNaN(i)&&(i=1),this._setOrientation(i),e&&this.$emit(p)},_handleClick:function(){this.hasImage()||this.disableClickToChoose||this.disabled||this.supportTouch||this.chooseFile()},_handleInputChange:function(){var t=this.$refs.fileInput;if(t.files.length){var i=t.files[0];this._onNewFileIn(i)}},_onNewFileIn:function(t){var e=this;if(this.currentIsInitial=!1,this.loading=!0,this.$emit(o,t),!this._fileSizeIsValid(t))throw this.loading=!1,this.$emit(s,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this._fileTypeIsValid(t)){this.loading=!1,this.$emit(r,t);var a=t.type||t.name.toLowerCase().split(".").pop();throw new Error("File type ("+a+") mimatches ("+this.accept+").")}if("undefined"!=typeof window&&void 0!==window.FileReader){var n=new FileReader;n.onload=function(t){var a=t.target.result,n=1;try{n=i.getFileOrientation(i.base64ToArrayBuffer(a))}catch(t){}n<1&&(n=1);var o=new Image;o.src=a,o.onload=function(){e._onload(o,n),e.$emit(h)}},n.readAsDataURL(t)}},_fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit||0==this.fileSizeLimit||t.size<this.fileSizeLimit)},_fileTypeIsValid:function(t){if(!this.accept)return!0;for(var i=this.accept,e=i.replace(/\/.*$/,""),a=i.split(","),n=0,o=a.length;n<o;n++){var s=a[n],r=s.trim();if("."==r.charAt(0)){if(t.name.toLowerCase().split(".").pop()===r.toLowerCase().slice(1))return!0}else if(/\/\*$/.test(r)){if(t.type.replace(/\/.*$/,"")===e)return!0}else if(t.type===s)return!0}return!1},_placeImage:function(t){if(this.img){var e=this.imgData;if(this.naturalWidth=this.img.naturalWidth,this.naturalHeight=this.img.naturalHeight,e.startX=i.numberValid(e.startX)?e.startX:0,e.startY=i.numberValid(e.startY)?e.startY:0,this.preventWhiteSpace?this._aspectFill():this.imageSet?(this.imgData.width=this.naturalWidth*this.scaleRatio,this.imgData.height=this.naturalHeight*this.scaleRatio):"contain"==this.initialSize?this._aspectFit():"natural"==this.initialSize?this._naturalSize():this._aspectFill(),!this.imageSet&&(/top/.test(this.initialPosition)?e.startY=0:/bottom/.test(this.initialPosition)&&(e.startY=this.outputHeight-e.height),/left/.test(this.initialPosition)?e.startX=0:/right/.test(this.initialPosition)&&(e.startX=this.outputWidth-e.width),/^-?\d+% -?\d+%$/.test(this.initialPosition))){var a=/^(-?\d+)% (-?\d+)%$/.exec(this.initialPosition),n=+a[1]/100,o=+a[2]/100;e.startX=n*(this.outputWidth-e.width),e.startY=o*(this.outputHeight-e.height)}t&&this._applyMetadata(),t&&this.preventWhiteSpace?this.zoom(!1,0):(this.move({x:0,y:0}),this._draw())}},_aspectFill:function(){var t=this.naturalWidth,i=this.naturalHeight,e=this.outputWidth/this.outputHeight,a=void 0;this.aspectRatio>e?(a=i/this.outputHeight,this.imgData.width=t/a,this.imgData.height=this.outputHeight,this.imgData.startX=-(this.imgData.width-this.outputWidth)/2,this.imgData.startY=0):(a=t/this.outputWidth,this.imgData.height=i/a,this.imgData.width=this.outputWidth,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2,this.imgData.startX=0)},_aspectFit:function(){var t=this.naturalWidth,i=this.naturalHeight,e=this.outputWidth/this.outputHeight,a=void 0;this.aspectRatio>e?(a=t/this.outputWidth,this.imgData.height=i/a,this.imgData.width=this.outputWidth,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2):(a=i/this.outputHeight,this.imgData.width=t/a,this.imgData.height=this.outputHeight,this.imgData.startX=-(this.imgData.width-this.outputWidth)/2)},_naturalSize:function(){var t=this.naturalWidth,i=this.naturalHeight;this.imgData.width=t,this.imgData.height=i,this.imgData.startX=-(this.imgData.width-this.outputWidth)/2,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2},_handlePointerStart:function(t){this.supportTouch=!0,this.pointerMoved=!1;var e=i.getPointerCoords(t,this);if(this.pointerStartCoord=e,!this.disabled)if(this.hasImage()||this.disableClickToChoose){if(!(t.which&&t.which>1)){if(!t.touches||1===t.touches.length){this.dragging=!0,this.pinching=!1;var a=i.getPointerCoords(t,this);this.lastMovingCoord=a}t.touches&&2===t.touches.length&&!this.disablePinchToZoom&&(this.dragging=!1,this.pinching=!0,this.pinchDistance=i.getPinchDistance(t,this));for(var n=["mouseup","touchend","touchcancel","pointerend","pointercancel"],o=0,s=n.length;o<s;o++){var r=n[o];document.addEventListener(r,this._handlePointerEnd)}}}else this.tabStart=(new Date).valueOf()},_handlePointerEnd:function(t){var e=0;if(this.pointerStartCoord){var a=i.getPointerCoords(t,this);e=Math.sqrt(Math.pow(a.x-this.pointerStartCoord.x,2)+Math.pow(a.y-this.pointerStartCoord.y,2))||0}if(!this.disabled){if(!this.hasImage()&&!this.disableClickToChoose){var n=(new Date).valueOf();return e<100&&n-this.tabStart<500&&this.supportTouch&&this.chooseFile(),void(this.tabStart=0)}this.dragging=!1,this.pinching=!1,this.pinchDistance=0,this.lastMovingCoord=null,this.pointerMoved=!1,this.pointerStartCoord=null}},_handlePointerMove:function(t){if(this.pointerMoved=!0,this.hasImage()){var e=i.getPointerCoords(t,this);if(this.currentPointerCoord=e,!this.disabled&&!this.disableDragToMove){if(t.preventDefault(),!t.touches||1===t.touches.length){if(!this.dragging)return;this.lastMovingCoord&&this.move({x:e.x-this.lastMovingCoord.x,y:e.y-this.lastMovingCoord.y}),this.lastMovingCoord=e}if(t.touches&&2===t.touches.length&&!this.disablePinchToZoom){if(!this.pinching)return;var a=i.getPinchDistance(t,this),n=a-this.pinchDistance;this.zoom(n>0,1),this.pinchDistance=a}}}},_handlePointerLeave:function(){this.currentPointerCoord=null},_handleWheel:function(t){var i=this;this.disabled||this.disableScrollToZoom||!this.hasImage()||(t.preventDefault(),this.scrolling=!0,t.wheelDelta<0||t.deltaY>0||t.detail>0?this.zoom(this.reverseScrollToZoom):(t.wheelDelta>0||t.deltaY<0||t.detail<0)&&this.zoom(!this.reverseScrollToZoom),this.$nextTick(function(){i.scrolling=!1}))},_handleDragEnter:function(t){this.disabled||this.disableDragAndDrop||!i.eventHasFile(t)||this.hasImage()&&!this.replaceDrop||(this.fileDraggedOver=!0)},_handleDragLeave:function(t){this.fileDraggedOver&&i.eventHasFile(t)&&(this.fileDraggedOver=!1)},_handleDragOver:function(t){},_handleDrop:function(t){if(this.fileDraggedOver&&i.eventHasFile(t)){this.hasImage()&&this.replaceDrop&&this.remove(),this.fileDraggedOver=!1;var e=void 0,a=t.dataTransfer;if(a){if(a.items)for(var n=0,o=a.items.length;n<o;n++){var s=a.items[n];if("file"==s.kind){e=s.getAsFile();break}}else e=a.files[0];e&&this._onNewFileIn(e)}}},_preventMovingToWhiteSpace:function(){this.imgData.startX>0&&(this.imgData.startX=0),this.imgData.startY>0&&(this.imgData.startY=0),this.outputWidth-this.imgData.startX>this.imgData.width&&(this.imgData.startX=-(this.imgData.width-this.outputWidth)),this.outputHeight-this.imgData.startY>this.imgData.height&&(this.imgData.startY=-(this.imgData.height-this.outputHeight))},_preventZoomingToWhiteSpace:function(){this.imgData.width<this.outputWidth&&(this.scaleRatio=this.outputWidth/this.naturalWidth),this.imgData.height<this.outputHeight&&(this.scaleRatio=this.outputHeight/this.naturalHeight)},_setOrientation:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:6,a=arguments[1],n=a;if(e>1||n){if(!this.img)return;this.rotating=!0;var o=i.getRotatedImage(n?this.originalImage:this.img,e);o.onload=function(){t.img=o,t._placeImage(a)}}else this._placeImage(a);this.orientation=2==e?i.flipX(this.orientation):4==e?i.flipY(this.orientation):6==e?i.rotate90(this.orientation):3==e?i.rotate90(i.rotate90(this.orientation)):8==e?i.rotate90(i.rotate90(i.rotate90(this.orientation))):e,n&&(this.orientation=e)},_paintBackground:function(){var t=this.canvasColor&&"default"!=this.canvasColor?this.canvasColor:"transparent";this.ctx.fillStyle=t,this.ctx.clearRect(0,0,this.outputWidth,this.outputHeight),this.ctx.fillRect(0,0,this.outputWidth,this.outputHeight)},_draw:function(){var t=this;this.$nextTick(function(){t.img&&("undefined"!=typeof window&&window.requestAnimationFrame?requestAnimationFrame(t._drawFrame):t._drawFrame())})},_drawFrame:function(){this.loading=!1;var t=this.ctx,i=this.imgData,e=i.startX,a=i.startY,n=i.width,o=i.height;this._paintBackground(),t.drawImage(this.img,e,a,n,o),this.$emit(g,t),this.imageSet||(this.imageSet=!0,this.$emit(l)),this.rotating=!1},_applyMetadata:function(){var t=this;if(this.userMetadata){var e=this.userMetadata,a=e.startX,n=e.startY,o=e.scale;i.numberValid(a)&&(this.imgData.startX=a),i.numberValid(n)&&(this.imgData.startY=n),i.numberValid(o)&&(this.scaleRatio=o),this.$nextTick(function(){t.userMetadata=null})}},onDimensionChange:function(){this.img?(this.preventWhiteSpace&&(this.imageSet=!1),this._setSize(),this._placeImage()):this._initialize()}}},b=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable,_=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var i={},e=0;e<10;e++)i["_"+String.fromCharCode(e)]=e;if("0123456789"!==Object.getOwnPropertyNames(i).map(function(t){return i[t]}).join(""))return!1;var a={};return"abcdefghijklmnopqrst".split("").forEach(function(t){a[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},a)).join("")}catch(t){return!1}}()?Object.assign:function(t,i){for(var e,a,n=function(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}(t),o=1;o<arguments.length;o++){e=Object(arguments[o]);for(var s in e)y.call(e,s)&&(n[s]=e[s]);if(b){a=b(e);for(var r=0;r<a.length;r++)D.call(e,a[r])&&(n[a[r]]=e[a[r]])}}return n},P={componentName:"croppa"};return{install:function(t,i){i=_({},P,i);var e=Number(t.version.split(".")[0]);if(e<2)throw new Error("vue-croppa supports vue version 2.0 and above. You are using Vue@"+e+". Please upgrade to the latest version of Vue.");var a=i.componentName||"croppa";t.component(a,w)},component:w}});
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.Croppa=i()}(this,function(){"use strict";function t(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var i=function(t,i){return i={exports:{}},t(i,i.exports),i.exports}(function(t,i){!function(i,e){t.exports=e()}(0,function(){function t(t,i,e,a,n,o){if(!/^[1-8]$/.test(i))throw new Error("orientation should be [1-8]");null==e&&(e=0),null==a&&(a=0),null==n&&(n=t.width),null==o&&(o=t.height);var s=document.createElement("canvas"),r=s.getContext("2d");switch(s.width=n,s.height=o,r.save(),+i){case 1:break;case 2:r.translate(n,0),r.scale(-1,1);break;case 3:r.translate(n,o),r.rotate(1*Math.PI);break;case 4:r.translate(0,o),r.scale(1,-1);break;case 5:s.width=o,s.height=n,r.rotate(.5*Math.PI),r.scale(1,-1);break;case 6:s.width=o,s.height=n,r.rotate(.5*Math.PI),r.translate(0,-o);break;case 7:s.width=o,s.height=n,r.rotate(1.5*Math.PI),r.translate(-n,o),r.scale(1,-1);break;case 8:s.width=o,s.height=n,r.translate(0,n),r.rotate(1.5*Math.PI)}return r.drawImage(t,e,a,n,o),r.restore(),s}return{drawImage:t}})}),e={onePointCoord:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.clientX,s=t.clientY;return{x:(o-n.left)*a,y:(s-n.top)*a}},getPointerCoords:function(t,i){var e=void 0;return e=t.touches&&t.touches[0]?t.touches[0]:t.changedTouches&&t.changedTouches[0]?t.changedTouches[0]:t,this.onePointCoord(e,i)},getPinchDistance:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return Math.sqrt(Math.pow(n.x-o.x,2)+Math.pow(n.y-o.y,2))},getPinchCenterCoord:function(t,i){var e=t.touches[0],a=t.touches[1],n=this.onePointCoord(e,i),o=this.onePointCoord(a,i);return{x:(n.x+o.x)/2,y:(n.y+o.y)/2}},imageLoaded:function(t){return t.complete&&0!==t.naturalWidth},rAFPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window){for(var t=0,i=["webkit","moz"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),a=Math.max(0,16.7-(e-t)),n=window.setTimeout(function(){i(e+a)},a);return t=e+a,n}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)}),Array.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)}}},toBlobPolyfill:function(){if("undefined"!=typeof document&&"undefined"!=typeof window&&HTMLCanvasElement){var t,i,e;HTMLCanvasElement.prototype.toBlob||Object.defineProperty(HTMLCanvasElement.prototype,"toBlob",{value:function(a,n,o){t=atob(this.toDataURL(n,o).split(",")[1]),i=t.length,e=new Uint8Array(i);for(var s=0;s<i;s++)e[s]=t.charCodeAt(s);a(new Blob([e],{type:n||"image/png"}))}})}},eventHasFile:function(t){var i=t.dataTransfer||t.originalEvent.dataTransfer;if(i.types)for(var e=0,a=i.types.length;e<a;e++)if("Files"==i.types[e])return!0;return!1},getFileOrientation:function(t){var i=new DataView(t);if(65496!=i.getUint16(0,!1))return-2;for(var e=i.byteLength,a=2;a<e;){var n=i.getUint16(a,!1);if(a+=2,65505==n){if(1165519206!=i.getUint32(a+=2,!1))return-1;var o=18761==i.getUint16(a+=6,!1);a+=i.getUint32(a+4,o);var s=i.getUint16(a,o);a+=2;for(var r=0;r<s;r++)if(274==i.getUint16(a+12*r,o))return i.getUint16(a+12*r+8,o)}else{if(65280!=(65280&n))break;a+=i.getUint16(a,!1)}}return-1},base64ToArrayBuffer:function(t){t=t.replace(/^data:([^;]+);base64,/gim,"");for(var i=atob(t),e=i.length,a=new Uint8Array(e),n=0;n<e;n++)a[n]=i.charCodeAt(n);return a.buffer},getRotatedImage:function(t,e){var a=i.drawImage(t,e),n=new Image;return n.src=a.toDataURL(),n},flipX:function(t){return t%2==0?t-1:t+1},flipY:function(t){return{1:4,4:1,2:3,3:2,5:8,8:5,6:7,7:6}[t]},rotate90:function(t){return{1:6,2:7,3:8,4:5,5:2,6:3,7:4,8:1}[t]},numberValid:function(t){return"number"==typeof t&&!isNaN(t)}};Number.isInteger=Number.isInteger||function(t){return"number"==typeof t&&isFinite(t)&&Math.floor(t)===t};var a=String;"undefined"!=typeof window&&window.Image&&(a=[String,Image]);var n={value:Object,width:{type:Number,default:200,validator:function(t){return t>0}},height:{type:Number,default:200,validator:function(t){return t>0}},placeholder:{type:String,default:"Choose an image"},placeholderColor:{default:"#606060"},placeholderFontSize:{type:Number,default:0,validator:function(t){return t>=0}},canvasColor:{default:"transparent"},quality:{type:Number,default:2,validator:function(t){return t>0}},zoomSpeed:{default:3,type:Number,validator:function(t){return t>0}},accept:String,fileSizeLimit:{type:Number,default:0,validator:function(t){return t>=0}},disabled:Boolean,disableDragAndDrop:Boolean,disableClickToChoose:Boolean,disableDragToMove:Boolean,disableScrollToZoom:Boolean,disablePinchToZoom:Boolean,disableRotation:Boolean,reverseScrollToZoom:Boolean,preventWhiteSpace:Boolean,showRemoveButton:{type:Boolean,default:!0},removeButtonColor:{type:String,default:"red"},removeButtonSize:{type:Number},initialImage:a,initialSize:{type:String,default:"cover",validator:function(t){return"cover"===t||"contain"===t||"natural"===t}},initialPosition:{type:String,default:"center",validator:function(t){var i=["center","top","bottom","left","right"];return t.split(" ").every(function(t){return i.indexOf(t)>=0})||/^-?\d+% -?\d+%$/.test(t)}},inputAttrs:Object,showLoading:Boolean,loadingSize:{type:Number,default:20},loadingColor:{type:String,default:"#606060"},replaceDrop:Boolean,passive:Boolean,imageBorderRadius:{type:[Number,String],default:0}},o={INIT_EVENT:"init",FILE_CHOOSE_EVENT:"file-choose",FILE_SIZE_EXCEED_EVENT:"file-size-exceed",FILE_TYPE_MISMATCH_EVENT:"file-type-mismatch",NEW_IMAGE:"new-image",NEW_IMAGE_DRAWN:"new-image-drawn",IMAGE_REMOVE_EVENT:"image-remove",MOVE_EVENT:"move",ZOOM_EVENT:"zoom",DRAW:"draw",INITIAL_IMAGE_LOADED_EVENT:"initial-image-loaded",LOADING_START:"loading-start",LOADING_END:"loading-end"},s="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},r=["imgData","img","imgSet","originalImage","naturalHeight","naturalWidth","orientation","scaleRatio"],h={render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{ref:"wrapper",class:"croppa-container "+(t.img?"croppa--has-target":"")+" "+(t.passive?"croppa--passive":"")+" "+(t.disabled?"croppa--disabled":"")+" "+(t.disableClickToChoose?"croppa--disabled-cc":"")+" "+(t.disableDragToMove&&t.disableScrollToZoom?"croppa--disabled-mz":"")+" "+(t.fileDraggedOver?"croppa--dropzone":""),on:{dragenter:function(i){i.stopPropagation(),i.preventDefault(),t._handleDragEnter(i)},dragleave:function(i){i.stopPropagation(),i.preventDefault(),t._handleDragLeave(i)},dragover:function(i){i.stopPropagation(),i.preventDefault(),t._handleDragOver(i)},drop:function(i){i.stopPropagation(),i.preventDefault(),t._handleDrop(i)}}},[e("input",t._b({ref:"fileInput",staticStyle:{height:"1px",width:"1px",overflow:"hidden","margin-left":"-99999px",position:"absolute"},attrs:{type:"file",accept:t.accept,disabled:t.disabled},on:{change:t._handleInputChange}},"input",t.inputAttrs)),e("div",{staticClass:"slots",staticStyle:{width:"0",height:"0",visibility:"hidden"}},[t._t("initial"),t._t("placeholder")],2),e("canvas",{ref:"canvas",on:{click:function(i){i.stopPropagation(),i.preventDefault(),t._handleClick(i)},touchstart:function(i){i.stopPropagation(),t._handlePointerStart(i)},mousedown:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerStart(i)},pointerstart:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerStart(i)},touchend:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerEnd(i)},touchcancel:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerEnd(i)},mouseup:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerEnd(i)},pointerend:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerEnd(i)},pointercancel:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerEnd(i)},touchmove:function(i){i.stopPropagation(),t._handlePointerMove(i)},mousemove:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerMove(i)},pointermove:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerMove(i)},pointerleave:function(i){i.stopPropagation(),i.preventDefault(),t._handlePointerLeave(i)},DOMMouseScroll:function(i){i.stopPropagation(),t._handleWheel(i)},wheel:function(i){i.stopPropagation(),t._handleWheel(i)},mousewheel:function(i){i.stopPropagation(),t._handleWheel(i)}}}),t.showRemoveButton&&t.img&&!t.passive?e("svg",{staticClass:"icon icon-remove",style:"top: -"+t.height/40+"px; right: -"+t.width/40+"px",attrs:{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",width:t.removeButtonSize||t.width/10,height:t.removeButtonSize||t.width/10},on:{click:t.remove}},[e("path",{attrs:{d:"M511.921231 0C229.179077 0 0 229.257846 0 512 0 794.702769 229.179077 1024 511.921231 1024 794.781538 1024 1024 794.702769 1024 512 1024 229.257846 794.781538 0 511.921231 0ZM732.041846 650.633846 650.515692 732.081231C650.515692 732.081231 521.491692 593.683692 511.881846 593.683692 502.429538 593.683692 373.366154 732.081231 373.366154 732.081231L291.761231 650.633846C291.761231 650.633846 430.316308 523.500308 430.316308 512.196923 430.316308 500.696615 291.761231 373.523692 291.761231 373.523692L373.366154 291.918769C373.366154 291.918769 503.453538 430.395077 511.881846 430.395077 520.349538 430.395077 650.515692 291.918769 650.515692 291.918769L732.041846 373.523692C732.041846 373.523692 593.447385 502.547692 593.447385 512.196923 593.447385 521.412923 732.041846 650.633846 732.041846 650.633846Z",fill:t.removeButtonColor}})]):t._e(),t.showLoading&&t.loading?e("div",{staticClass:"sk-fading-circle",style:t.loadingStyle},t._l(12,function(i){return e("div",{key:i,class:"sk-circle"+i+" sk-circle"},[e("div",{staticClass:"sk-circle-indicator",style:{backgroundColor:t.loadingColor}})])})):t._e(),t._t("default")],2)},staticRenderFns:[],model:{prop:"value",event:o.INIT_EVENT},props:n,data:function(){return{canvas:null,ctx:null,originalImage:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{width:0,height:0,startX:0,startY:0},fileDraggedOver:!1,tabStart:0,scrolling:!1,pinching:!1,rotating:!1,pinchDistance:0,supportTouch:!1,pointerMoved:!1,pointerStartCoord:null,naturalWidth:0,naturalHeight:0,scaleRatio:null,orientation:1,userMetadata:null,imageSet:!1,currentPointerCoord:null,currentIsInitial:!1,loading:!1}},computed:{outputWidth:function(){return this.width*this.quality},outputHeight:function(){return this.height*this.quality},computedPlaceholderFontSize:function(){return this.placeholderFontSize*this.quality},aspectRatio:function(){return this.naturalWidth/this.naturalHeight},loadingStyle:function(){return{width:this.loadingSize+"px",height:this.loadingSize+"px",right:"15px",bottom:"10px"}}},mounted:function(){var t=this;this._initialize(),e.rAFPolyfill(),e.toBlobPolyfill(),this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality."),this.passive&&this.$watch("value._data",function(i){var e=!1;if(i){for(var a in i)if(r.indexOf(a)>=0){var n=i[a];n!==t[a]&&(t.$set(t,a,n),e=!0)}e&&(t.img?t.$nextTick(function(){t._draw()}):t.remove())}},{deep:!0})},watch:{outputWidth:function(){this.onDimensionChange()},outputHeight:function(){this.onDimensionChange()},canvasColor:function(){this.img?this._draw():this._setPlaceholders()},imageBorderRadius:function(){this.img&&this._draw()},placeholder:function(){this.img||this._setPlaceholders()},placeholderColor:function(){this.img||this._setPlaceholders()},computedPlaceholderFontSize:function(){this.img||this._setPlaceholders()},preventWhiteSpace:function(t){t&&(this.imageSet=!1),this._placeImage()},scaleRatio:function(t,i){if(!this.passive&&this.img&&e.numberValid(t)){var a=1;e.numberValid(i)&&0!==i&&(a=t/i);var n=this.currentPointerCoord||{x:this.imgData.startX+this.imgData.width/2,y:this.imgData.startY+this.imgData.height/2};if(this.imgData.width=this.naturalWidth*t,this.imgData.height=this.naturalHeight*t,!this.userMetadata&&this.imageSet&&!this.rotating){var o=(a-1)*(n.x-this.imgData.startX),s=(a-1)*(n.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-o,this.imgData.startY=this.imgData.startY-s}this.preventWhiteSpace&&(this._preventZoomingToWhiteSpace(),this._preventMovingToWhiteSpace())}},"imgData.width":function(t,i){e.numberValid(t)&&(this.scaleRatio=t/this.naturalWidth,this.hasImage()&&Math.abs(t-i)>1e-5*t&&(this.$emit(o.ZOOM_EVENT),this._draw()))},"imgData.height":function(t){e.numberValid(t)&&(this.scaleRatio=t/this.naturalHeight)},"imgData.startX":function(t){this.hasImage()&&this.$nextTick(this._draw)},"imgData.startY":function(t){this.hasImage()&&this.$nextTick(this._draw)},loading:function(t){this.passive||(t?this.$emit(o.LOADING_START):this.$emit(o.LOADING_END))}},methods:{getCanvas:function(){return this.canvas},getContext:function(){return this.ctx},getChosenFile:function(){return this.$refs.fileInput.files[0]},move:function(t){if(t&&!this.passive){var i=this.imgData.startX,e=this.imgData.startY;this.imgData.startX+=t.x,this.imgData.startY+=t.y,this.preventWhiteSpace&&this._preventMovingToWhiteSpace(),this.imgData.startX===i&&this.imgData.startY===e||(this.$emit(o.MOVE_EVENT),this._draw())}},moveUpwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:0,y:-t})},moveDownwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:0,y:t})},moveLeftwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:-t,y:0})},moveRightwards:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.move({x:t,y:0})},zoom:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(!this.passive){var e=this.zoomSpeed*i,a=1e-5*this.outputWidth*e,n=1;t?n=1+a:this.imgData.width>10&&(n=1-a),this.scaleRatio*=n}},zoomIn:function(){this.zoom(!0)},zoomOut:function(){this.zoom(!1)},rotate:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;this.disableRotation||this.disabled||this.passive||(t=parseInt(t),(isNaN(t)||t>3||t<-3)&&(console.warn("Invalid argument for rotate() method. It should one of the integers from -3 to 3."),t=1),this._rotateByStep(t))},flipX:function(){this.disableRotation||this.disabled||this.passive||this._setOrientation(2)},flipY:function(){this.disableRotation||this.disabled||this.passive||this._setOrientation(4)},refresh:function(){this.$nextTick(this._initialize)},hasImage:function(){return!!this.imageSet},applyMetadata:function(t){if(t&&!this.passive){this.userMetadata=t;var i=t.orientation||this.orientation||1;this._setOrientation(i,!0)}},generateDataUrl:function(t,i){return this.hasImage()?this.canvas.toDataURL(t,i):""},generateBlob:function(t,i,e){this.hasImage()?this.canvas.toBlob(t,i,e):t(null)},promisedBlob:function(){for(var t=this,i=arguments.length,e=Array(i),a=0;a<i;a++)e[a]=arguments[a];if("undefined"!=typeof Promise)return new Promise(function(i,a){try{t.generateBlob.apply(t,[function(t){i(t)}].concat(e))}catch(t){a(t)}});console.warn("No Promise support. Please add Promise polyfill if you want to use this method.")},getMetadata:function(){if(!this.hasImage())return{};var t=this.imgData;return{startX:t.startX,startY:t.startY,scale:this.scaleRatio,orientation:this.orientation}},supportDetection:function(){if("undefined"!=typeof window){var t=document.createElement("div");return{basic:window.requestAnimationFrame&&window.File&&window.FileReader&&window.FileList&&window.Blob,dnd:"ondragstart"in t&&"ondrop"in t}}},chooseFile:function(){this.passive||this.$refs.fileInput.click()},remove:function(){this._setPlaceholders();var t=null!=this.img;this.originalImage=null,this.img=null,this.$refs.fileInput.value="",this.imgData={width:0,height:0,startX:0,startY:0},this.orientation=1,this.scaleRatio=null,this.userMetadata=null,this.imageSet=!1,this.loading=!1,t&&this.$emit(o.IMAGE_REMOVE_EVENT)},addClipPlugin:function(t){if(this.clipPlugins||(this.clipPlugins=[]),!("function"==typeof t&&this.clipPlugins.indexOf(t)<0))throw Error("Clip plugins should be functions");this.clipPlugins.push(t)},_initialize:function(){this.canvas=this.$refs.canvas,this._setSize(),this.canvas.style.backgroundColor=this.canvasColor&&"default"!=this.canvasColor?"string"==typeof this.canvasColor?this.canvasColor:"":"transparent",this.ctx=this.canvas.getContext("2d"),this.originalImage=null,this.img=null,this.imageSet=!1,this._setInitial(),this.passive||this.$emit(o.INIT_EVENT,this)},_setSize:function(){this.canvas.width=this.outputWidth,this.canvas.height=this.outputHeight,this.canvas.style.width=this.width+"px",this.canvas.style.height=this.height+"px"},_rotateByStep:function(t){var i=1;switch(t){case 1:i=6;break;case 2:i=3;break;case 3:case-1:i=8;break;case-2:i=3;break;case-3:i=6}this._setOrientation(i)},_setImagePlaceholder:function(){var t=this,i=void 0;if(this.$slots.placeholder&&this.$slots.placeholder[0]){var a=this.$slots.placeholder[0],n=a.tag,o=a.elm;"img"==n&&o&&(i=o)}if(i){var s=function(){t.ctx.drawImage(i,0,0,t.outputWidth,t.outputHeight)};e.imageLoaded(i)?s():i.onload=s}},_setTextPlaceholder:function(){var t=this.ctx;t.textBaseline="middle",t.textAlign="center";var i=this.outputWidth*(2/3)/this.placeholder.length,e=this.computedPlaceholderFontSize&&0!=this.computedPlaceholderFontSize?this.computedPlaceholderFontSize:i;t.font=e+"px sans-serif",t.fillStyle=this.placeholderColor&&"default"!=this.placeholderColor?this.placeholderColor:"#606060",t.fillText(this.placeholder,this.outputWidth/2,this.outputHeight/2)},_setPlaceholders:function(){this._paintBackground(),this._setImagePlaceholder(),this._setTextPlaceholder()},_setInitial:function(){var t=this,i=void 0,a=void 0;if(this.$slots.initial&&this.$slots.initial[0]){var n=this.$slots.initial[0],o=n.tag,r=n.elm;"img"==o&&r&&(a=r)}this.initialImage&&"string"==typeof this.initialImage?(i=this.initialImage,a=new Image,/^data:/.test(i)||/^blob:/.test(i)||a.setAttribute("crossOrigin","anonymous"),a.src=i):"object"===s(this.initialImage)&&this.initialImage instanceof Image&&(a=this.initialImage),i||a?(this.currentIsInitial=!0,e.imageLoaded(a)?this._onload(a,+a.dataset.exifOrientation,!0):(this.loading=!0,a.onload=function(){t._onload(a,+a.dataset.exifOrientation,!0)},a.onerror=function(){t._setPlaceholders()})):this._setPlaceholders()},_onload:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,e=arguments[2];this.originalImage=t,this.img=t,isNaN(i)&&(i=1),this._setOrientation(i),e&&this.$emit(o.INITIAL_IMAGE_LOADED_EVENT)},_handleClick:function(){this.hasImage()||this.disableClickToChoose||this.disabled||this.supportTouch||this.passive||this.chooseFile()},_handleInputChange:function(){var t=this.$refs.fileInput;if(t.files.length&&!this.passive){var i=t.files[0];this._onNewFileIn(i)}},_onNewFileIn:function(t){var i=this;if(this.currentIsInitial=!1,this.loading=!0,this.$emit(o.FILE_CHOOSE_EVENT,t),!this._fileSizeIsValid(t))throw this.loading=!1,this.$emit(o.FILE_SIZE_EXCEED_EVENT,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this._fileTypeIsValid(t)){this.loading=!1,this.$emit(o.FILE_TYPE_MISMATCH_EVENT,t);var a=t.type||t.name.toLowerCase().split(".").pop();throw new Error("File type ("+a+") mimatches ("+this.accept+").")}if("undefined"!=typeof window&&void 0!==window.FileReader){var n=new FileReader;n.onload=function(t){var a=t.target.result,n=1;try{n=e.getFileOrientation(e.base64ToArrayBuffer(a))}catch(t){}n<1&&(n=1);var s=new Image;s.src=a,s.onload=function(){i._onload(s,n),i.$emit(o.NEW_IMAGE)}},n.readAsDataURL(t)}},_fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit||0==this.fileSizeLimit||t.size<this.fileSizeLimit)},_fileTypeIsValid:function(t){if(!this.accept)return!0;for(var i=this.accept,e=i.replace(/\/.*$/,""),a=i.split(","),n=0,o=a.length;n<o;n++){var s=a[n],r=s.trim();if("."==r.charAt(0)){if(t.name.toLowerCase().split(".").pop()===r.toLowerCase().slice(1))return!0}else if(/\/\*$/.test(r)){if(t.type.replace(/\/.*$/,"")===e)return!0}else if(t.type===s)return!0}return!1},_placeImage:function(t){if(this.img){var i=this.imgData;if(this.naturalWidth=this.img.naturalWidth,this.naturalHeight=this.img.naturalHeight,i.startX=e.numberValid(i.startX)?i.startX:0,i.startY=e.numberValid(i.startY)?i.startY:0,this.preventWhiteSpace?this._aspectFill():this.imageSet?(this.imgData.width=this.naturalWidth*this.scaleRatio,this.imgData.height=this.naturalHeight*this.scaleRatio):"contain"==this.initialSize?this._aspectFit():"natural"==this.initialSize?this._naturalSize():this._aspectFill(),!this.imageSet&&(/top/.test(this.initialPosition)?i.startY=0:/bottom/.test(this.initialPosition)&&(i.startY=this.outputHeight-i.height),/left/.test(this.initialPosition)?i.startX=0:/right/.test(this.initialPosition)&&(i.startX=this.outputWidth-i.width),/^-?\d+% -?\d+%$/.test(this.initialPosition))){var a=/^(-?\d+)% (-?\d+)%$/.exec(this.initialPosition),n=+a[1]/100,o=+a[2]/100;i.startX=n*(this.outputWidth-i.width),i.startY=o*(this.outputHeight-i.height)}t&&this._applyMetadata(),t&&this.preventWhiteSpace?this.zoom(!1,0):(this.move({x:0,y:0}),this._draw())}},_aspectFill:function(){var t=this.naturalWidth,i=this.naturalHeight,e=this.outputWidth/this.outputHeight,a=void 0;this.aspectRatio>e?(a=i/this.outputHeight,this.imgData.width=t/a,this.imgData.height=this.outputHeight,this.imgData.startX=-(this.imgData.width-this.outputWidth)/2,this.imgData.startY=0):(a=t/this.outputWidth,this.imgData.height=i/a,this.imgData.width=this.outputWidth,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2,this.imgData.startX=0)},_aspectFit:function(){var t=this.naturalWidth,i=this.naturalHeight,e=this.outputWidth/this.outputHeight,a=void 0;this.aspectRatio>e?(a=t/this.outputWidth,this.imgData.height=i/a,this.imgData.width=this.outputWidth,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2):(a=i/this.outputHeight,this.imgData.width=t/a,this.imgData.height=this.outputHeight,this.imgData.startX=-(this.imgData.width-this.outputWidth)/2)},_naturalSize:function(){var t=this.naturalWidth,i=this.naturalHeight;this.imgData.width=t,this.imgData.height=i,this.imgData.startX=-(this.imgData.width-this.outputWidth)/2,this.imgData.startY=-(this.imgData.height-this.outputHeight)/2},_handlePointerStart:function(t){if(!this.passive){this.supportTouch=!0,this.pointerMoved=!1;var i=e.getPointerCoords(t,this);if(this.pointerStartCoord=i,!this.disabled)if(this.hasImage()||this.disableClickToChoose){if(!(t.which&&t.which>1)){if(!t.touches||1===t.touches.length){this.dragging=!0,this.pinching=!1;var a=e.getPointerCoords(t,this);this.lastMovingCoord=a}t.touches&&2===t.touches.length&&!this.disablePinchToZoom&&(this.dragging=!1,this.pinching=!0,this.pinchDistance=e.getPinchDistance(t,this));for(var n=["mouseup","touchend","touchcancel","pointerend","pointercancel"],o=0,s=n.length;o<s;o++){var r=n[o];document.addEventListener(r,this._handlePointerEnd)}}}else this.tabStart=(new Date).valueOf()}},_handlePointerEnd:function(t){if(!this.passive){var i=0;if(this.pointerStartCoord){var a=e.getPointerCoords(t,this);i=Math.sqrt(Math.pow(a.x-this.pointerStartCoord.x,2)+Math.pow(a.y-this.pointerStartCoord.y,2))||0}if(!this.disabled){if(!this.hasImage()&&!this.disableClickToChoose){var n=(new Date).valueOf();return i<100&&n-this.tabStart<500&&this.supportTouch&&this.chooseFile(),void(this.tabStart=0)}this.dragging=!1,this.pinching=!1,this.pinchDistance=0,this.lastMovingCoord=null,this.pointerMoved=!1,this.pointerStartCoord=null}}},_handlePointerMove:function(t){if(!this.passive&&(this.pointerMoved=!0,this.hasImage())){var i=e.getPointerCoords(t,this);if(this.currentPointerCoord=i,!this.disabled&&!this.disableDragToMove){if(t.preventDefault(),!t.touches||1===t.touches.length){if(!this.dragging)return;this.lastMovingCoord&&this.move({x:i.x-this.lastMovingCoord.x,y:i.y-this.lastMovingCoord.y}),this.lastMovingCoord=i}if(t.touches&&2===t.touches.length&&!this.disablePinchToZoom){if(!this.pinching)return;var a=e.getPinchDistance(t,this),n=a-this.pinchDistance;this.zoom(n>0,1),this.pinchDistance=a}}}},_handlePointerLeave:function(){this.passive||(this.currentPointerCoord=null)},_handleWheel:function(t){var i=this;this.passive||this.disabled||this.disableScrollToZoom||!this.hasImage()||(t.preventDefault(),this.scrolling=!0,t.wheelDelta<0||t.deltaY>0||t.detail>0?this.zoom(this.reverseScrollToZoom):(t.wheelDelta>0||t.deltaY<0||t.detail<0)&&this.zoom(!this.reverseScrollToZoom),this.$nextTick(function(){i.scrolling=!1}))},_handleDragEnter:function(t){this.passive||this.disabled||this.disableDragAndDrop||!e.eventHasFile(t)||this.hasImage()&&!this.replaceDrop||(this.fileDraggedOver=!0)},_handleDragLeave:function(t){this.passive||this.fileDraggedOver&&e.eventHasFile(t)&&(this.fileDraggedOver=!1)},_handleDragOver:function(t){},_handleDrop:function(t){if(!this.passive&&this.fileDraggedOver&&e.eventHasFile(t)){this.hasImage()&&this.replaceDrop&&this.remove(),this.fileDraggedOver=!1;var i=void 0,a=t.dataTransfer;if(a){if(a.items)for(var n=0,o=a.items.length;n<o;n++){var s=a.items[n];if("file"==s.kind){i=s.getAsFile();break}}else i=a.files[0];i&&this._onNewFileIn(i)}}},_preventMovingToWhiteSpace:function(){this.imgData.startX>0&&(this.imgData.startX=0),this.imgData.startY>0&&(this.imgData.startY=0),this.outputWidth-this.imgData.startX>this.imgData.width&&(this.imgData.startX=-(this.imgData.width-this.outputWidth)),this.outputHeight-this.imgData.startY>this.imgData.height&&(this.imgData.startY=-(this.imgData.height-this.outputHeight))},_preventZoomingToWhiteSpace:function(){this.imgData.width<this.outputWidth&&(this.scaleRatio=this.outputWidth/this.naturalWidth),this.imgData.height<this.outputHeight&&(this.scaleRatio=this.outputHeight/this.naturalHeight)},_setOrientation:function(){var t=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:6,a=arguments[1],n=a;if(i>1||n){if(!this.img)return;this.rotating=!0;var o=e.getRotatedImage(n?this.originalImage:this.img,i);o.onload=function(){t.img=o,t._placeImage(a)}}else this._placeImage(a);this.orientation=2==i?e.flipX(this.orientation):4==i?e.flipY(this.orientation):6==i?e.rotate90(this.orientation):3==i?e.rotate90(e.rotate90(this.orientation)):8==i?e.rotate90(e.rotate90(e.rotate90(this.orientation))):i,n&&(this.orientation=i)},_paintBackground:function(){var t=this.canvasColor&&"default"!=this.canvasColor?this.canvasColor:"transparent";this.ctx.fillStyle=t,this.ctx.clearRect(0,0,this.outputWidth,this.outputHeight),this.ctx.fillRect(0,0,this.outputWidth,this.outputHeight)},_draw:function(){var t=this;this.$nextTick(function(){t.img&&("undefined"!=typeof window&&window.requestAnimationFrame?requestAnimationFrame(t._drawFrame):t._drawFrame())})},_drawFrame:function(){this.loading=!1;var t=this.ctx,i=this.imgData,e=i.startX,a=i.startY,n=i.width,s=i.height;this._paintBackground(),t.drawImage(this.img,e,a,n,s),this.preventWhiteSpace&&this._clip(this._createContainerClipPath),this.$emit(o.DRAW,t),this.imageSet||(this.imageSet=!0,this.$emit(o.NEW_IMAGE_DRAWN)),this.rotating=!1},_clipPathFactory:function(t,i,e,a){var n=this.ctx,o="number"==typeof this.imageBorderRadius?this.imageBorderRadius:isNaN(Number(this.imageBorderRadius))?0:Number(this.imageBorderRadius);n.beginPath(),n.moveTo(t+o,i),n.lineTo(t+e-o,i),n.quadraticCurveTo(t+e,i,t+e,i+o),n.lineTo(t+e,i+a-o),n.quadraticCurveTo(t+e,i+a,t+e-o,i+a),n.lineTo(t+o,i+a),n.quadraticCurveTo(t,i+a,t,i+a-o),n.lineTo(t,i+o),n.quadraticCurveTo(t,i,t+o,i),n.closePath()},_createContainerClipPath:function(){var t=this;this._clipPathFactory(0,0,this.outputWidth,this.outputHeight),this.clipPlugins&&this.clipPlugins.length&&this.clipPlugins.forEach(function(i){i(t.ctx,0,0,t.outputWidth,t.outputHeight)})},_clip:function(t){var i=this.ctx;i.save(),i.fillStyle="#fff",i.globalCompositeOperation="destination-in",t(),i.fill(),i.restore()},_applyMetadata:function(){var t=this;if(this.userMetadata){var i=this.userMetadata,a=i.startX,n=i.startY,o=i.scale;e.numberValid(a)&&(this.imgData.startX=a),e.numberValid(n)&&(this.imgData.startY=n),e.numberValid(o)&&(this.scaleRatio=o),this.$nextTick(function(){t.userMetadata=null})}},onDimensionChange:function(){this.img?(this.preventWhiteSpace&&(this.imageSet=!1),this._setSize(),this._placeImage()):this._initialize()}}},l=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,d=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var i={},e=0;e<10;e++)i["_"+String.fromCharCode(e)]=e;if("0123456789"!==Object.getOwnPropertyNames(i).map(function(t){return i[t]}).join(""))return!1;var a={};return"abcdefghijklmnopqrst".split("").forEach(function(t){a[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},a)).join("")}catch(t){return!1}}()?Object.assign:function(i,e){for(var a,n,o=t(i),s=1;s<arguments.length;s++){a=Object(arguments[s]);for(var r in a)u.call(a,r)&&(o[r]=a[r]);if(l){n=l(a);for(var h=0;h<n.length;h++)c.call(a,n[h])&&(o[n[h]]=a[n[h]])}}return o},g={componentName:"croppa"};return{install:function(t,i){i=d({},g,i);var e=Number(t.version.split(".")[0]);if(e<2)throw new Error("vue-croppa supports vue version 2.0 and above. You are using Vue@"+e+". Please upgrade to the latest version of Vue.");var a=i.componentName||"croppa";t.component(a,h)},component:h}});

package.json

 {
   "name": "vue-croppa",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2.0.",
@@ -49,2 +49,3 @@ "main": "dist/vue-croppa.js",
     "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-latest": "^6.24.1",
@@ -58,2 +59,3 @@ "eslint": "^3.19.0",
     "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.2.0",
     "file-loader": "^0.11.2",
@@ -75,3 +77,4 @@ "lodash": "^4.17.4",
     "url-loader": "^0.5.9",
-    "vue": "^2.3.4"
+    "vue": "^2.3.4",
+    "vue-eslint-parser": "^2.0.2"
   },
@@ -78,0 +81,0 @@ "dependencies": {

README.md

@@ -336,2 +336,17 @@ # vue-croppa
 - default: `false` (By default you need to remove the current image to drop a new one)
+
+#### passive
+(**1.2.0**) Switch to passive mode. Croppa in passive mode will sync state with another croppa if they v-model the same object. Also it will not have self-control - user can't manipulate image on passive croppa. This is useful as a preview component.
+
+These states will be synced:
+```js
+['imgData', 'img', 'imgSet', 'originalImage', 'naturalHeight', 'naturalWidth', 'orientation', 'scaleRatio']
+```
+- type: `boolean`
+- default: `false`
+
+#### image-border-radius
+(**1.2.0**) Set rounded corders to image. Note that this has effect on the output image.
+- type: `number` or `string`
+- default: `0`
 ---
@@ -360,2 +375,3 @@
 ```
+
 ##### NOTE: 
@@ -479,2 +495,23 @@ - It is recommended to use a small-sized image as the placeholder image.
 
+#### addClipPlugin(func)
+- Add clip plugin to clip the image. Example:
+```js
+// Add a clip plugin to make a circle clip on image
+onInit(vm) {
+  this.croppa.addClipPlugin(function (ctx, x, y, w, h) {
+    /*
+     * ctx: canvas context
+     * x: start point (top-left corner) x coordination
+     * y: start point (top-left corner) y coordination
+     * w: croppa width
+     * h: croppa height
+    */
+    ctx.beginPath()
+    ctx.arc(x + w / 2, y + h / 2, w / 2, 0, 2 * Math.PI, true)
+    ctx.closePath()
+  })
+},
+```
+- Note: in the plugin function you should always start with `ctx.beginPath()` and end with `ctx.closePath()`.
+
 #### supportDetection()
@@ -601,3 +638,1 @@ - Return an object indicating browser supports. Like this:
 - [ ] Big image rotation optimizations (blob url?).
-- [ ] Doc about blob.
-- [ ] Support globally change default values.

rollup.config.js

@@ -19,3 +19,5 @@ const json = require('rollup-plugin-json')
   entry: 'src/main.js',
-  dest: `${production ? 'dist' : 'docs/src/croppa'}/vue-croppa${min ? '.min' : ''}.js`,
+  dest: `${production ? 'dist' : 'docs/src/croppa'}/vue-croppa${
+    min ? '.min' : ''
+  }.js`,
   format: 'umd',
@@ -29,3 +31,3 @@ moduleName: 'Croppa',
  * 
- * Copyright (c) 2017 zhanziyang
+ * Copyright (c) ${new Date().getFullYear()} zhanziyang
  * Released under the ISC license
@@ -39,14 +41,22 @@ */
     vue({
-      css: function (css, allStyles, compile) {
-        postcss(min ? [autoprefixer, clean] : [autoprefixer]).process(css).then(function (result) {
-          result.warnings().forEach(function (warn) {
-            console.warn(warn.toString())
+      css: function(css, allStyles, compile) {
+        postcss(min ? [autoprefixer, clean] : [autoprefixer])
+          .process(css)
+          .then(function(result) {
+            result.warnings().forEach(function(warn) {
+              console.warn(warn.toString())
+            })
+            fs.writeFile(
+              `${production ? 'dist' : 'docs/src/croppa'}/vue-croppa${
+                min ? '.min' : ''
+              }.css`,
+              result.css,
+              err => {
+                if (err) throw err
+              }
+            )
           })
-          fs.writeFile(`${production ? 'dist' : 'docs/src/croppa'}/vue-croppa${min ? '.min' : ''}.css`, result.css, (err) => {
-            if (err) throw err
-          })
-        })
       }
     }),
-    (production && eslint()),
+    production && eslint(),
     babel({
@@ -57,17 +67,16 @@ presets: [
           {
-            'modules': false
+            modules: false
           }
         ]
       ],
-      plugins: [
-        'external-helpers'
-      ],
+      plugins: ['external-helpers', 'transform-object-rest-spread'],
       exclude: 'node_modules/**'
     }),
-    (min && uglify({
-      output: {
-        comments: /zhanziyang/
-      }
-    }))
+    min &&
+      uglify({
+        output: {
+          comments: /zhanziyang/
+        }
+      })
   ]
-}
+}

src/props.js

 Number.isInteger =
   Number.isInteger ||
-  function(value) {
+  function (value) {
     return (
@@ -21,3 +21,3 @@ typeof value === 'number' &&
     default: 200,
-    validator: function(val) {
+    validator: function (val) {
       return val > 0
@@ -29,3 +29,3 @@ }
     default: 200,
-    validator: function(val) {
+    validator: function (val) {
       return val > 0
@@ -44,3 +44,3 @@ }
     default: 0,
-    validator: function(val) {
+    validator: function (val) {
       return val >= 0
@@ -55,3 +55,3 @@ }
     default: 2,
-    validator: function(val) {
+    validator: function (val) {
       return val > 0
@@ -63,3 +63,3 @@ }
     type: Number,
-    validator: function(val) {
+    validator: function (val) {
       return val > 0
@@ -72,3 +72,3 @@ }
     default: 0,
-    validator: function(val) {
+    validator: function (val) {
       return val >= 0
@@ -101,3 +101,3 @@ }
     default: 'cover',
-    validator: function(val) {
+    validator: function (val) {
       return val === 'cover' || val === 'contain' || val === 'natural'
@@ -109,3 +109,3 @@ }
     default: 'center',
-    validator: function(val) {
+    validator: function (val) {
       var valids = ['center', 'top', 'bottom', 'left', 'right']
@@ -129,3 +129,8 @@ return (
   },
-  replaceDrop: Boolean
+  replaceDrop: Boolean,
+  passive: Boolean,
+  imageBorderRadius: {
+    type: [Number, String],
+    default: 0
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

169093

increased by8.25%

Lines of code

2262

increased by7.46%

Number of lines in readme file

635

increased by5.83%

Worsened metrics

Dev dependency count

31

increased by10.71%

No dependency changes