release: 3.1.4

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.1.4 (Jan 13, 2018)
+
+- Fixed a bug of rotation (#938).
+
 ## 3.1.3 (Oct 21, 2017)
 
 - Fixed a bug of render when disable one of `rotatable` and `scalable` options.

dist/cropper.common.js

@@ -1,11 +1,11 @@
 /*!
- * Cropper v3.1.3
+ * Cropper v3.1.4
  * https://github.com/fengyuanchen/cropper
  *
- * Copyright (c) 2014-2017 Chen Fengyuan
+ * Copyright (c) 2014-2018 Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2017-10-21T10:04:29.734Z
+ * Date: 2018-01-13T09:37:52.890Z
  */
 
 'use strict';
@@ -59,7 +59,7 @@ var EVENT_ERROR = 'error';
 var EVENT_LOAD = 'load';
 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_POINTER_UP = WINDOW.PointerEvent ? 'pointerup pointercancel' : 'touchend touchcancel mouseup';
 var EVENT_READY = 'ready';
 var EVENT_RESIZE = 'resize';
 var EVENT_WHEEL = 'wheel mousewheel DOMMouseScroll';
@@ -169,7 +169,79 @@ var DEFAULTS = {
 
 var TEMPLATE = '<div class="cropper-container">' + '<div class="cropper-wrap-box">' + '<div class="cropper-canvas"></div>' + '</div>' + '<div class="cropper-drag-box"></div>' + '<div class="cropper-crop-box">' + '<span class="cropper-view-box"></span>' + '<span class="cropper-dashed dashed-h"></span>' + '<span class="cropper-dashed dashed-v"></span>' + '<span class="cropper-center"></span>' + '<span class="cropper-face"></span>' + '<span class="cropper-line line-e" data-action="e"></span>' + '<span class="cropper-line line-n" data-action="n"></span>' + '<span class="cropper-line line-w" data-action="w"></span>' + '<span class="cropper-line line-s" data-action="s"></span>' + '<span class="cropper-point point-e" data-action="e"></span>' + '<span class="cropper-point point-n" data-action="n"></span>' + '<span class="cropper-point point-w" data-action="w"></span>' + '<span class="cropper-point point-s" data-action="s"></span>' + '<span class="cropper-point point-ne" data-action="ne"></span>' + '<span class="cropper-point point-nw" data-action="nw"></span>' + '<span class="cropper-point point-sw" data-action="sw"></span>' + '<span class="cropper-point point-se" data-action="se"></span>' + '</div>' + '</div>';
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var toConsumableArray = function (arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  } else {
+    return Array.from(arr);
+  }
+};
 
 /**
  * Check if the given value is a string.
@@ -475,9 +547,9 @@ function getRotatedSizes(_ref5) {
       height = _ref5.height,
       degree = _ref5.degree;
 
-  degree = Math.abs(degree);
+  degree = Math.abs(degree) % 180;
 
-  if (degree % 180 === 90) {
+  if (degree === 90) {
     return {
       width: height,
       height: width
@@ -487,10 +559,15 @@ function getRotatedSizes(_ref5) {
   var arc = degree % 90 * Math.PI / 180;
   var sinArc = Math.sin(arc);
   var cosArc = Math.cos(arc);
-
-  return {
-    width: width * cosArc + height * sinArc,
-    height: width * sinArc + height * cosArc
+  var newWidth = width * cosArc + height * sinArc;
+  var newHeight = width * sinArc + height * cosArc;
+
+  return degree > 90 ? {
+    width: newHeight,
+    height: newWidth
+  } : {
+    width: newWidth,
+    height: newHeight
   };
 }
 
@@ -555,7 +632,7 @@ function getSourceCanvas(image, _ref6, _ref7, _ref8) {
   context.scale(scaleX, scaleY);
   context.imageSmoothingEnabled = !!imageSmoothingEnabled;
   context.imageSmoothingQuality = imageSmoothingQuality;
-  context.drawImage.apply(context, [image].concat(_toConsumableArray($.map(params, function (param) {
+  context.drawImage.apply(context, [image].concat(toConsumableArray($.map(params, function (param) {
     return Math.floor(normalizeDecimalNumber(param));
   }))));
   context.restore();
@@ -1315,7 +1392,7 @@ var events = {
       $cropper.on(EVENT_DBLCLICK, proxy(this.dblclick, this));
     }
 
-    $(document).on(EVENT_POINTER_MOVE, this.onCropMove = proxy(this.cropMove, this)).on(EVENT_POINTER_UP, this.onCropEnd = proxy(this.cropEnd, this));
+    $(this.element.ownerDocument).on(EVENT_POINTER_MOVE, this.onCropMove = proxy(this.cropMove, this)).on(EVENT_POINTER_UP, this.onCropEnd = proxy(this.cropEnd, this));
 
     if (options.responsive) {
       $(window).on(EVENT_RESIZE, this.onResize = proxy(this.resize, this));
@@ -1357,7 +1434,7 @@ var events = {
       $cropper.off(EVENT_DBLCLICK, this.dblclick);
     }
 
-    $(document).off(EVENT_POINTER_MOVE, this.onCropMove).off(EVENT_POINTER_UP, this.onCropEnd);
+    $(this.element.ownerDocument).off(EVENT_POINTER_MOVE, this.onCropMove).off(EVENT_POINTER_UP, this.onCropEnd);
 
     if (options.responsive) {
       $(window).off(EVENT_RESIZE, this.onResize);
@@ -2000,8 +2077,6 @@ var change = {
   }
 };
 
-function _toConsumableArray$1(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
 var methods = {
   // Show the crop box manually
   crop: function crop() {
@@ -2722,7 +2797,7 @@ var methods = {
       params.push(dstX * scale, dstY * scale, dstWidth * scale, dstHeight * scale);
     }
 
-    context.drawImage.apply(context, [source].concat(_toConsumableArray$1($.map(params, function (param) {
+    context.drawImage.apply(context, [source].concat(toConsumableArray($.map(params, function (param) {
       return Math.floor(normalizeDecimalNumber(param));
     }))));
     return canvas;
@@ -2777,10 +2852,6 @@ var methods = {
   }
 };
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 var Cropper = function () {
   /**
    * Create a new Cropper.
@@ -2789,8 +2860,7 @@ var Cropper = function () {
    */
   function Cropper(element) {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    _classCallCheck(this, Cropper);
+    classCallCheck(this, Cropper);
 
     if (!element || !REGEXP_TAG_NAME.test(element.tagName)) {
       throw new Error('The first argument is required and must be an <img> or <canvas> element.');
@@ -2815,7 +2885,7 @@ var Cropper = function () {
     this.init();
   }
 
-  _createClass(Cropper, [{
+  createClass(Cropper, [{
     key: 'init',
     value: function init() {
       var $element = this.$element;
@@ -2896,7 +2966,8 @@ var Cropper = function () {
         _this.read(xhr.response);
       };
 
-      if (options.checkCrossOrigin && isCrossOriginURL(url) && $element.prop('crossOrigin')) {
+      // Bust cache when there is a "crossOrigin" property
+      if (options.checkCrossOrigin && isCrossOriginURL(url) && !$element.prop('crossOrigin')) {
         url = addTimestamp(url);
       }
 
@@ -3160,7 +3231,6 @@ var Cropper = function () {
       $.extend(DEFAULTS, $.isPlainObject(options) && options);
     }
   }]);
-
   return Cropper;
 }();
 

dist/cropper.css

@@ -1,11 +1,11 @@
 /*!
- * Cropper v3.1.3
+ * Cropper v3.1.4
  * https://github.com/fengyuanchen/cropper
  *
- * Copyright (c) 2014-2017 Chen Fengyuan
+ * Copyright (c) 2014-2018 Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2017-10-21T10:03:37.133Z
+ * Date: 2018-01-13T09:37:21.486Z
  */
 
 .cropper-container {
@@ -147,29 +147,29 @@
 }
 
 .cropper-line.line-e {
-  cursor: e-resize;
+  cursor: ew-resize;
   right: -3px;
   top: 0;
   width: 5px;
 }
 
 .cropper-line.line-n {
-  cursor: n-resize;
+  cursor: ns-resize;
   height: 5px;
   left: 0;
   top: -3px;
 }
 
 .cropper-line.line-w {
-  cursor: w-resize;
+  cursor: ew-resize;
   left: -3px;
   top: 0;
   width: 5px;
 }
 
 .cropper-line.line-s {
   bottom: -3px;
-  cursor: s-resize;
+  cursor: ns-resize;
   height: 5px;
   left: 0;
 }
@@ -182,21 +182,21 @@
 }
 
 .cropper-point.point-e {
-  cursor: e-resize;
+  cursor: ew-resize;
   margin-top: -3px;
   right: -3px;
   top: 50%;
 }
 
 .cropper-point.point-n {
-  cursor: n-resize;
+  cursor: ns-resize;
   left: 50%;
   margin-left: -3px;
   top: -3px;
 }
 
 .cropper-point.point-w {
-  cursor: w-resize;
+  cursor: ew-resize;
   left: -3px;
   margin-top: -3px;
   top: 50%;
@@ -210,26 +210,26 @@
 }
 
 .cropper-point.point-ne {
-  cursor: ne-resize;
+  cursor: nesw-resize;
   right: -3px;
   top: -3px;
 }
 
 .cropper-point.point-nw {
-  cursor: nw-resize;
+  cursor: nwse-resize;
   left: -3px;
   top: -3px;
 }
 
 .cropper-point.point-sw {
   bottom: -3px;
-  cursor: sw-resize;
+  cursor: nesw-resize;
   left: -3px;
 }
 
 .cropper-point.point-se {
   bottom: -3px;
-  cursor: se-resize;
+  cursor: nwse-resize;
   height: 20px;
   opacity: 1;
   right: -3px;