vue-croppa - npm Package Compare versions

Comparing version 0.3.5 to 1.0.0

dist/vue-croppa.js

 /*
- * vue-croppa v0.3.5
+ * vue-croppa v1.0.0
  * https://github.com/zhanziyang/vue-croppa
@@ -311,2 +311,7 @@ *
 
+var initialImageType = String;
+if (window && window.Image) {
+  initialImageType = [String, Image];
+}
+
 var props = {
@@ -359,6 +364,3 @@ value: Object,
   },
-  accept: {
-    type: String,
-    default: '.jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.tiff'
-  },
+  accept: String,
   fileSizeLimit: {
@@ -391,3 +393,3 @@ type: Number,
   },
-  initialImage: [String, HTMLImageElement],
+  initialImage: initialImageType,
   initialSize: {
@@ -404,6 +406,9 @@ type: String,
     validator: function validator(val) {
-      var valids = ['center', 'top', 'bottom', 'left', 'right', 'top left', 'top right', 'bottom left', 'bottom right', 'left top', 'right top', 'left bottom', 'right bottom'];
-      return valids.indexOf(val) >= 0 || /^-?\d+% -?\d+%$/.test(val);
+      var valids = ['center', 'top', 'bottom', 'left', 'right'];
+      return val.split(' ').every(function (word) {
+        return valids.indexOf(word) >= 0;
+      }) || /^-?\d+% -?\d+%$/.test(val);
     }
-  }
+  },
+  inputAttrs: Object
 };
@@ -417,2 +422,3 @@
   NEW_IMAGE: 'new-image',
+  NEW_IMAGE_DRAWN: 'new-image-drawn',
   IMAGE_REMOVE_EVENT: 'image-remove',
@@ -436,3 +442,3 @@ MOVE_EVENT: 'move',
 var DEFAULT_PLACEHOLDER_TAKEUP = 2 / 3; // Placeholder text by default takes up this amount of times of canvas width.
-var PINCH_ACCELERATION = 2; // The amount of times by which the pinching is more sensitive than the scolling
+var PINCH_ACCELERATION = 1; // The amount of times by which the pinching is more sensitive than the scolling
 // const DEBUG = false
@@ -442,39 +448,41 @@
     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) {
-          $event.stopPropagation();$event.preventDefault();_vm.handleDragEnter($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handleDragEnter($event);
         }, "dragleave": function dragleave($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handleDragLeave($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handleDragLeave($event);
         }, "dragover": function dragover($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handleDragOver($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handleDragOver($event);
         }, "drop": function drop($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handleDrop($event);
-        } } }, [_c('input', { 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 } }), _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);
+          $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)), _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);
         }, "touchstart": function touchstart($event) {
-          $event.stopPropagation();_vm.handlePointerStart($event);
+          $event.stopPropagation();_vm._handlePointerStart($event);
         }, "mousedown": function mousedown($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handlePointerStart($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handlePointerStart($event);
         }, "pointerstart": function pointerstart($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handlePointerStart($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handlePointerStart($event);
         }, "touchend": function touchend($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handlePointerEnd($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handlePointerEnd($event);
         }, "touchcancel": function touchcancel($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handlePointerEnd($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handlePointerEnd($event);
         }, "mouseup": function mouseup($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handlePointerEnd($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handlePointerEnd($event);
         }, "pointerend": function pointerend($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handlePointerEnd($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handlePointerEnd($event);
         }, "pointercancel": function pointercancel($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handlePointerEnd($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handlePointerEnd($event);
         }, "touchmove": function touchmove($event) {
-          $event.stopPropagation();_vm.handlePointerMove($event);
+          $event.stopPropagation();_vm._handlePointerMove($event);
         }, "mousemove": function mousemove($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handlePointerMove($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handlePointerMove($event);
         }, "pointermove": function pointermove($event) {
-          $event.stopPropagation();$event.preventDefault();_vm.handlePointerMove($event);
+          $event.stopPropagation();$event.preventDefault();_vm._handlePointerMove($event);
+        }, "pointerleave": function pointerleave($event) {
+          $event.stopPropagation();$event.preventDefault();_vm._handlePointerLeave($event);
         }, "DOMMouseScroll": function DOMMouseScroll($event) {
-          $event.stopPropagation();_vm.handleWheel($event);
+          $event.stopPropagation();_vm._handleWheel($event);
         }, "wheel": function wheel($event) {
-          $event.stopPropagation();_vm.handleWheel($event);
+          $event.stopPropagation();_vm._handleWheel($event);
         }, "mousewheel": function mousewheel($event) {
-          $event.stopPropagation();_vm.handleWheel($event);
+          $event.stopPropagation();_vm._handleWheel($event);
         } } }), _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()]);
@@ -484,3 +492,3 @@ }, staticRenderFns: [],
     prop: 'value',
-    event: 'init'
+    event: events.INIT_EVENT
   },
@@ -492,3 +500,2 @@
     return {
-      instance: null,
       canvas: null,
@@ -500,6 +507,11 @@ ctx: null,
       lastMovingCoord: null,
-      imgData: {},
-      dataUrl: '',
+      imgData: {
+        width: 0,
+        height: 0,
+        startX: 0,
+        startY: 0
+      },
       fileDraggedOver: false,
       tabStart: 0,
+      scrolling: false,
       pinching: false,
@@ -515,3 +527,4 @@ pinchDistance: 0,
       userMetadata: null,
-      imageSet: false
+      imageSet: false,
+      currentPointerCoord: null
     };
@@ -522,10 +535,13 @@ },
   computed: {
-    realWidth: function realWidth() {
+    outputWidth: function outputWidth() {
       return this.width * this.quality;
     },
-    realHeight: function realHeight() {
+    outputHeight: function outputHeight() {
       return this.height * this.quality;
     },
-    realPlaceholderFontSize: function realPlaceholderFontSize() {
+    computedPlaceholderFontSize: function computedPlaceholderFontSize() {
       return this.placeholderFontSize * this.quality;
+    },
+    aspectRatio: function aspectRatio() {
+      return this.naturalWidth / this.naturalHeight;
     }
@@ -535,3 +551,3 @@ },
   mounted: function mounted() {
-    this.init();
+    this._init();
     u.rAFPolyfill();
@@ -548,8 +564,5 @@ u.toBlobPolyfill();
   watch: {
-    value: function value(val) {
-      this.instance = val;
-    },
-    realWidth: function realWidth() {
-      if (!this.img) {
-        this.init();
+    outputWidth: function outputWidth() {
+      if (!this.hasImage()) {
+        this._init();
       } else {
@@ -559,9 +572,9 @@ if (this.preventWhiteSpace) {
         }
-        this.setSize();
-        this.placeImage();
+        this._setSize();
+        this._placeImage();
       }
     },
-    realHeight: function realHeight() {
-      if (!this.img) {
-        this.init();
+    outputHeight: function outputHeight() {
+      if (!this.hasImage()) {
+        this._init();
       } else {
@@ -571,33 +584,72 @@ if (this.preventWhiteSpace) {
         }
-        this.setSize();
-        this.placeImage();
+        this._setSize();
+        this._placeImage();
       }
     },
     canvasColor: function canvasColor() {
-      if (!this.img) {
-        this.init();
+      if (!this.hasImage()) {
+        this._init();
       } else {
-        this.draw();
+        this._draw();
       }
     },
     placeholder: function placeholder() {
-      if (!this.img) {
-        this.init();
+      if (!this.hasImage()) {
+        this._init();
       }
     },
     placeholderColor: function placeholderColor() {
-      if (!this.img) {
-        this.init();
+      if (!this.hasImage()) {
+        this._init();
       }
     },
-    realPlaceholderFontSize: function realPlaceholderFontSize() {
-      if (!this.img) {
-        this.init();
+    computedPlaceholderFontSize: function computedPlaceholderFontSize() {
+      if (!this.hasImage()) {
+        this._init();
       }
     },
-    preventWhiteSpace: function preventWhiteSpace() {
-      if (this.preventWhiteSpace) {
+    preventWhiteSpace: function preventWhiteSpace(val) {
+      if (val) {
         this.imageSet = false;
       }
-      this.placeImage();
+      this._placeImage();
+    },
+    scaleRatio: function scaleRatio(val, oldVal) {
+      if (!this.hasImage()) return;
+      if (!u.numberValid(val)) return;
+
+      var x = 1;
+      if (u.numberValid(oldVal) && oldVal !== 0) {
+        x = val / oldVal;
+      }
+      var pos = this.currentPointerCoord || {
+        x: this.imgData.startX + this.imgData.width / 2,
+        y: this.imgData.startY + this.imgData.height / 2
+      };
+      this.imgData.width = this.naturalWidth * val;
+      this.imgData.height = this.naturalHeight * val;
+
+      if (this.preventWhiteSpace) {
+        this._preventZoomingToWhiteSpace();
+      }
+
+      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 (!u.numberValid(val)) return;
+      this.scaleRatio = val / this.naturalWidth;
+      if (this.hasImage()) {
+        if (Math.abs(val - oldVal) > val * (1 / 100000)) {
+          this.$emit(events.ZOOM_EVENT);
+          this._draw();
+        }
+      }
+    },
+    'imgData.height': function imgDataHeight(val) {
+      if (!u.numberValid(val)) return;
+      this.scaleRatio = val / this.naturalHeight;
     }
@@ -607,116 +659,140 @@ },
   methods: {
-    init: function init() {
+    getCanvas: function getCanvas() {
+      return this.canvas;
+    },
+    getContext: function getContext() {
+      return this.ctx;
+    },
+    getChosenFile: function getChosenFile() {
+      return this.$refs.fileInput.files[0];
+    },
+    move: function move(offset) {
+      if (!offset) return;
+      var oldX = this.imgData.startX;
+      var oldY = this.imgData.startY;
+      this.imgData.startX += offset.x;
+      this.imgData.startY += offset.y;
+      if (this.preventWhiteSpace) {
+        this._preventMovingToWhiteSpace();
+      }
+      if (this.imgData.startX !== oldX || this.imgData.startY !== oldY) {
+        this.$emit(events.MOVE_EVENT);
+        this._draw();
+      }
+    },
+    moveUpwards: function moveUpwards() {
+      var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+
+      this.move({ x: 0, y: -amount });
+    },
+    moveDownwards: function moveDownwards() {
+      var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+
+      this.move({ x: 0, y: amount });
+    },
+    moveLeftwards: function moveLeftwards() {
+      var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+
+      this.move({ x: -amount, y: 0 });
+    },
+    moveRightwards: function moveRightwards() {
+      var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+
+      this.move({ x: amount, y: 0 });
+    },
+    zoom: function zoom() {
+      var zoomIn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      var acceleration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+
+      var realSpeed = this.zoomSpeed * acceleration;
+      var speed = this.outputWidth * PCT_PER_ZOOM * realSpeed;
+      var x = 1;
+      if (zoomIn) {
+        x = 1 + speed;
+      } else if (this.imgData.width > MIN_WIDTH) {
+        x = 1 - speed;
+      }
+
+      this.scaleRatio *= x;
+    },
+    zoomIn: function zoomIn() {
+      this.zoom(true);
+    },
+    zoomOut: function zoomOut() {
+      this.zoom(false);
+    },
+    rotate: function rotate() {
+      var step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+
+      if (this.disableRotation || this.disabled) return;
+      step = parseInt(step);
+      if (isNaN(step) || step > 3 || step < -3) {
+        console.warn('Invalid argument for rotate() method. It should one of the integers from -3 to 3.');
+        step = 1;
+      }
+      this._rotateByStep(step);
+    },
+    flipX: function flipX() {
+      if (this.disableRotation || this.disabled) return;
+      this._setOrientation(2);
+    },
+    flipY: function flipY() {
+      if (this.disableRotation || this.disabled) return;
+      this._setOrientation(4);
+    },
+    refresh: function refresh() {
+      this.$nextTick(this._init);
+    },
+    hasImage: function hasImage() {
+      return !!this.imageSet;
+    },
+    applyMetadata: function applyMetadata(metadata) {
+      if (!metadata || !this.hasImage()) return;
+      this.userMetadata = metadata;
+      var ori = metadata.orientation || this.orientation || 1;
+      this._setOrientation(ori, true);
+    },
+    generateDataUrl: function generateDataUrl(type, compressionRate) {
+      if (!this.hasImage()) return '';
+      return this.canvas.toDataURL(type, compressionRate);
+    },
+    generateBlob: function generateBlob(callback, mimeType, qualityArgument) {
+      if (!this.hasImage()) return null;
+      this.canvas.toBlob(callback, mimeType, qualityArgument);
+    },
+    promisedBlob: function promisedBlob() {
       var _this = this;
 
-      this.canvas = this.$refs.canvas;
-      this.setSize();
-      this.canvas.style.backgroundColor = !this.canvasColor || this.canvasColor == 'default' ? 'transparent' : typeof this.canvasColor === 'string' ? this.canvasColor : '';
-      this.ctx = this.canvas.getContext('2d');
-      this.originalImage = null;
-      this.img = null;
-      this.setInitial();
-      this.$emit(events.INIT_EVENT, {
-        getCanvas: function getCanvas() {
-          return _this.canvas;
-        },
-        getContext: function getContext() {
-          return _this.ctx;
-        },
-        getChosenFile: function getChosenFile() {
-          return _this.$refs.fileInput.files[0];
-        },
-        getActualImageSize: function getActualImageSize() {
-          return {
-            width: _this.realWidth,
-            height: _this.realHeight
-          };
-        },
-        moveUpwards: function moveUpwards(amount) {
-          _this.move({ x: 0, y: -amount });
-        },
-        moveDownwards: function moveDownwards(amount) {
-          _this.move({ x: 0, y: amount });
-        },
-        moveLeftwards: function moveLeftwards(amount) {
-          _this.move({ x: -amount, y: 0 });
-        },
-        moveRightwards: function moveRightwards(amount) {
-          _this.move({ x: amount, y: 0 });
-        },
-        zoomIn: function zoomIn() {
-          _this.zoom(true);
-        },
-        zoomOut: function zoomOut() {
-          _this.zoom(false);
-        },
-        rotate: function rotate() {
-          var step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-          if (_this.disableRotation || _this.disabled) return;
-          step = parseInt(step);
-          if (isNaN(step) || step > 3 || step < -3) {
-            console.warn('Invalid argument for rotate() method. It should one of the integers from -3 to 3.');
-            step = 1;
-          }
-          _this.rotateByStep(step);
-        },
-        flipX: function flipX() {
-          if (_this.disableRotation || _this.disabled) return;
-          _this.rotate(2);
-        },
-        flipY: function flipY() {
-          if (_this.disableRotation || _this.disabled) return;
-          _this.rotate(4);
-        },
-        refresh: function refresh() {
-          _this.$nextTick(_this.init);
-        },
-        hasImage: function hasImage() {
-          return !!_this.img;
-        },
-        remove: this.remove,
-        chooseFile: this.chooseFile,
-        generateDataUrl: this.generateDataUrl,
-        generateBlob: this.generateBlob,
-        promisedBlob: this.promisedBlob,
-        supportDetection: this.supportDetection,
-        getMetadata: this.getMetadata,
-        applyMetadata: function applyMetadata(metadata) {
-          if (!metadata || !_this.img) return;
-          _this.userMetadata = metadata;
-          var ori = metadata.orientation || _this.orientation || 1;
-          _this.rotate(ori, true);
+      if (typeof Promise == 'undefined') {
+        console.warn('No Promise support. Please add Promise polyfill if you want to use this method.');
+        return;
+      }
+      return new Promise(function (resolve, reject) {
+        try {
+          _this.generateBlob(function (blob) {
+            resolve(blob);
+          }, args);
+        } catch (err) {
+          reject(err);
         }
       });
     },
-    setSize: function setSize() {
-      this.canvas.width = this.realWidth;
-      this.canvas.height = this.realHeight;
-      this.canvas.style.width = this.width + 'px';
-      this.canvas.style.height = this.height + 'px';
+    getMetadata: function getMetadata() {
+      if (!this.hasImage()) return {};
+      var _imgData = this.imgData,
+          startX = _imgData.startX,
+          startY = _imgData.startY;
+
+
+      return {
+        startX: startX,
+        startY: startY,
+        scale: this.scaleRatio,
+        orientation: this.orientation
+      };
     },
-    rotateByStep: function rotateByStep(step) {
-      var orientation = 1;
-      switch (step) {
-        case 1:
-          orientation = 6;
-          break;
-        case 2:
-          orientation = 3;
-          break;
-        case 3:
-          orientation = 8;
-          break;
-        case -1:
-          orientation = 8;
-          break;
-        case -2:
-          orientation = 3;
-          break;
-        case -3:
-          orientation = 6;
-          break;
-      }
-      this.rotate(orientation);
-    },
     supportDetection: function supportDetection() {
@@ -729,14 +805,17 @@ var div = document.createElement('div');
     },
+    chooseFile: function chooseFile() {
+      this.$refs.fileInput.click();
+    },
     remove: function remove() {
       var ctx = this.ctx;
-      this.paintBackground();
+      this._paintBackground();
 
-      this.setImagePlaceholder();
+      this._setImagePlaceholder();
       ctx.textBaseline = 'middle';
       ctx.textAlign = 'center';
-      var defaultFontSize = this.realWidth * DEFAULT_PLACEHOLDER_TAKEUP / this.placeholder.length;
-      var fontSize = !this.realPlaceholderFontSize || this.realPlaceholderFontSize == 0 ? defaultFontSize : this.realPlaceholderFontSize;
+      var defaultFontSize = this.outputWidth * DEFAULT_PLACEHOLDER_TAKEUP / this.placeholder.length;
+      var fontSize = !this.computedPlaceholderFontSize || this.computedPlaceholderFontSize == 0 ? defaultFontSize : this.computedPlaceholderFontSize;
       ctx.font = fontSize + 'px sans-serif';
       ctx.fillStyle = !this.placeholderColor || this.placeholderColor == 'default' ? '#606060' : this.placeholderColor;
-      ctx.fillText(this.placeholder, this.realWidth / 2, this.realHeight / 2);
+      ctx.fillText(this.placeholder, this.outputWidth / 2, this.outputHeight / 2);
 
@@ -747,3 +826,8 @@ var hadImage = this.img != null;
       this.$refs.fileInput.value = '';
-      this.imgData = {};
+      this.imgData = {
+        width: 0,
+        height: 0,
+        startX: 0,
+        startY: 0
+      };
       this.orientation = 1;
@@ -758,3 +842,44 @@ this.scaleRatio = null;
     },
-    setImagePlaceholder: function setImagePlaceholder() {
+    _init: function _init() {
+      this.canvas = this.$refs.canvas;
+      this._setSize();
+      this.canvas.style.backgroundColor = !this.canvasColor || this.canvasColor == 'default' ? 'transparent' : typeof this.canvasColor === 'string' ? this.canvasColor : '';
+      this.ctx = this.canvas.getContext('2d');
+      this.originalImage = null;
+      this.img = null;
+      this.imageSet = false;
+      this._setInitial();
+      this.$emit(events.INIT_EVENT, this);
+    },
+    _setSize: function _setSize() {
+      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 _rotateByStep(step) {
+      var orientation = 1;
+      switch (step) {
+        case 1:
+          orientation = 6;
+          break;
+        case 2:
+          orientation = 3;
+          break;
+        case 3:
+          orientation = 8;
+          break;
+        case -1:
+          orientation = 8;
+          break;
+        case -2:
+          orientation = 3;
+          break;
+        case -3:
+          orientation = 6;
+          break;
+      }
+      this._setOrientation(orientation);
+    },
+    _setImagePlaceholder: function _setImagePlaceholder() {
       var _this2 = this;
@@ -776,3 +901,3 @@
       var onLoad = function onLoad() {
-        _this2.ctx.drawImage(img, 0, 0, _this2.realWidth, _this2.realHeight);
+        _this2.ctx.drawImage(img, 0, 0, _this2.outputWidth, _this2.outputHeight);
       };
@@ -786,3 +911,3 @@
     },
-    setInitial: function setInitial() {
+    _setInitial: function _setInitial() {
       var _this3 = this;
@@ -816,8 +941,8 @@
       if (u.imageLoaded(img)) {
+        this.$emit(events.INITIAL_IMAGE_LOADED_EVENT);
         this._onload(img, +img.dataset['exifOrientation']);
-        this.$emit(events.INITIAL_IMAGE_LOADED_EVENT);
       } else {
         img.onload = function () {
+          _this3.$emit(events.INITIAL_IMAGE_LOADED_EVENT);
           _this3._onload(img, +img.dataset['exifOrientation']);
-          _this3.$emit(events.INITIAL_IMAGE_LOADED_EVENT);
         };
@@ -840,13 +965,10 @@
 
-      this.rotate(orientation);
+      this._setOrientation(orientation);
     },
-    chooseFile: function chooseFile() {
-      this.$refs.fileInput.click();
-    },
-    handleClick: function handleClick() {
-      if (!this.img && !this.disableClickToChoose && !this.disabled && !this.supportTouch) {
+    _handleClick: function _handleClick() {
+      if (!this.hasImage() && !this.disableClickToChoose && !this.disabled && !this.supportTouch) {
         this.chooseFile();
       }
     },
-    handleInputChange: function handleInputChange() {
+    _handleInputChange: function _handleInputChange() {
       var input = this.$refs.fileInput;
@@ -856,13 +978,13 @@ if (!input.files.length) return;
       var file = input.files[0];
-      this.onNewFileIn(file);
+      this._onNewFileIn(file);
     },
-    onNewFileIn: function onNewFileIn(file) {
+    _onNewFileIn: function _onNewFileIn(file) {
       var _this4 = this;
 
       this.$emit(events.FILE_CHOOSE_EVENT, file);
-      if (!this.fileSizeIsValid(file)) {
+      if (!this._fileSizeIsValid(file)) {
         this.$emit(events.FILE_SIZE_EXCEED_EVENT, file);
         throw new Error('File size exceeds limit which is ' + this.fileSizeLimit + ' bytes.');
       }
-      if (!this.fileTypeIsValid(file)) {
+      if (!this._fileTypeIsValid(file)) {
         this.$emit(events.FILE_TYPE_MISMATCH_EVENT, file);
@@ -876,3 +998,6 @@ var type = file.type || file.name.toLowerCase().split('.').pop();
           var fileData = e.target.result;
-          var orientation = u.getFileOrientation(u.base64ToArrayBuffer(fileData));
+          var orientation = 1;
+          try {
+            orientation = u.getFileOrientation(u.base64ToArrayBuffer(fileData));
+          } catch (err) {}
           if (orientation < 1) orientation = 1;
@@ -889,3 +1014,3 @@ var img = new Image();
     },
-    fileSizeIsValid: function fileSizeIsValid(file) {
+    _fileSizeIsValid: function _fileSizeIsValid(file) {
       if (!file) return false;
@@ -896,4 +1021,5 @@ if (!this.fileSizeLimit || this.fileSizeLimit == 0) return true;
     },
-    fileTypeIsValid: function fileTypeIsValid(file) {
-      var accept = this.accept || 'image/*';
+    _fileTypeIsValid: function _fileTypeIsValid(file) {
+      if (!this.accepct) return true;
+      var accept = this.accept;
       var baseMimetype = accept.replace(/\/.*$/, '');
@@ -918,3 +1044,4 @@ var types = accept.split(',');
     },
-    placeImage: function placeImage(applyMetadata) {
+    _placeImage: function _placeImage(applyMetadata) {
+      if (!this.img) return;
       var imgData = this.imgData;
@@ -928,17 +1055,13 @@
 
-      if (!this.imageSet) {
+      if (this.preventWhiteSpace) {
+        this._aspectFill();
+      } else if (!this.imageSet) {
         if (this.initialSize == 'contain') {
-          this.aspectFit();
+          this._aspectFit();
         } else if (this.initialSize == 'natural') {
-          this.naturalSize();
+          this._naturalSize();
         } else {
-          this.aspectFill();
+          this._aspectFill();
         }
-      } else if (u.numberValid(this.scaleRatio)) {
-        imgData.width = this.naturalWidth * this.scaleRatio;
-        imgData.height = this.naturalHeight * this.scaleRatio;
-      } else {
-        this.aspectFill();
       }
-      this.scaleRatio = imgData.width / this.naturalWidth;
 
@@ -949,3 +1072,3 @@ if (!this.imageSet) {
         } else if (/bottom/.test(this.initialPosition)) {
-          imgData.startY = this.realHeight - imgData.height;
+          imgData.startY = this.outputHeight - imgData.height;
         }
@@ -956,3 +1079,3 @@
         } else if (/right/.test(this.initialPosition)) {
-          imgData.startX = this.realWidth - imgData.width;
+          imgData.startX = this.outputWidth - imgData.width;
         }
@@ -964,58 +1087,54 @@
           var y = +result[2] / 100;
-          imgData.startX = x * (this.realWidth - imgData.width);
-          imgData.startY = y * (this.realHeight - imgData.height);
+          imgData.startX = x * (this.outputWidth - imgData.width);
+          imgData.startY = y * (this.outputHeight - imgData.height);
         }
       }
 
-      applyMetadata && this.applyMetadata();
+      applyMetadata && this._applyMetadata();
 
-      if (this.preventWhiteSpace) {
-        this.preventMovingToWhiteSpace();
+      if (applyMetadata && this.preventWhiteSpace) {
+        this.zoom(false, 0);
+      } else {
+        this.move({ x: 0, y: 0 });
+        this._draw();
       }
-
-      if (!this.imageSet) {
-        this.imageSet = true;
-      }
-
-      this.draw();
     },
-    aspectFill: function aspectFill() {
+    _aspectFill: function _aspectFill() {
       var imgWidth = this.naturalWidth;
       var imgHeight = this.naturalHeight;
-      var imgRatio = imgHeight / imgWidth;
-      var canvasRatio = this.realHeight / this.realWidth;
+      var canvasRatio = this.outputWidth / this.outputHeight;
       var scaleRatio = void 0;
-      if (imgRatio < canvasRatio) {
-        scaleRatio = imgHeight / this.realHeight;
+
+      if (this.aspectRatio > canvasRatio) {
+        scaleRatio = imgHeight / this.outputHeight;
         this.imgData.width = imgWidth / scaleRatio;
-        this.imgData.height = this.realHeight;
-        this.imgData.startX = -(this.imgData.width - this.realWidth) / 2;
+        this.imgData.height = this.outputHeight;
+        this.imgData.startX = -(this.imgData.width - this.outputWidth) / 2;
         this.imgData.startY = 0;
       } else {
-        scaleRatio = imgWidth / this.realWidth;
+        scaleRatio = imgWidth / this.outputWidth;
         this.imgData.height = imgHeight / scaleRatio;
-        this.imgData.width = this.realWidth;
-        this.imgData.startY = -(this.imgData.height - this.realHeight) / 2;
+        this.imgData.width = this.outputWidth;
+        this.imgData.startY = -(this.imgData.height - this.outputHeight) / 2;
         this.imgData.startX = 0;
       }
     },
-    aspectFit: function aspectFit() {
+    _aspectFit: function _aspectFit() {
       var imgWidth = this.naturalWidth;
       var imgHeight = this.naturalHeight;
-      var imgRatio = imgHeight / imgWidth;
-      var canvasRatio = this.realHeight / this.realWidth;
+      var canvasRatio = this.outputWidth / this.outputHeight;
       var scaleRatio = void 0;
-      if (imgRatio < canvasRatio) {
-        scaleRatio = imgWidth / this.realWidth;
+      if (this.aspectRatio > canvasRatio) {
+        scaleRatio = imgWidth / this.outputWidth;
         this.imgData.height = imgHeight / scaleRatio;
-        this.imgData.width = this.realWidth;
-        this.imgData.startY = -(this.imgData.height - this.realHeight) / 2;
+        this.imgData.width = this.outputWidth;
+        this.imgData.startY = -(this.imgData.height - this.outputHeight) / 2;
       } else {
-        scaleRatio = imgHeight / this.realHeight;
+        scaleRatio = imgHeight / this.outputHeight;
         this.imgData.width = imgWidth / scaleRatio;
-        this.imgData.height = this.realHeight;
-        this.imgData.startX = -(this.imgData.width - this.realWidth) / 2;
+        this.imgData.height = this.outputHeight;
+        this.imgData.startX = -(this.imgData.width - this.outputWidth) / 2;
       }
     },
-    naturalSize: function naturalSize() {
+    _naturalSize: function _naturalSize() {
       var imgWidth = this.naturalWidth;
@@ -1025,6 +1144,6 @@ var imgHeight = this.naturalHeight;
       this.imgData.height = imgHeight;
-      this.imgData.startX = -(this.imgData.width - this.realWidth) / 2;
-      this.imgData.startY = -(this.imgData.height - this.realHeight) / 2;
+      this.imgData.startX = -(this.imgData.width - this.outputWidth) / 2;
+      this.imgData.startY = -(this.imgData.height - this.outputHeight) / 2;
     },
-    handlePointerStart: function handlePointerStart(evt) {
+    _handlePointerStart: function _handlePointerStart(evt) {
       this.supportTouch = true;
@@ -1037,3 +1156,3 @@ this.pointerMoved = false;
       // simulate click with touch on mobile devices
-      if (!this.img && !this.disableClickToChoose) {
+      if (!this.hasImage() && !this.disableClickToChoose) {
         this.tabStart = new Date().valueOf();
@@ -1061,6 +1180,6 @@ return;
         var e = cancelEvents[i];
-        document.addEventListener(e, this.handlePointerEnd);
+        document.addEventListener(e, this._handlePointerEnd);
       }
     },
-    handlePointerEnd: function handlePointerEnd(evt) {
+    _handlePointerEnd: function _handlePointerEnd(evt) {
       var pointerMoveDistance = 0;
@@ -1072,3 +1191,3 @@ if (this.pointerStartCoord) {
       if (this.disabled) return;
-      if (!this.img && !this.disableClickToChoose) {
+      if (!this.hasImage() && !this.disableClickToChoose) {
         var tabEnd = new Date().valueOf();
@@ -1089,6 +1208,9 @@ if (pointerMoveDistance < CLICK_MOVE_THRESHOLD && tabEnd - this.tabStart < MIN_MS_PER_CLICK && this.supportTouch) {
     },
-    handlePointerMove: function handlePointerMove(evt) {
+    _handlePointerMove: function _handlePointerMove(evt) {
       this.pointerMoved = true;
+      if (!this.hasImage()) return;
+      var coord = u.getPointerCoords(evt, this);
+      this.currentPointerCoord = coord;
 
-      if (this.disabled || this.disableDragToMove || !this.img) return;
+      if (this.disabled || this.disableDragToMove) return;
 
@@ -1098,3 +1220,2 @@ evt.preventDefault();
         if (!this.dragging) return;
-        var coord = u.getPointerCoords(evt, this);
         if (this.lastMovingCoord) {
@@ -1113,26 +1234,34 @@ this.move({
         var delta = distance - this.pinchDistance;
-        this.zoom(delta > 0, null, PINCH_ACCELERATION);
+        this.zoom(delta > 0, PINCH_ACCELERATION);
         this.pinchDistance = distance;
       }
     },
-    handleWheel: function handleWheel(evt) {
-      if (this.disabled || this.disableScrollToZoom || !this.img) return;
+    _handlePointerLeave: function _handlePointerLeave() {
+      this.currentPointerCoord = null;
+    },
+    _handleWheel: function _handleWheel(evt) {
+      var _this5 = this;
+
+      if (this.disabled || this.disableScrollToZoom || !this.hasImage()) return;
       evt.preventDefault();
-      var coord = u.getPointerCoords(evt, this);
+      this.scrolling = true;
       if (evt.wheelDelta < 0 || evt.deltaY > 0 || evt.detail > 0) {
-        this.zoom(this.reverseScrollToZoom, coord);
+        this.zoom(this.reverseScrollToZoom);
       } else if (evt.wheelDelta > 0 || evt.deltaY < 0 || evt.detail < 0) {
-        this.zoom(!this.reverseScrollToZoom, coord);
+        this.zoom(!this.reverseScrollToZoom);
       }
+      this.$nextTick(function () {
+        _this5.scrolling = false;
+      });
     },
-    handleDragEnter: function handleDragEnter(evt) {
-      if (this.disabled || this.disableDragAndDrop || this.img || !u.eventHasFile(evt)) return;
+    _handleDragEnter: function _handleDragEnter(evt) {
+      if (this.disabled || this.disableDragAndDrop || this.hasImage() || !u.eventHasFile(evt)) return;
       this.fileDraggedOver = true;
     },
-    handleDragLeave: function handleDragLeave(evt) {
+    _handleDragLeave: function _handleDragLeave(evt) {
       if (!this.fileDraggedOver || !u.eventHasFile(evt)) return;
       this.fileDraggedOver = false;
     },
-    handleDragOver: function handleDragOver(evt) {},
-    handleDrop: function handleDrop(evt) {
+    _handleDragOver: function _handleDragOver(evt) {},
+    _handleDrop: function _handleDrop(evt) {
       if (!this.fileDraggedOver || !u.eventHasFile(evt)) return;
@@ -1157,20 +1286,6 @@ this.fileDraggedOver = false;
       if (file) {
-        this.onNewFileIn(file);
+        this._onNewFileIn(file);
       }
     },
-    move: function move(offset) {
-      if (!offset) return;
-      var oldX = this.imgData.startX;
-      var oldY = this.imgData.startY;
-      this.imgData.startX += offset.x;
-      this.imgData.startY += offset.y;
-      if (this.preventWhiteSpace) {
-        this.preventMovingToWhiteSpace();
-      }
-      if (this.imgData.startX !== oldX || this.imgData.startY !== oldY) {
-        this.$emit(events.MOVE_EVENT);
-        this.draw();
-      }
-    },
-    preventMovingToWhiteSpace: function preventMovingToWhiteSpace() {
+    _preventMovingToWhiteSpace: function _preventMovingToWhiteSpace() {
       if (this.imgData.startX > 0) {
@@ -1182,73 +1297,34 @@ this.imgData.startX = 0;
       }
-      if (this.realWidth - this.imgData.startX > this.imgData.width) {
-        this.imgData.startX = -(this.imgData.width - this.realWidth);
+      if (this.outputWidth - this.imgData.startX > this.imgData.width) {
+        this.imgData.startX = -(this.imgData.width - this.outputWidth);
       }
-      if (this.realHeight - this.imgData.startY > this.imgData.height) {
-        this.imgData.startY = -(this.imgData.height - this.realHeight);
+      if (this.outputHeight - this.imgData.startY > this.imgData.height) {
+        this.imgData.startY = -(this.imgData.height - this.outputHeight);
       }
     },
-    zoom: function zoom(zoomIn, pos) {
-      var innerAcceleration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-
-      pos = pos || {
-        x: this.imgData.startX + this.imgData.width / 2,
-        y: this.imgData.startY + this.imgData.height / 2
-      };
-      var realSpeed = this.zoomSpeed * innerAcceleration;
-      var speed = this.realWidth * PCT_PER_ZOOM * realSpeed;
-      var x = 1;
-      if (zoomIn) {
-        x = 1 + speed;
-      } else if (this.imgData.width > MIN_WIDTH) {
-        x = 1 - speed;
+    _preventZoomingToWhiteSpace: function _preventZoomingToWhiteSpace() {
+      if (this.imgData.width < this.outputWidth) {
+        this.scaleRatio = this.outputWidth / this.naturalWidth;
       }
 
-      var oldWidth = this.imgData.width;
-      var oldHeight = this.imgData.height;
-
-      this.imgData.width = this.imgData.width * x;
-      this.imgData.height = this.imgData.height * x;
-
-      if (this.preventWhiteSpace) {
-        if (this.imgData.width < this.realWidth) {
-          var _x = this.realWidth / this.imgData.width;
-          this.imgData.width = this.realWidth;
-          this.imgData.height = this.imgData.height * _x;
-        }
-
-        if (this.imgData.height < this.realHeight) {
-          var _x5 = this.realHeight / this.imgData.height;
-          this.imgData.height = this.realHeight;
-          this.imgData.width = this.imgData.width * _x5;
-        }
+      if (this.imgData.height < this.outputHeight) {
+        this.scaleRatio = this.outputHeight / this.naturalHeight;
       }
-      if (oldWidth.toFixed(2) !== this.imgData.width.toFixed(2) || oldHeight.toFixed(2) !== this.imgData.height.toFixed(2)) {
-        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) {
-          this.preventMovingToWhiteSpace();
-        }
-        this.$emit(events.ZOOM_EVENT);
-        this.draw();
-        this.scaleRatio = this.imgData.width / this.naturalWidth;
-      }
     },
-    rotate: function rotate() {
-      var _this5 = this;
+    _setOrientation: function _setOrientation() {
+      var _this6 = this;
 
       var orientation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;
-      var useOriginal = arguments[1];
+      var applyMetadata = arguments[1];
 
       if (!this.img) return;
+      var useOriginal = applyMetadata && this.userMetadata.orientation !== this.orientation;
       if (orientation > 1 || useOriginal) {
         var _img = u.getRotatedImage(useOriginal ? this.originalImage : this.img, orientation);
         _img.onload = function () {
-          _this5.img = _img;
-          _this5.placeImage(useOriginal);
+          _this6.img = _img;
+          _this6._placeImage(applyMetadata);
         };
       } else {
-        this.placeImage();
+        this._placeImage(applyMetadata);
       }
@@ -1279,73 +1355,38 @@
     },
-    paintBackground: function paintBackground() {
+    _paintBackground: function _paintBackground() {
       var backgroundColor = !this.canvasColor || this.canvasColor == 'default' ? 'transparent' : this.canvasColor;
       this.ctx.fillStyle = backgroundColor;
-      this.ctx.clearRect(0, 0, this.realWidth, this.realHeight);
-      this.ctx.fillRect(0, 0, this.realWidth, this.realHeight);
+      this.ctx.clearRect(0, 0, this.outputWidth, this.outputHeight);
+      this.ctx.fillRect(0, 0, this.outputWidth, this.outputHeight);
     },
-    draw: function draw() {
-      if (!this.img) return;
-      if (window.requestAnimationFrame) {
-        requestAnimationFrame(this._drawFrame);
-      } else {
-        this._drawFrame();
-      }
+    _draw: function _draw() {
+      var _this7 = this;
+
+      this.$nextTick(function () {
+        if (!_this7.img) return;
+        if (window.requestAnimationFrame) {
+          requestAnimationFrame(_this7._drawFrame);
+        } else {
+          _this7._drawFrame();
+        }
+      });
     },
     _drawFrame: function _drawFrame() {
       var ctx = this.ctx;
-      var _imgData = this.imgData,
-          startX = _imgData.startX,
-          startY = _imgData.startY,
-          width = _imgData.width,
-          height = _imgData.height;
+      var _imgData2 = this.imgData,
+          startX = _imgData2.startX,
+          startY = _imgData2.startY,
+          width = _imgData2.width,
+          height = _imgData2.height;
 
 
-      this.paintBackground();
+      this._paintBackground();
       ctx.drawImage(this.img, startX, startY, width, height);
       this.$emit(events.DRAW, ctx);
-    },
-    generateDataUrl: function generateDataUrl(type, compressionRate) {
-      if (!this.img) return '';
-      return this.canvas.toDataURL(type, compressionRate);
-    },
-    generateBlob: function generateBlob(callback, mimeType, qualityArgument) {
-      if (!this.img) return null;
-      this.canvas.toBlob(callback, mimeType, qualityArgument);
-    },
-    promisedBlob: function promisedBlob() {
-      var _this6 = this;
-
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
+      if (!this.imageSet) {
+        this.imageSet = true;
+        this.$emit(events.NEW_IMAGE_DRAWN);
       }
-
-      if (typeof Promise == 'undefined') {
-        console.warn('No Promise support. Please add Promise polyfill if you want to use this method.');
-        return;
-      }
-      return new Promise(function (resolve, reject) {
-        try {
-          _this6.generateBlob(function (blob) {
-            resolve(blob);
-          }, args);
-        } catch (err) {
-          reject(err);
-        }
-      });
     },
-    getMetadata: function getMetadata() {
-      if (!this.img) return {};
-      var _imgData2 = this.imgData,
-          startX = _imgData2.startX,
-          startY = _imgData2.startY;
-
-
-      return {
-        startX: startX,
-        startY: startY,
-        scale: this.scaleRatio,
-        orientation: this.orientation
-      };
-    },
-    applyMetadata: function applyMetadata() {
+    _applyMetadata: function _applyMetadata() {
       if (!this.userMetadata) return;
@@ -1367,4 +1408,2 @@ var _userMetadata = this.userMetadata,
       if (u.numberValid(scale)) {
-        this.imgData.width = this.naturalWidth * scale;
-        this.imgData.height = this.naturalHeight * scale;
         this.scaleRatio = scale;
@@ -1371,0 +1410,0 @@ }

dist/vue-croppa.min.js

 /*
- * vue-croppa v0.3.5
+ * vue-croppa v1.0.0
  * https://github.com/zhanziyang/vue-croppa
@@ -8,2 +8,2 @@ *
  */
-!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 r=document.createElement("canvas"),s=r.getContext("2d");switch(r.width=n,r.height=o,s.save(),+i){case 1:break;case 2:s.translate(n,0),s.scale(-1,1);break;case 3:s.translate(n,o),s.rotate(1*Math.PI);break;case 4:s.translate(0,o),s.scale(1,-1);break;case 5:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.scale(1,-1);break;case 6:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.translate(0,-o);break;case 7:r.width=o,r.height=n,s.rotate(1.5*Math.PI),s.translate(-n,o),s.scale(1,-1);break;case 8:r.width=o,r.height=n,s.translate(0,n),s.rotate(1.5*Math.PI)}return s.drawImage(t,e,a,n,o),s.restore(),r}return{drawImage:t}})}),e={onePointCoord:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.clientX,r=t.clientY;return{x:(o-n.left)*a,y:(r-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 r=0;r<i;r++)e[r]=t.charCodeAt(r);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 r=i.getUint16(a,o);a+=2;for(var s=0;s<r;s++)if(274==i.getUint16(a+12*s,o))return i.getUint16(a+12*s+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={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 Number.isInteger(t)&&t>0}},zoomSpeed:{default:3,type:Number,validator:function(t){return t>0}},accept:{type:String,default:".jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.tiff"},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:[String,HTMLImageElement],initialSize:{type:String,default:"cover",validator:function(t){return"cover"===t||"contain"===t||"natural"===t}},initialPosition:{type:String,default:"center",validator:function(t){return["center","top","bottom","left","right","top left","top right","bottom left","bottom right","left top","right top","left bottom","right bottom"].indexOf(t)>=0||/^-?\d+% -?\d+%$/.test(t)}}},n={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",IMAGE_REMOVE_EVENT:"image-remove",MOVE_EVENT:"move",ZOOM_EVENT:"zoom",DRAW:"draw",INITIAL_IMAGE_LOADED_EVENT:"initial-image-loaded"},o="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={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",{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}}),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)},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?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()])},staticRenderFns:[],model:{prop:"value",event:"init"},props:a,data:function(){return{instance:null,canvas:null,ctx:null,originalImage:null,img:null,dragging:!1,lastMovingCoord:null,imgData:{},dataUrl:"",fileDraggedOver:!1,tabStart:0,pinching:!1,pinchDistance:0,supportTouch:!1,pointerMoved:!1,pointerStartCoord:null,naturalWidth:0,naturalHeight:0,scaleRatio:null,orientation:1,userMetadata:null,imageSet:!1}},computed:{realWidth:function(){return this.width*this.quality},realHeight:function(){return this.height*this.quality},realPlaceholderFontSize:function(){return this.placeholderFontSize*this.quality}},mounted:function(){this.init(),e.rAFPolyfill(),e.toBlobPolyfill(),this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality.")},watch:{value:function(t){this.instance=t},realWidth:function(){this.img?(this.preventWhiteSpace&&(this.imageSet=!1),this.setSize(),this.placeImage()):this.init()},realHeight:function(){this.img?(this.preventWhiteSpace&&(this.imageSet=!1),this.setSize(),this.placeImage()):this.init()},canvasColor:function(){this.img?this.draw():this.init()},placeholder:function(){this.img||this.init()},placeholderColor:function(){this.img||this.init()},realPlaceholderFontSize:function(){this.img||this.init()},preventWhiteSpace:function(){this.preventWhiteSpace&&(this.imageSet=!1),this.placeImage()}},methods:{init:function(){var t=this;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.setInitial(),this.$emit(n.INIT_EVENT,{getCanvas:function(){return t.canvas},getContext:function(){return t.ctx},getChosenFile:function(){return t.$refs.fileInput.files[0]},getActualImageSize:function(){return{width:t.realWidth,height:t.realHeight}},moveUpwards:function(i){t.move({x:0,y:-i})},moveDownwards:function(i){t.move({x:0,y:i})},moveLeftwards:function(i){t.move({x:-i,y:0})},moveRightwards:function(i){t.move({x:i,y:0})},zoomIn:function(){t.zoom(!0)},zoomOut:function(){t.zoom(!1)},rotate:function(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;t.disableRotation||t.disabled||(i=parseInt(i),(isNaN(i)||i>3||i<-3)&&(console.warn("Invalid argument for rotate() method. It should one of the integers from -3 to 3."),i=1),t.rotateByStep(i))},flipX:function(){t.disableRotation||t.disabled||t.rotate(2)},flipY:function(){t.disableRotation||t.disabled||t.rotate(4)},refresh:function(){t.$nextTick(t.init)},hasImage:function(){return!!t.img},remove:this.remove,chooseFile:this.chooseFile,generateDataUrl:this.generateDataUrl,generateBlob:this.generateBlob,promisedBlob:this.promisedBlob,supportDetection:this.supportDetection,getMetadata:this.getMetadata,applyMetadata:function(i){if(i&&t.img){t.userMetadata=i;var e=i.orientation||t.orientation||1;t.rotate(e,!0)}}})},setSize:function(){this.canvas.width=this.realWidth,this.canvas.height=this.realHeight,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.rotate(i)},supportDetection:function(){var t=document.createElement("div");return{basic:window.requestAnimationFrame&&window.File&&window.FileReader&&window.FileList&&window.Blob,dnd:"ondragstart"in t&&"ondrop"in t}},remove:function(){var t=this.ctx;this.paintBackground(),this.setImagePlaceholder(),t.textBaseline="middle",t.textAlign="center";var i=this.realWidth*(2/3)/this.placeholder.length,e=this.realPlaceholderFontSize&&0!=this.realPlaceholderFontSize?this.realPlaceholderFontSize:i;t.font=e+"px sans-serif",t.fillStyle=this.placeholderColor&&"default"!=this.placeholderColor?this.placeholderColor:"#606060",t.fillText(this.placeholder,this.realWidth/2,this.realHeight/2);var a=null!=this.img;this.originalImage=null,this.img=null,this.$refs.fileInput.value="",this.imgData={},this.orientation=1,this.scaleRatio=null,this.userMetadata=null,this.imageSet=!1,a&&this.$emit(n.IMAGE_REMOVE_EVENT)},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 r=function(){t.ctx.drawImage(i,0,0,t.realWidth,t.realHeight)};e.imageLoaded(i)?r():i.onload=r}},setInitial:function(){var t=this,i=void 0,a=void 0;if(this.$slots.initial&&this.$slots.initial[0]){var r=this.$slots.initial[0],s=r.tag,h=r.elm;"img"==s&&h&&(a=h)}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"===o(this.initialImage)&&this.initialImage instanceof Image&&(a=this.initialImage),i||a?e.imageLoaded(a)?(this._onload(a,+a.dataset.exifOrientation),this.$emit(n.INITIAL_IMAGE_LOADED_EVENT)):(a.onload=function(){t._onload(a,+a.dataset.exifOrientation),t.$emit(n.INITIAL_IMAGE_LOADED_EVENT)},a.onerror=function(){t.remove()}):this.remove()},_onload:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;this.originalImage=t,this.img=t,isNaN(i)&&(i=1),this.rotate(i)},chooseFile:function(){this.$refs.fileInput.click()},handleClick:function(){this.img||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 i=this;if(this.$emit(n.FILE_CHOOSE_EVENT,t),!this.fileSizeIsValid(t))throw this.$emit(n.FILE_SIZE_EXCEED_EVENT,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this.fileTypeIsValid(t)){this.$emit(n.FILE_TYPE_MISMATCH_EVENT,t);var a=t.type||t.name.toLowerCase().split(".").pop();throw new Error("File type ("+a+") does not match what you specified ("+this.accept+").")}if(void 0!==window.FileReader){var o=new FileReader;o.onload=function(t){var a=t.target.result,o=e.getFileOrientation(e.base64ToArrayBuffer(a));o<1&&(o=1);var r=new Image;r.src=a,r.onload=function(){i._onload(r,o),i.$emit(n.NEW_IMAGE)}},o.readAsDataURL(t)}},fileSizeIsValid:function(t){return!!t&&(!this.fileSizeLimit||0==this.fileSizeLimit||t.size<this.fileSizeLimit)},fileTypeIsValid:function(t){for(var i=this.accept||"image/*",e=i.replace(/\/.*$/,""),a=i.split(","),n=0,o=a.length;n<o;n++){var r=a[n],s=r.trim();if("."==s.charAt(0)){if(t.name.toLowerCase().split(".").pop()===s.toLowerCase().slice(1))return!0}else if(/\/\*$/.test(s)){if(t.type.replace(/\/.*$/,"")===e)return!0}else if(t.type===r)return!0}return!1},placeImage:function(t){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.imageSet?e.numberValid(this.scaleRatio)?(i.width=this.naturalWidth*this.scaleRatio,i.height=this.naturalHeight*this.scaleRatio):this.aspectFill():"contain"==this.initialSize?this.aspectFit():"natural"==this.initialSize?this.naturalSize():this.aspectFill(),this.scaleRatio=i.width/this.naturalWidth,!this.imageSet&&(/top/.test(this.initialPosition)?i.startY=0:/bottom/.test(this.initialPosition)&&(i.startY=this.realHeight-i.height),/left/.test(this.initialPosition)?i.startX=0:/right/.test(this.initialPosition)&&(i.startX=this.realWidth-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.realWidth-i.width),i.startY=o*(this.realHeight-i.height)}t&&this.applyMetadata(),this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.imageSet||(this.imageSet=!0),this.draw()},aspectFill:function(){var t=this.naturalWidth,i=this.naturalHeight,e=void 0;i/t<this.realHeight/this.realWidth?(e=i/this.realHeight,this.imgData.width=t/e,this.imgData.height=this.realHeight,this.imgData.startX=-(this.imgData.width-this.realWidth)/2,this.imgData.startY=0):(e=t/this.realWidth,this.imgData.height=i/e,this.imgData.width=this.realWidth,this.imgData.startY=-(this.imgData.height-this.realHeight)/2,this.imgData.startX=0)},aspectFit:function(){var t=this.naturalWidth,i=this.naturalHeight,e=void 0;i/t<this.realHeight/this.realWidth?(e=t/this.realWidth,this.imgData.height=i/e,this.imgData.width=this.realWidth,this.imgData.startY=-(this.imgData.height-this.realHeight)/2):(e=i/this.realHeight,this.imgData.width=t/e,this.imgData.height=this.realHeight,this.imgData.startX=-(this.imgData.width-this.realWidth)/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.realWidth)/2,this.imgData.startY=-(this.imgData.height-this.realHeight)/2},handlePointerStart:function(t){this.supportTouch=!0,this.pointerMoved=!1;var i=e.getPointerCoords(t,this);if(this.pointerStartCoord=i,!this.disabled)if(this.img||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,r=n.length;o<r;o++){var s=n[o];document.addEventListener(s,this.handlePointerEnd)}}}else this.tabStart=(new Date).valueOf()},handlePointerEnd:function(t){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.img&&!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.pointerMoved=!0,!this.disabled&&!this.disableDragToMove&&this.img){if(t.preventDefault(),!t.touches||1===t.touches.length){if(!this.dragging)return;var i=e.getPointerCoords(t,this);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,null,2),this.pinchDistance=a}}},handleWheel:function(t){if(!this.disabled&&!this.disableScrollToZoom&&this.img){t.preventDefault();var i=e.getPointerCoords(t,this);t.wheelDelta<0||t.deltaY>0||t.detail>0?this.zoom(this.reverseScrollToZoom,i):(t.wheelDelta>0||t.deltaY<0||t.detail<0)&&this.zoom(!this.reverseScrollToZoom,i)}},handleDragEnter:function(t){this.disabled||this.disableDragAndDrop||this.img||!e.eventHasFile(t)||(this.fileDraggedOver=!0)},handleDragLeave:function(t){this.fileDraggedOver&&e.eventHasFile(t)&&(this.fileDraggedOver=!1)},handleDragOver:function(t){},handleDrop:function(t){if(this.fileDraggedOver&&e.eventHasFile(t)){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 r=a.items[n];if("file"==r.kind){i=r.getAsFile();break}}else i=a.files[0];i&&this.onNewFileIn(i)}}},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(n.MOVE_EVENT),this.draw())}},preventMovingToWhiteSpace:function(){this.imgData.startX>0&&(this.imgData.startX=0),this.imgData.startY>0&&(this.imgData.startY=0),this.realWidth-this.imgData.startX>this.imgData.width&&(this.imgData.startX=-(this.imgData.width-this.realWidth)),this.realHeight-this.imgData.startY>this.imgData.height&&(this.imgData.startY=-(this.imgData.height-this.realHeight))},zoom:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;i=i||{x:this.imgData.startX+this.imgData.width/2,y:this.imgData.startY+this.imgData.height/2};var a=this.zoomSpeed*e,o=1e-5*this.realWidth*a,r=1;t?r=1+o:this.imgData.width>10&&(r=1-o);var s=this.imgData.width,h=this.imgData.height;if(this.imgData.width=this.imgData.width*r,this.imgData.height=this.imgData.height*r,this.preventWhiteSpace){if(this.imgData.width<this.realWidth){var l=this.realWidth/this.imgData.width;this.imgData.width=this.realWidth,this.imgData.height=this.imgData.height*l}if(this.imgData.height<this.realHeight){var d=this.realHeight/this.imgData.height;this.imgData.height=this.realHeight,this.imgData.width=this.imgData.width*d}}if(s.toFixed(2)!==this.imgData.width.toFixed(2)||h.toFixed(2)!==this.imgData.height.toFixed(2)){var c=(r-1)*(i.x-this.imgData.startX),g=(r-1)*(i.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-c,this.imgData.startY=this.imgData.startY-g,this.preventWhiteSpace&&this.preventMovingToWhiteSpace(),this.$emit(n.ZOOM_EVENT),this.draw(),this.scaleRatio=this.imgData.width/this.naturalWidth}},rotate:function(){var t=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:6,a=arguments[1];if(this.img){if(i>1||a){var n=e.getRotatedImage(a?this.originalImage:this.img,i);n.onload=function(){t.img=n,t.placeImage(a)}}else this.placeImage();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,a&&(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.realWidth,this.realHeight),this.ctx.fillRect(0,0,this.realWidth,this.realHeight)},draw:function(){this.img&&(window.requestAnimationFrame?requestAnimationFrame(this._drawFrame):this._drawFrame())},_drawFrame:function(){var t=this.ctx,i=this.imgData,e=i.startX,a=i.startY,o=i.width,r=i.height;this.paintBackground(),t.drawImage(this.img,e,a,o,r),this.$emit(n.DRAW,t)},generateDataUrl:function(t,i){return this.img?this.canvas.toDataURL(t,i):""},generateBlob:function(t,i,e){if(!this.img)return null;this.canvas.toBlob(t,i,e)},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(function(t){i(t)},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.img)return{};var t=this.imgData;return{startX:t.startX,startY:t.startY,scale:this.scaleRatio,orientation:this.orientation}},applyMetadata:function(){if(this.userMetadata){var t=this.userMetadata,i=t.startX,a=t.startY,n=t.scale;e.numberValid(i)&&(this.imgData.startX=i),e.numberValid(a)&&(this.imgData.startY=a),e.numberValid(n)&&(this.imgData.width=this.naturalWidth*n,this.imgData.height=this.naturalHeight*n,this.scaleRatio=n)}}}},s=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,l=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),r=1;r<arguments.length;r++){a=Object(arguments[r]);for(var d in a)h.call(a,d)&&(o[d]=a[d]);if(s){n=s(a);for(var c=0;c<n.length;c++)l.call(a,n[c])&&(o[n[c]]=a[n[c]])}}return o},c={componentName:"croppa"};return{install:function(t,i){i=d({},c,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,r)},component:r}});
+!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 r=document.createElement("canvas"),s=r.getContext("2d");switch(r.width=n,r.height=o,s.save(),+i){case 1:break;case 2:s.translate(n,0),s.scale(-1,1);break;case 3:s.translate(n,o),s.rotate(1*Math.PI);break;case 4:s.translate(0,o),s.scale(1,-1);break;case 5:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.scale(1,-1);break;case 6:r.width=o,r.height=n,s.rotate(.5*Math.PI),s.translate(0,-o);break;case 7:r.width=o,r.height=n,s.rotate(1.5*Math.PI),s.translate(-n,o),s.scale(1,-1);break;case 8:r.width=o,r.height=n,s.translate(0,n),s.rotate(1.5*Math.PI)}return s.drawImage(t,e,a,n,o),s.restore(),r}return{drawImage:t}})}),e={onePointCoord:function(t,i){var e=i.canvas,a=i.quality,n=e.getBoundingClientRect(),o=t.clientX,r=t.clientY;return{x:(o-n.left)*a,y:(r-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 r=0;r<i;r++)e[r]=t.charCodeAt(r);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 r=i.getUint16(a,o);a+=2;for(var s=0;s<r;s++)if(274==i.getUint16(a+12*s,o))return i.getUint16(a+12*s+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;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 Number.isInteger(t)&&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},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"},r="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},s={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)),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?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()])},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,pinchDistance:0,supportTouch:!1,pointerMoved:!1,pointerStartCoord:null,naturalWidth:0,naturalHeight:0,scaleRatio:null,orientation:1,userMetadata:null,imageSet:!1,currentPointerCoord:null}},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}},mounted:function(){this._init(),e.rAFPolyfill(),e.toBlobPolyfill(),this.supportDetection().basic||console.warn("Your browser does not support vue-croppa functionality.")},watch:{outputWidth:function(){this.hasImage()?(this.preventWhiteSpace&&(this.imageSet=!1),this._setSize(),this._placeImage()):this._init()},outputHeight:function(){this.hasImage()?(this.preventWhiteSpace&&(this.imageSet=!1),this._setSize(),this._placeImage()):this._init()},canvasColor:function(){this.hasImage()?this._draw():this._init()},placeholder:function(){this.hasImage()||this._init()},placeholderColor:function(){this.hasImage()||this._init()},computedPlaceholderFontSize:function(){this.hasImage()||this._init()},preventWhiteSpace:function(t){t&&(this.imageSet=!1),this._placeImage()},scaleRatio:function(t,i){if(this.hasImage()&&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};this.imgData.width=this.naturalWidth*t,this.imgData.height=this.naturalHeight*t,this.preventWhiteSpace&&this._preventZoomingToWhiteSpace();var o=(a-1)*(n.x-this.imgData.startX),r=(a-1)*(n.y-this.imgData.startY);this.imgData.startX=this.imgData.startX-o,this.imgData.startY=this.imgData.startY-r}},"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)}},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(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,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._init)},hasImage:function(){return!!this.imageSet},applyMetadata:function(t){if(t&&this.hasImage()){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){if(!this.hasImage())return null;this.canvas.toBlob(t,i,e)},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(function(t){i(t)},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(){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(){var t=this.ctx;this._paintBackground(),this._setImagePlaceholder(),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);var a=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,a&&this.$emit(o.IMAGE_REMOVE_EVENT)},_init: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(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 r=function(){t.ctx.drawImage(i,0,0,t.outputWidth,t.outputHeight)};e.imageLoaded(i)?r():i.onload=r}},_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],s=n.tag,h=n.elm;"img"==s&&h&&(a=h)}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"===r(this.initialImage)&&this.initialImage instanceof Image&&(a=this.initialImage),i||a?e.imageLoaded(a)?(this.$emit(o.INITIAL_IMAGE_LOADED_EVENT),this._onload(a,+a.dataset.exifOrientation)):(a.onload=function(){t.$emit(o.INITIAL_IMAGE_LOADED_EVENT),t._onload(a,+a.dataset.exifOrientation)},a.onerror=function(){t.remove()}):this.remove()},_onload:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;this.originalImage=t,this.img=t,isNaN(i)&&(i=1),this._setOrientation(i)},_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 i=this;if(this.$emit(o.FILE_CHOOSE_EVENT,t),!this._fileSizeIsValid(t))throw this.$emit(o.FILE_SIZE_EXCEED_EVENT,t),new Error("File size exceeds limit which is "+this.fileSizeLimit+" bytes.");if(!this._fileTypeIsValid(t)){this.$emit(o.FILE_TYPE_MISMATCH_EVENT,t);var a=t.type||t.name.toLowerCase().split(".").pop();throw new Error("File type ("+a+") does not match what you specified ("+this.accept+").")}if(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 r=new Image;r.src=a,r.onload=function(){i._onload(r,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.accepct)return!0;for(var i=this.accept,e=i.replace(/\/.*$/,""),a=i.split(","),n=0,o=a.length;n<o;n++){var r=a[n],s=r.trim();if("."==s.charAt(0)){if(t.name.toLowerCase().split(".").pop()===s.toLowerCase().slice(1))return!0}else if(/\/\*$/.test(s)){if(t.type.replace(/\/.*$/,"")===e)return!0}else if(t.type===r)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||("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){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,r=n.length;o<r;o++){var s=n[o];document.addEventListener(s,this._handlePointerEnd)}}}else this.tabStart=(new Date).valueOf()},_handlePointerEnd:function(t){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.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.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||this.hasImage()||!e.eventHasFile(t)||(this.fileDraggedOver=!0)},_handleDragLeave:function(t){this.fileDraggedOver&&e.eventHasFile(t)&&(this.fileDraggedOver=!1)},_handleDragOver:function(t){},_handleDrop:function(t){if(this.fileDraggedOver&&e.eventHasFile(t)){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 r=a.items[n];if("file"==r.kind){i=r.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];if(this.img){var n=a&&this.userMetadata.orientation!==this.orientation;if(i>1||n){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&&(window.requestAnimationFrame?requestAnimationFrame(t._drawFrame):t._drawFrame())})},_drawFrame:function(){var t=this.ctx,i=this.imgData,e=i.startX,a=i.startY,n=i.width,r=i.height;this._paintBackground(),t.drawImage(this.img,e,a,n,r),this.$emit(o.DRAW,t),this.imageSet||(this.imageSet=!0,this.$emit(o.NEW_IMAGE_DRAWN))},_applyMetadata:function(){if(this.userMetadata){var t=this.userMetadata,i=t.startX,a=t.startY,n=t.scale;e.numberValid(i)&&(this.imgData.startX=i),e.numberValid(a)&&(this.imgData.startY=a),e.numberValid(n)&&(this.scaleRatio=n)}}}},h=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable,c=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),r=1;r<arguments.length;r++){a=Object(arguments[r]);for(var s in a)l.call(a,s)&&(o[s]=a[s]);if(h){n=h(a);for(var c=0;c<n.length;c++)u.call(a,n[c])&&(o[n[c]]=a[n[c]])}}return o},d={componentName:"croppa"};return{install:function(t,i){i=c({},d,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,s)},component:s}});

package.json

 {
   "name": "vue-croppa",
-  "version": "0.3.5",
+  "version": "1.0.0",
   "description": "A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2.0.",
@@ -5,0 +5,0 @@ "main": "dist/vue-croppa.js",

README.md

@@ -9,3 +9,3 @@ # vue-croppa
 - **Highly customizable**: You can almost customize anything except the core functionalities
-- **Lightweight**: 24kb in total (33kb since v0.3.0)
+- **Lightweight**: 28kb in total
 - **Mobile-friendly**: Supports drag to move and pinch with two fingers to zoom on mobile devices
@@ -34,3 +34,3 @@ - **EXIF orientation**: v0.2.0+ Support correctly show image with EXIF orientation
         :placeholder-color="'default'"
-        :input-accept="'image/*'"
+        :accept="'image/*'"
         :file-size-limit="0"
@@ -148,2 +148,12 @@ :quality="2"
 
+- Since v1.0.0, the v-modeled value and the `ref` both point to the same thing - the component itself. So you don't need to set v-model anymore if you have a `ref` on the component.
+```xml
+<croppa ref="myCroppa"></croppa>
+```
+```js
+this.$refs.myCroppa.chooseFile()
+this.$refs.myCroppa.generateDataUrl()
+// ...
+```
+
 ## Documentation
@@ -154,3 +164,3 @@
 #### v-model
-A two-way binding prop. It syncs an object from within the croppa component with a data in parent. We can use this object to invoke useful methods (Check out "[Methods](#-methods)" section).
+A two-way binding prop. It syncs an object from within the croppa component with a data in parent. We can use this object to call useful methods (Check out "[Methods](#-methods)" section). **Since v1.0.0, you don't need this anymore, the `ref` on component can also be used to call methods.**
 - type: `object`
@@ -206,3 +216,3 @@ - live example: https://jsfiddle.net/jdcvpvty/2/
 - type: same as what `accept` attribute of HTML `input` element takes.
-- default: `'.jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.tiff'`
+- default: no default value since v1.0.0. Specify it as you need.
 
@@ -250,3 +260,3 @@ #### file-size-limit
 #### <s>reverse-zooming-gesture</s>
-**Deprecated** @v0.0.20+ Please use `reverse-scroll-to-zoom` instead. The name isn't proper because you can not reverse pinch to zoom.
+**Deprecated** Please use `reverse-scroll-to-zoom` instead.
 
@@ -299,3 +309,2 @@ Reverses the zoom-in/zoom-out direction when scrolling.
   - `'center'` (default value)
-  - `'30% 40%'` (similar to background-position in css)
   - `'top'`
@@ -305,7 +314,11 @@ - `'bottom'`
   - `'right'`
-  - `'top left'` or  `'left top'`
-  - `'top right'` or  `'right top'`
-  - `'bottom left'` or  `'left bottom'`
-  - `'bottom right'` or  `'right bottom'`
+  - composition of the above words (`'top left'`, `'right top'` etc.)
+  - `'30% 40%'` (similar to background-position in css)
 
+#### input-attrs
+(**v1.0.0+**) to pass attributes to the hidden `input[type=file]` element.
+```html
+<croppa :input-attrs="{capture: true, class: 'file-input'}"></croppa>
+```
+
 ---
@@ -328,3 +341,3 @@
 #### placeholder
-- If you are not satified with the simple text placeholder. Since v0.3.0, you can apply an `<img>` slot named `placeholder` to get an image placeholder! The image will be draw on croppa under the placeholder text when it is empty.
+- If you are not satified with the simple text placeholder. Since v0.3.0, you can apply an `<img>` slot named `placeholder` to get an image placeholder! The image will be draw on croppa under the placeholder text.
 ```html
@@ -352,4 +365,5 @@ <croppa v-model="myCroppa">
 
-#### getActualImageSize()
+#### <s>getActualImageSize()</s>
 - Return an object `{ width, height }` describing the real image size (preview size ` * quality`)
+- **Deprecated** Use `this.myCroppa.outputWidth` and `this.myCroppa.outputHeight` instead.
 
@@ -364,2 +378,5 @@ #### moveUpwards( amountInPx: number )
 
+#### move({x, y})
+- (**v1.0.0+**) for more flexibility.
+
 #### zoomIn()
@@ -369,2 +386,5 @@
 
+#### zoom(in, timesQuicken)
+- (**v1.0.0+**) for more flexibility.
+
 #### rotate(step: number)
@@ -385,4 +405,3 @@ - 1 step = 90 deg
 #### <s>myCroppa.reset()</s>
-- **To Be Deprecated** This will be deprecated in the future due to misnaming 😅 . Please use `remove()` instead.
-- Removes the current image, can be used to implement your own remove-button.
+- **Deprecated** Please use `remove()` instead.
 
@@ -461,3 +480,3 @@ #### remove()
 - handler(croppa)
-  - `croppa` is a croppa object to invoke methods - same as what `v-model` binds.
+  - `croppa` is the croppa component itself - same as what `v-model` and `ref` bind.
 
@@ -480,4 +499,7 @@ #### file-choose
 #### new-image 
-- emitted when new valid image is set onto croppa (v0.2.0).
+- emitted when a new valid image is received and read successfully(v0.2.0).
 
+#### new-image-drawn
+- emitted when a new image is drawn on canvas for the first time.
+
 #### image-remove
@@ -500,2 +522,22 @@ - emitted when image remove from croppa.
 
+### 🌱 State data
+
+Since v1.0.0, you can access all state data of croppa via the instance. For example,
+```js
+this.myCroppa.naturalWidth
+this.myCroppa.imgData.startX
+this.myCroppa.scaleRatio
+this.myCroppa.pinching
+//...
+```
+All data available:
+
+<img src="https://i.imgur.com/KkgN87h.png?v=3" />
+
+Sorry I'm too lazy to doc about each of them. Please open the **vue-devtool** to figure out what they mean by yourself. 
+
+You can also open an issue to ask me any question about this component.
+
+Note that "computed" and "props" are read-only. Some value on "data" are also not recommended to modify from outside, for example `ctx`, `canvas`, `img`.
+
 ### 🌱 Customize styles
@@ -536,1 +578,4 @@
 ```
+
+## To Do
+- [ ] Add unit test.

src/events.js

@@ -7,2 +7,3 @@ export default {
   NEW_IMAGE: 'new-image',
+  NEW_IMAGE_DRAWN: 'new-image-drawn',
   IMAGE_REMOVE_EVENT: 'image-remove',
@@ -9,0 +10,0 @@ MOVE_EVENT: 'move',

src/props.js

@@ -5,2 +5,7 @@ Number.isInteger = Number.isInteger || function (value) {
 
+var initialImageType = String
+if (window && window.Image) {
+  initialImageType = [String, Image]
+}
+
 export default {
@@ -53,6 +58,3 @@ value: Object,
   },
-  accept: {
-    type: String,
-    default: '.jpg,.jpeg,.png,.gif,.bmp,.webp,.svg,.tiff'
-  },
+  accept: String,
   fileSizeLimit: {
@@ -85,3 +87,3 @@ type: Number,
   },
-  initialImage: [String, HTMLImageElement],
+  initialImage: initialImageType,
   initialSize: {
@@ -103,15 +105,10 @@ type: String,
         'left',
-        'right',
-        'top left',
-        'top right',
-        'bottom left',
-        'bottom right',
-        'left top',
-        'right top',
-        'left bottom',
-        'right bottom'
+        'right'
       ]
-      return valids.indexOf(val) >= 0 || /^-?\d+% -?\d+%$/.test(val)
+      return val.split(' ').every(word => {
+        return valids.indexOf(word) >= 0
+      }) || /^-?\d+% -?\d+%$/.test(val)
     }
-  }
+  },
+  inputAttrs: Object
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

144612

increased by4.13%

Number of package files

18

increased by5.88%

Lines of code

1925

increased by1.8%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

565

increased by8.65%

No dependency changes