cropper_rails 1.0.2 → 1.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 582b46f8725bd29fe8a8162bf0c74d5954803c5811a3e6d19a0c3ad4e9d9c3c3
-  data.tar.gz: 83aa2d33544e6afa0125da8dc5a1c7e26dcbcd5d470e641253fc49383782454b
+  metadata.gz: 48b8a0acd1feb8f0d4d3670dbbf956ba773b2a3074a530a985fa5fdfb36592bd
+  data.tar.gz: 43a87fbb6ec30a28d4840d9e8652f45a0dd8b8a3c8fb165a263ccb3045d493b7
 SHA512:
-  metadata.gz: be615203f8efbc328614ed19fe7240ee99ee4b29b514190e503fe2bea9736aae0cce878f9af7faf9161a22e01b3c685d148bc453fe78974409844bd1a1c6ddac
-  data.tar.gz: ca64d45a21a3ab2b108ff44663e1b3d384f7c609204ea997f1c458872f5645afc5991f08dea92d2cb2817db813b807af6d4e32beaf36abc0691a8f4039efa0bb
+  metadata.gz: 795a70aa21f253873060f98e2ea8d0ea8be75383bdf6a41173a3d86b2b6671f335216cf501c2ec7460e0f4046074dea4b64b2fe24ca2fd4a94f0526fde24b8a6
+  data.tar.gz: a86588a59480a06fe27f094e417fb1518b4ea44284e0c554955f74de159d60b54b0e34113d3815d8e899eeaacda286011bf3ef6e8ca8e2e5a840803d611e1e51

data/LICENSE

@@ -1,6 +1,6 @@
-MIT License
+The MIT License (MIT)
 
-Copyright (c) 2018 Fabien LEFEBVRE
+Copyright 2015-present Chen Fengyuan
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/VERSIONS.md

@@ -2,6 +2,11 @@
 
 | Gem    | Cropper.js | jQuery Cropper |
 |--------|------------|----------------|
+| 1.1.4  | 1.5.11     | 1.0.1          |
+| 1.1.3  | 1.5.11     | 1.0.1          |
+| 1.1.2  | 1.5.10     | 1.0.1          |
+| 1.1.1  | 1.5.9      | 1.0.1          |
+| 1.1.0  | 1.5.6      | 1.0.1          |
 | 1.0.2  | 1.4.3      | 1.0.0          |
 | 1.0.1  | 1.4.2      | 1.0.0          |
 | 1.0.0  | 1.4.1      | 1.0.0          |

data/cropper_rails.gemspec

@@ -22,5 +22,5 @@ Gem::Specification.new do |spec|
 
   spec.add_runtime_dependency 'jquery-rails', '~> 4.0'
 
-  spec.add_development_dependency 'bundler', '~> 1.16'
+  spec.add_development_dependency "bundler", ">= 2.2.10"
 end

data/lib/cropper_rails/version.rb

@@ -1,7 +1,7 @@
 module Cropper
   module Rails
-    VERSION = '1.0.2'.freeze
-    CROPPER_VERSION = '1.4.3'.freeze
-    JQUERY_CROPPER_VERSION = '1.0.0'.freeze
+    VERSION = '1.1.4'.freeze
+    CROPPER_VERSION = '1.5.11'.freeze
+    JQUERY_CROPPER_VERSION = '1.0.1'.freeze
   end
 end

data/vendor/assets/javascripts/cropper.js

@@ -1,20 +1,22 @@
 /*!
- * Cropper.js v1.4.3
+ * Cropper.js v1.5.11
  * https://fengyuanchen.github.io/cropperjs
  *
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2018-10-24T13:07:15.032Z
+ * Date: 2021-02-17T11:53:27.572Z
  */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
-  (global.Cropper = factory());
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Cropper = factory());
 }(this, (function () { 'use strict';
 
   function _typeof(obj) {
+    "@babel/helpers - typeof";
+
     if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
       _typeof = function (obj) {
         return typeof obj;
@@ -50,28 +52,92 @@
     return Constructor;
   }
 
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
   }
 
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) {
-      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
 
-      return arr2;
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
     }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+
+    return target;
+  }
+
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
   }
 
   function _iterableToArray(iter) {
-    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
   }
 
   function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance");
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
-  var IN_BROWSER = typeof window !== 'undefined';
-  var WINDOW = IN_BROWSER ? window : {};
+  var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+  var WINDOW = IS_BROWSER ? window : {};
+  var IS_TOUCH_DEVICE = IS_BROWSER && WINDOW.document.documentElement ? 'ontouchstart' in WINDOW.document.documentElement : false;
+  var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;
   var NAMESPACE = 'cropper'; // Actions
 
   var ACTION_ALL = 'all';
@@ -107,20 +173,27 @@
   var EVENT_CROP_MOVE = 'cropmove';
   var EVENT_CROP_START = 'cropstart';
   var EVENT_DBLCLICK = 'dblclick';
-  var EVENT_POINTER_DOWN = WINDOW.PointerEvent ? 'pointerdown' : 'touchstart mousedown';
-  var EVENT_POINTER_MOVE = WINDOW.PointerEvent ? 'pointermove' : 'touchmove mousemove';
-  var EVENT_POINTER_UP = WINDOW.PointerEvent ? 'pointerup pointercancel' : 'touchend touchcancel mouseup';
+  var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';
+  var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';
+  var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';
+  var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;
+  var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE;
+  var EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;
   var EVENT_READY = 'ready';
   var EVENT_RESIZE = 'resize';
-  var EVENT_WHEEL = 'wheel mousewheel DOMMouseScroll';
+  var EVENT_WHEEL = 'wheel';
   var EVENT_ZOOM = 'zoom'; // Mime types
 
   var MIME_TYPE_JPEG = 'image/jpeg'; // RegExps
 
-  var REGEXP_ACTIONS = /^(?:e|w|s|n|se|sw|ne|nw|all|crop|move|zoom)$/;
+  var REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/;
   var REGEXP_DATA_URL = /^data:/;
   var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/;
-  var REGEXP_TAG_NAME = /^(?:img|canvas)$/i;
+  var REGEXP_TAG_NAME = /^img|canvas$/i; // Misc
+  // Inspired by the default width and height of a canvas element.
+
+  var MIN_CONTAINER_WIDTH = 200;
+  var MIN_CONTAINER_HEIGHT = 100;
 
   var DEFAULTS = {
     // Define the view mode of the cropper
@@ -184,8 +257,8 @@
     minCanvasHeight: 0,
     minCropBoxWidth: 0,
     minCropBoxHeight: 0,
-    minContainerWidth: 200,
-    minContainerHeight: 100,
+    minContainerWidth: MIN_CONTAINER_WIDTH,
+    minContainerHeight: MIN_CONTAINER_HEIGHT,
     // Shortcuts of events
     ready: null,
     cropstart: null,
@@ -211,6 +284,15 @@
   function isNumber(value) {
     return typeof value === 'number' && !isNaN(value);
   }
+  /**
+   * Check if the given value is a positive number.
+   * @param {*} value - The value to check.
+   * @returns {boolean} Returns `true` if the given value is a positive number, else `false`.
+   */
+
+  var isPositiveNumber = function isPositiveNumber(value) {
+    return value > 0 && value < Infinity;
+  };
   /**
    * Check if the given value is undefined.
    * @param {*} value - The value to check.
@@ -245,7 +327,7 @@
       var _constructor = value.constructor;
       var prototype = _constructor.prototype;
       return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');
-    } catch (e) {
+    } catch (error) {
       return false;
     }
   }
@@ -258,6 +340,16 @@
   function isFunction(value) {
     return typeof value === 'function';
   }
+  var slice = Array.prototype.slice;
+  /**
+   * Convert array-like or iterable object to an array.
+   * @param {*} value - The value to convert.
+   * @returns {Array} Returns a new array.
+   */
+
+  function toArray(value) {
+    return Array.from ? Array.from(value) : slice.call(value);
+  }
   /**
    * Iterate the given data.
    * @param {*} data - The data to iterate.
@@ -270,14 +362,9 @@
       if (Array.isArray(data) || isNumber(data.length)
       /* array-like */
       ) {
-          var length = data.length;
-          var i;
-
-          for (i = 0; i < length; i += 1) {
-            if (callback.call(data, data[i], i, data) === false) {
-              break;
-            }
-          }
+          toArray(data).forEach(function (value, key) {
+            callback.call(data, value, key, data);
+          });
         } else if (isObject(data)) {
         Object.keys(data).forEach(function (key) {
           callback.call(data, data[key], key, data);
@@ -289,32 +376,32 @@
   }
   /**
    * Extend the given object.
-   * @param {*} obj - The object to be extended.
-   * @param {*} args - The rest objects which will be merged to the first object.
+   * @param {*} target - The target object to extend.
+   * @param {*} args - The rest objects for merging to the target object.
    * @returns {Object} The extended object.
    */
 
-  var assign = Object.assign || function assign(obj) {
+  var assign = Object.assign || function assign(target) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
 
-    if (isObject(obj) && args.length > 0) {
+    if (isObject(target) && args.length > 0) {
       args.forEach(function (arg) {
         if (isObject(arg)) {
           Object.keys(arg).forEach(function (key) {
-            obj[key] = arg[key];
+            target[key] = arg[key];
           });
         }
       });
     }
 
-    return obj;
+    return target;
   };
   var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/;
   /**
    * Normalize decimal number.
-   * Check out {@link http://0.30000000000000004.com/}
+   * Check out {@link https://0.30000000000000004.com/}
    * @param {number} value - The value to normalize.
    * @param {number} [times=100000000000] - The times for normalizing.
    * @returns {number} Returns the normalized number.
@@ -324,7 +411,7 @@
     var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000;
     return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value;
   }
-  var REGEXP_SUFFIX = /^(?:width|height|left|top|marginLeft|marginTop)$/;
+  var REGEXP_SUFFIX = /^width|height|left|top|marginLeft|marginTop$/;
   /**
    * Apply styles to the given element.
    * @param {Element} element - The target element.
@@ -335,7 +422,7 @@
     var style = element.style;
     forEach(styles, function (value, property) {
       if (REGEXP_SUFFIX.test(property) && isNumber(value)) {
-        value += 'px';
+        value = "".concat(value, "px");
       }
 
       style[property] = value;
@@ -435,15 +522,15 @@
       removeClass(element, value);
     }
   }
-  var REGEXP_HYPHENATE = /([a-z\d])([A-Z])/g;
+  var REGEXP_CAMEL_CASE = /([a-z\d])([A-Z])/g;
   /**
    * Transform the given string from camelCase to kebab-case
    * @param {string} value - The value to transform.
    * @returns {string} The transformed value.
    */
 
-  function hyphenate(value) {
-    return value.replace(REGEXP_HYPHENATE, '$1-$2').toLowerCase();
+  function toParamCase(value) {
+    return value.replace(REGEXP_CAMEL_CASE, '$1-$2').toLowerCase();
   }
   /**
    * Get data from the given element.
@@ -461,7 +548,7 @@
       return element.dataset[name];
     }
 
-    return element.getAttribute("data-".concat(hyphenate(name)));
+    return element.getAttribute("data-".concat(toParamCase(name)));
   }
   /**
    * Set data to the given element.
@@ -476,7 +563,7 @@
     } else if (element.dataset) {
       element.dataset[name] = data;
     } else {
-      element.setAttribute("data-".concat(hyphenate(name)), data);
+      element.setAttribute("data-".concat(toParamCase(name)), data);
     }
   }
   /**
@@ -489,18 +576,18 @@
     if (isObject(element[name])) {
       try {
         delete element[name];
-      } catch (e) {
+      } catch (error) {
         element[name] = undefined;
       }
     } else if (element.dataset) {
       // #128 Safari not allows to delete dataset property
       try {
         delete element.dataset[name];
-      } catch (e) {
+      } catch (error) {
         element.dataset[name] = undefined;
       }
     } else {
-      element.removeAttribute("data-".concat(hyphenate(name)));
+      element.removeAttribute("data-".concat(toParamCase(name)));
     }
   }
   var REGEXP_SPACES = /\s\s*/;
@@ -508,7 +595,7 @@
   var onceSupported = function () {
     var supported = false;
 
-    if (IN_BROWSER) {
+    if (IS_BROWSER) {
       var once = false;
 
       var listener = function listener() {};
@@ -647,7 +734,7 @@
     };
   }
   var location = WINDOW.location;
-  var REGEXP_ORIGINS = /^(https?:)\/\/([^:/?#]+):?(\d*)/i;
+  var REGEXP_ORIGINS = /^(\w+:)\/\/([^:/?#]*):?(\d*)/i;
   /**
    * Check if the given URL is a cross origin URL.
    * @param {string} url - The target URL.
@@ -656,7 +743,7 @@
 
   function isCrossOriginURL(url) {
     var parts = url.match(REGEXP_ORIGINS);
-    return parts && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);
+    return parts !== null && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);
   }
   /**
    * Add timestamp to the given URL.
@@ -717,8 +804,9 @@
    */
 
   function getMaxZoomRatio(pointers) {
-    var pointers2 = assign({}, pointers);
-    var ratios = [];
+    var pointers2 = _objectSpread2({}, pointers);
+
+    var maxRatio = 0;
     forEach(pointers, function (pointer, pointerId) {
       delete pointers2[pointerId];
       forEach(pointers2, function (pointer2) {
@@ -729,13 +817,13 @@
         var z1 = Math.sqrt(x1 * x1 + y1 * y1);
         var z2 = Math.sqrt(x2 * x2 + y2 * y2);
         var ratio = (z2 - z1) / z1;
-        ratios.push(ratio);
+
+        if (Math.abs(ratio) > Math.abs(maxRatio)) {
+          maxRatio = ratio;
+        }
       });
     });
-    ratios.sort(function (a, b) {
-      return Math.abs(a) < Math.abs(b);
-    });
-    return ratios[0];
+    return maxRatio;
   }
   /**
    * Get a pointer from an event object.
@@ -751,7 +839,7 @@
       endX: pageX,
       endY: pageY
     };
-    return endOnly ? end : assign({
+    return endOnly ? end : _objectSpread2({
       startX: pageX,
       startY: pageY
     }, end);
@@ -780,11 +868,6 @@
       pageY: pageY
     };
   }
-  /**
-   * Check if the given value is a finite number.
-   */
-
-  var isFinite = Number.isFinite || WINDOW.isFinite;
   /**
    * Get the max sizes in a rectangle under the given aspect ratio.
    * @param {Object} data - The original sizes.
@@ -798,12 +881,10 @@
         height = _ref4.height,
         width = _ref4.width;
     var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'contain';
+    var isValidWidth = isPositiveNumber(width);
+    var isValidHeight = isPositiveNumber(height);
 
-    var isValidNumber = function isValidNumber(value) {
-      return isFinite(value) && value > 0;
-    };
-
-    if (isValidNumber(width) && isValidNumber(height)) {
+    if (isValidWidth && isValidHeight) {
       var adjustedWidth = height * aspectRatio;
 
       if (type === 'contain' && adjustedWidth > width || type === 'cover' && adjustedWidth < width) {
@@ -811,9 +892,9 @@
       } else {
         width = height * aspectRatio;
       }
-    } else if (isValidNumber(width)) {
+    } else if (isValidWidth) {
       height = width / aspectRatio;
-    } else if (isValidNumber(height)) {
+    } else if (isValidHeight) {
       width = height * aspectRatio;
     }
 
@@ -946,10 +1027,9 @@
 
   function getStringFromCharCode(dataView, start, length) {
     var str = '';
-    var i;
     length += start;
 
-    for (i = start; i < length; i += 1) {
+    for (var i = start; i < length; i += 1) {
       str += fromCharCode(dataView.getUint8(i));
     }
 
@@ -980,12 +1060,15 @@
    */
 
   function arrayBufferToDataURL(arrayBuffer, mimeType) {
-    var chunks = [];
+    var chunks = []; // Chunk Typed Array for better performance (#435)
+
     var chunkSize = 8192;
     var uint8 = new Uint8Array(arrayBuffer);
 
     while (uint8.length > 0) {
-      chunks.push(fromCharCode.apply(void 0, _toConsumableArray(uint8.subarray(0, chunkSize))));
+      // XXX: Babel's `toConsumableArray` helper will throw error in IE or Safari 9
+      // eslint-disable-next-line prefer-spread
+      chunks.push(fromCharCode.apply(null, toArray(uint8.subarray(0, chunkSize))));
       uint8 = uint8.subarray(chunkSize);
     }
 
@@ -1065,7 +1148,7 @@
             }
         }
       }
-    } catch (e) {
+    } catch (error) {
       orientation = 1;
     }
 
@@ -1119,8 +1202,6 @@
       case 8:
         rotate = -90;
         break;
-
-      default:
     }
 
     return {
@@ -1146,11 +1227,13 @@
           options = this.options,
           container = this.container,
           cropper = this.cropper;
+      var minWidth = Number(options.minContainerWidth);
+      var minHeight = Number(options.minContainerHeight);
       addClass(cropper, CLASS_HIDDEN);
       removeClass(element, CLASS_HIDDEN);
       var containerData = {
-        width: Math.max(container.offsetWidth, Number(options.minContainerWidth) || 200),
-        height: Math.max(container.offsetHeight, Number(options.minContainerHeight) || 100)
+        width: Math.max(container.offsetWidth, minWidth >= 0 ? minWidth : MIN_CONTAINER_WIDTH),
+        height: Math.max(container.offsetHeight, minHeight >= 0 ? minHeight : MIN_CONTAINER_HEIGHT)
       };
       this.containerData = containerData;
       setStyle(cropper, {
@@ -1191,14 +1274,15 @@
         width: canvasWidth,
         height: canvasHeight
       };
-      canvasData.left = (containerData.width - canvasWidth) / 2;
-      canvasData.top = (containerData.height - canvasHeight) / 2;
-      canvasData.oldLeft = canvasData.left;
-      canvasData.oldTop = canvasData.top;
       this.canvasData = canvasData;
       this.limited = viewMode === 1 || viewMode === 2;
       this.limitCanvas(true, true);
-      this.initialImageData = assign({}, imageData);
+      canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth);
+      canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight);
+      canvasData.left = (containerData.width - canvasData.width) / 2;
+      canvasData.top = (containerData.height - canvasData.height) / 2;
+      canvasData.oldLeft = canvasData.left;
+      canvasData.oldTop = canvasData.top;
       this.initialCanvasData = assign({}, canvasData);
     },
     limitCanvas: function limitCanvas(sizeLimited, positionLimited) {
@@ -1507,9 +1591,11 @@
 
   var preview = {
     initPreview: function initPreview() {
-      var crossOrigin = this.crossOrigin;
+      var element = this.element,
+          crossOrigin = this.crossOrigin;
       var preview = this.options.preview;
       var url = crossOrigin ? this.crossOriginUrl : this.url;
+      var alt = element.alt || 'The image to preview';
       var image = document.createElement('img');
 
       if (crossOrigin) {
@@ -1517,6 +1603,7 @@
       }
 
       image.src = url;
+      image.alt = alt;
       this.viewBox.appendChild(image);
       this.viewBoxImage = image;
 
@@ -1527,7 +1614,7 @@
       var previews = preview;
 
       if (typeof preview === 'string') {
-        previews = this.element.ownerDocument.querySelectorAll(preview);
+        previews = element.ownerDocument.querySelectorAll(preview);
       } else if (preview.querySelector) {
         previews = [preview];
       }
@@ -1547,6 +1634,7 @@
         }
 
         img.src = url;
+        img.alt = alt;
         /**
          * Override img element styles
          * Add `display:block` to avoid margin top issue
@@ -1655,7 +1743,10 @@
       addListener(cropper, EVENT_POINTER_DOWN, this.onCropStart = this.cropStart.bind(this));
 
       if (options.zoomable && options.zoomOnWheel) {
-        addListener(cropper, EVENT_WHEEL, this.onWheel = this.wheel.bind(this));
+        addListener(cropper, EVENT_WHEEL, this.onWheel = this.wheel.bind(this), {
+          passive: false,
+          capture: true
+        });
       }
 
       if (options.toggleDragModeOnDblclick) {
@@ -1697,7 +1788,10 @@
       removeListener(cropper, EVENT_POINTER_DOWN, this.onCropStart);
 
       if (options.zoomable && options.zoomOnWheel) {
-        removeListener(cropper, EVENT_WHEEL, this.onWheel);
+        removeListener(cropper, EVENT_WHEEL, this.onWheel, {
+          passive: false,
+          capture: true
+        });
       }
 
       if (options.toggleDragModeOnDblclick) {
@@ -1715,16 +1809,13 @@
 
   var handlers = {
     resize: function resize() {
-      var options = this.options,
-          container = this.container,
-          containerData = this.containerData;
-      var minContainerWidth = Number(options.minContainerWidth) || 200;
-      var minContainerHeight = Number(options.minContainerHeight) || 100;
-
-      if (this.disabled || containerData.width <= minContainerWidth || containerData.height <= minContainerHeight) {
+      if (this.disabled) {
         return;
       }
 
+      var options = this.options,
+          container = this.container,
+          containerData = this.containerData;
       var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed
 
       if (ratio !== 1 || container.offsetHeight !== containerData.height) {
@@ -1755,7 +1846,7 @@
 
       this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP);
     },
-    wheel: function wheel(e) {
+    wheel: function wheel(event) {
       var _this = this;
 
       var ratio = Number(this.options.wheelZoomRatio) || 0.1;
@@ -1765,7 +1856,7 @@
         return;
       }
 
-      e.preventDefault(); // Limit wheel speed to prevent zoom too fast (#21)
+      event.preventDefault(); // Limit wheel speed to prevent zoom too fast (#21)
 
       if (this.wheeling) {
         return;
@@ -1776,18 +1867,24 @@
         _this.wheeling = false;
       }, 50);
 
-      if (e.deltaY) {
-        delta = e.deltaY > 0 ? 1 : -1;
-      } else if (e.wheelDelta) {
-        delta = -e.wheelDelta / 120;
-      } else if (e.detail) {
-        delta = e.detail > 0 ? 1 : -1;
+      if (event.deltaY) {
+        delta = event.deltaY > 0 ? 1 : -1;
+      } else if (event.wheelDelta) {
+        delta = -event.wheelDelta / 120;
+      } else if (event.detail) {
+        delta = event.detail > 0 ? 1 : -1;
       }
 
-      this.zoom(-delta * ratio, e);
+      this.zoom(-delta * ratio, event);
     },
-    cropStart: function cropStart(e) {
-      if (this.disabled) {
+    cropStart: function cropStart(event) {
+      var buttons = event.buttons,
+          button = event.button;
+
+      if (this.disabled // Handle mouse event and pointer event and ignore touch event
+      || (event.type === 'mousedown' || event.type === 'pointerdown' && event.pointerType === 'mouse') && ( // No primary button (Usually the left button)
+      isNumber(buttons) && buttons !== 1 || isNumber(button) && button !== 0 // Open context menu
+      || event.ctrlKey)) {
         return;
       }
 
@@ -1795,20 +1892,20 @@
           pointers = this.pointers;
       var action;
 
-      if (e.changedTouches) {
+      if (event.changedTouches) {
         // Handle touch event
-        forEach(e.changedTouches, function (touch) {
+        forEach(event.changedTouches, function (touch) {
           pointers[touch.identifier] = getPointer(touch);
         });
       } else {
         // Handle mouse event and pointer event
-        pointers[e.pointerId || 0] = getPointer(e);
+        pointers[event.pointerId || 0] = getPointer(event);
       }
 
       if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) {
         action = ACTION_ZOOM;
       } else {
-        action = getData(e.target, DATA_ACTION);
+        action = getData(event.target, DATA_ACTION);
       }
 
       if (!REGEXP_ACTIONS.test(action)) {
@@ -1816,14 +1913,14 @@
       }
 
       if (dispatchEvent(this.element, EVENT_CROP_START, {
-        originalEvent: e,
+        originalEvent: event,
         action: action
       }) === false) {
         return;
       } // This line is required for preventing page zooming in iOS browsers
 
 
-      e.preventDefault();
+      event.preventDefault();
       this.action = action;
       this.cropping = false;
 
@@ -1832,7 +1929,7 @@
         addClass(this.dragBox, CLASS_MODAL);
       }
     },
-    cropMove: function cropMove(e) {
+    cropMove: function cropMove(event) {
       var action = this.action;
 
       if (this.disabled || !action) {
@@ -1840,27 +1937,27 @@
       }
 
       var pointers = this.pointers;
-      e.preventDefault();
+      event.preventDefault();
 
       if (dispatchEvent(this.element, EVENT_CROP_MOVE, {
-        originalEvent: e,
+        originalEvent: event,
         action: action
       }) === false) {
         return;
       }
 
-      if (e.changedTouches) {
-        forEach(e.changedTouches, function (touch) {
+      if (event.changedTouches) {
+        forEach(event.changedTouches, function (touch) {
           // The first parameter should not be undefined (#432)
           assign(pointers[touch.identifier] || {}, getPointer(touch, true));
         });
       } else {
-        assign(pointers[e.pointerId || 0] || {}, getPointer(e, true));
+        assign(pointers[event.pointerId || 0] || {}, getPointer(event, true));
       }
 
-      this.change(e);
+      this.change(event);
     },
-    cropEnd: function cropEnd(e) {
+    cropEnd: function cropEnd(event) {
       if (this.disabled) {
         return;
       }
@@ -1868,19 +1965,19 @@
       var action = this.action,
           pointers = this.pointers;
 
-      if (e.changedTouches) {
-        forEach(e.changedTouches, function (touch) {
+      if (event.changedTouches) {
+        forEach(event.changedTouches, function (touch) {
           delete pointers[touch.identifier];
         });
       } else {
-        delete pointers[e.pointerId || 0];
+        delete pointers[event.pointerId || 0];
       }
 
       if (!action) {
         return;
       }
 
-      e.preventDefault();
+      event.preventDefault();
 
       if (!Object.keys(pointers).length) {
         this.action = '';
@@ -1892,14 +1989,14 @@
       }
 
       dispatchEvent(this.element, EVENT_CROP_END, {
-        originalEvent: e,
+        originalEvent: event,
         action: action
       });
     }
   };
 
   var change = {
-    change: function change(e) {
+    change: function change(event) {
       var options = this.options,
           canvasData = this.canvasData,
           containerData = this.containerData,
@@ -1920,7 +2017,7 @@
       var renderable = true;
       var offset; // Locking aspect ratio in "free mode" by holding shift key
 
-      if (!aspectRatio && e.shiftKey) {
+      if (!aspectRatio && event.shiftKey) {
         aspectRatio = width && height ? width / height : 1;
       }
 
@@ -1966,8 +2063,6 @@
             }
 
             break;
-
-          default:
         }
       };
 
@@ -2293,7 +2388,7 @@
         // Zoom canvas
 
         case ACTION_ZOOM:
-          this.zoom(getMaxZoomRatio(pointers), e);
+          this.zoom(getMaxZoomRatio(pointers), event);
           renderable = false;
           break;
         // Create crop box
@@ -2332,8 +2427,6 @@
           }
 
           break;
-
-        default:
       }
 
       if (renderable) {
@@ -2685,7 +2778,7 @@
      * @param {boolean} [rounded=false] - Indicate if round the data values or not.
      * @returns {Object} The result cropped data.
      */
-    getData: function getData$$1() {
+    getData: function getData() {
       var rounded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var options = this.options,
           imageData = this.imageData,
@@ -2741,7 +2834,7 @@
      * @param {Object} data - The new data.
      * @returns {Cropper} this
      */
-    setData: function setData$$1(data) {
+    setData: function setData(data) {
       var options = this.options,
           imageData = this.imageData,
           canvasData = this.canvasData;
@@ -3115,9 +3208,7 @@
 
   var AnotherCropper = WINDOW.Cropper;
 
-  var Cropper =
-  /*#__PURE__*/
-  function () {
+  var Cropper = /*#__PURE__*/function () {
     /**
      * Create a new Cropper.
      * @param {Element} element - The target element for cropping.
@@ -3166,7 +3257,7 @@
 
           if (!url) {
             return;
-          } // e.g.: "http://example.com/img/picture.jpg"
+          } // e.g.: "https://example.com/img/picture.jpg"
 
 
           url = element.src;
@@ -3198,28 +3289,38 @@
         if (!options.checkOrientation || !window.ArrayBuffer) {
           this.clone();
           return;
-        } // XMLHttpRequest disallows to open a Data URL in some browsers like IE11 and Safari
+        } // Detect the mime type of the image directly if it is a Data URL
 
 
         if (REGEXP_DATA_URL.test(url)) {
+          // Read ArrayBuffer from Data URL of JPEG images directly for better performance
           if (REGEXP_DATA_URL_JPEG.test(url)) {
             this.read(dataURLToArrayBuffer(url));
           } else {
+            // Only a JPEG image may contains Exif Orientation information,
+            // the rest types of Data URLs are not necessary to check orientation at all.
             this.clone();
           }
 
           return;
-        }
+        } // 1. Detect the mime type of the image by a XMLHttpRequest.
+        // 2. Load the image as ArrayBuffer for reading orientation if its a JPEG image.
+
 
         var xhr = new XMLHttpRequest();
         var clone = this.clone.bind(this);
         this.reloading = true;
-        this.xhr = xhr;
-        xhr.ontimeout = clone;
+        this.xhr = xhr; // 1. Cross origin requests are only supported for protocol schemes:
+        // http, https, data, chrome, chrome-extension.
+        // 2. Access to XMLHttpRequest from a Data URL will be blocked by CORS policy
+        // in some browsers as IE11 and Safari.
+
         xhr.onabort = clone;
         xhr.onerror = clone;
+        xhr.ontimeout = clone;
 
         xhr.onprogress = function () {
+          // Abort the request directly if it not a JPEG image for better performance
           if (xhr.getResponseHeader('content-type') !== MIME_TYPE_JPEG) {
             xhr.abort();
           }
@@ -3237,9 +3338,10 @@
 
         if (options.checkCrossOrigin && isCrossOriginURL(url) && element.crossOrigin) {
           url = addTimestamp(url);
-        }
+        } // The third parameter is required for avoiding side-effect (#682)
+
 
-        xhr.open('GET', url);
+        xhr.open('GET', url, true);
         xhr.responseType = 'arraybuffer';
         xhr.withCredentials = element.crossOrigin === 'use-credentials';
         xhr.send();
@@ -3248,15 +3350,16 @@
       key: "read",
       value: function read(arrayBuffer) {
         var options = this.options,
-            imageData = this.imageData;
+            imageData = this.imageData; // Reset the orientation value to its default value 1
+        // as some iOS browsers will render image with its orientation
+
         var orientation = resetAndGetOrientation(arrayBuffer);
         var rotate = 0;
         var scaleX = 1;
         var scaleY = 1;
 
         if (orientation > 1) {
-          // Generate a new Data URL with the orientation value set to 1
-          // as some iOS browsers will render image with its orientation
+          // Generate a new URL which has the default orientation value
           this.url = arrayBufferToDataURL(arrayBuffer, MIME_TYPE_JPEG);
 
           var _parseOrientation = parseOrientation(orientation);
@@ -3282,19 +3385,16 @@
       value: function clone() {
         var element = this.element,
             url = this.url;
-        var crossOrigin;
-        var crossOriginUrl;
+        var crossOrigin = element.crossOrigin;
+        var crossOriginUrl = url;
 
         if (this.options.checkCrossOrigin && isCrossOriginURL(url)) {
-          crossOrigin = element.crossOrigin;
+          if (!crossOrigin) {
+            crossOrigin = 'anonymous';
+          } // Bust cache when there is not a "crossOrigin" property (#519)
 
-          if (crossOrigin) {
-            crossOriginUrl = url;
-          } else {
-            crossOrigin = 'anonymous'; // Bust cache when there is not a "crossOrigin" property
 
-            crossOriginUrl = addTimestamp(url);
-          }
+          crossOriginUrl = addTimestamp(url);
         }
 
         this.crossOrigin = crossOrigin;
@@ -3306,6 +3406,7 @@
         }
 
         image.src = crossOriginUrl || url;
+        image.alt = element.alt || 'The image to crop';
         this.image = image;
         image.onload = this.start.bind(this);
         image.onerror = this.stop.bind(this);
@@ -3317,11 +3418,13 @@
       value: function start() {
         var _this2 = this;
 
-        var image = this.isImg ? this.element : this.image;
+        var image = this.image;
         image.onload = null;
         image.onerror = null;
-        this.sizing = true;
-        var IS_SAFARI = WINDOW.navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(WINDOW.navigator.userAgent);
+        this.sizing = true; // Match all browsers that use WebKit as the layout engine in iOS devices,
+        // such as Safari for iOS, Chrome for iOS, and in-app browsers.
+
+        var isIOSWebKit = WINDOW.navigator && /(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(WINDOW.navigator.userAgent);
 
         var done = function done(naturalWidth, naturalHeight) {
           assign(_this2.imageData, {
@@ -3329,14 +3432,15 @@
             naturalHeight: naturalHeight,
             aspectRatio: naturalWidth / naturalHeight
           });
+          _this2.initialImageData = assign({}, _this2.imageData);
           _this2.sizing = false;
           _this2.sized = true;
 
           _this2.build();
-        }; // Modern browsers (except Safari)
+        }; // Most modern browsers (excepts iOS WebKit)
 
 
-        if (image.naturalWidth && !IS_SAFARI) {
+        if (image.naturalWidth && !isIOSWebKit) {
           done(image.naturalWidth, image.naturalHeight);
           return;
         }
@@ -3348,15 +3452,15 @@
         sizingImage.onload = function () {
           done(sizingImage.width, sizingImage.height);
 
-          if (!IS_SAFARI) {
+          if (!isIOSWebKit) {
             body.removeChild(sizingImage);
           }
         };
 
-        sizingImage.src = image.src; // iOS Safari will convert the image automatically
+        sizingImage.src = image.src; // iOS WebKit will convert the image automatically
         // with its orientation once append it into DOM (#279)
 
-        if (!IS_SAFARI) {
+        if (!isIOSWebKit) {
           sizingImage.style.cssText = 'left:0;' + 'max-height:none!important;' + 'max-width:none!important;' + 'min-height:0!important;' + 'min-width:0!important;' + 'opacity:0;' + 'position:absolute;' + 'top:0;' + 'z-index:-1;';
           body.appendChild(sizingImage);
         }