build: release 4.0.0-beta

fengyuanchen · Mar 3, 2018 · 850ffde · 850ffde
1 parent 8b21efc
commit 850ffde
Show file tree

Hide file tree

Showing 13 changed files with 159 additions and 109 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.0.0-beta (Mar 3, 2018)
+
+- Upgrade Cropper.js from 1.3.1 to 1.3.2.
+
 ## 4.0.0-alpha (Mar 1, 2018)
 
 - The core code of Cropper is replaced with [Cropper.js](https://github.com/fengyuanchen/cropperjs) now.

diff --git a/README.md b/README.md
@@ -57,10 +57,11 @@ img {
 ```
 
 ```js
-$('#image').cropper({
+var $image = $('#image');
+
+$image.cropper({
   aspectRatio: 16 / 9,
   crop: function(event) {
-    // Output the result data for cropping image.
     console.log(event.detail.x);
     console.log(event.detail.y);
     console.log(event.detail.width);
@@ -70,12 +71,9 @@ $('#image').cropper({
     console.log(event.detail.scaleY);
   }
 });
-```
 
-After initialize can get `Cropper` instance:
-
-```js
-$('#image').data('cropper');
+// Get the Cropper.js instance after initialized
+var cropper = $image.data('cropper');
 ```
 
 ## Options

diff --git a/dist/cropper.common.js b/dist/cropper.common.js
@@ -1,11 +1,11 @@
 /*!
- * Cropper v4.0.0-alpha
+ * Cropper v4.0.0-beta
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright (c) 2014-2018 Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2018-03-01T14:21:13.980Z
+ * Date: 2018-03-03T03:59:36.917Z
  */
 
 'use strict';
@@ -841,7 +841,9 @@ function getRotatedSizes(_ref5) {
  * @returns {HTMLCanvasElement} The result canvas.
  */
 function getSourceCanvas(image, _ref6, _ref7, _ref8) {
-  var _ref6$rotate = _ref6.rotate,
+  var imageNaturalWidth = _ref6.naturalWidth,
+      imageNaturalHeight = _ref6.naturalHeight,
+      _ref6$rotate = _ref6.rotate,
       rotate = _ref6$rotate === undefined ? 0 : _ref6$rotate,
       _ref6$scaleX = _ref6.scaleX,
       scaleX = _ref6$scaleX === undefined ? 1 : _ref6$scaleX,
@@ -879,7 +881,12 @@ function getSourceCanvas(image, _ref6, _ref7, _ref8) {
   }, 'cover');
   var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));
   var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight));
-  var params = [-width / 2, -height / 2, width, height];
+
+  // Note: should always use image's natural sizes for drawing as
+  // imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90
+  var destWidth = Math.min(maxSizes.width, Math.max(minSizes.width, imageNaturalWidth));
+  var destHeight = Math.min(maxSizes.height, Math.max(minSizes.height, imageNaturalHeight));
+  var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight];
 
   canvas.width = normalizeDecimalNumber(width);
   canvas.height = normalizeDecimalNumber(height);

diff --git a/dist/cropper.css b/dist/cropper.css
@@ -1,11 +1,11 @@
 /*!
- * Cropper v4.0.0-alpha
+ * Cropper v4.0.0-beta
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright (c) 2014-2018 Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2018-03-01T14:21:03.491Z
+ * Date: 2018-03-03T03:58:44.059Z
  */
 
 .cropper-container {

diff --git a/dist/cropper.esm.js b/dist/cropper.esm.js
@@ -1,11 +1,11 @@
 /*!
- * Cropper v4.0.0-alpha
+ * Cropper v4.0.0-beta
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright (c) 2014-2018 Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2018-03-01T14:21:13.980Z
+ * Date: 2018-03-03T03:59:36.917Z
  */
 
 import $ from 'jquery';
@@ -837,7 +837,9 @@ function getRotatedSizes(_ref5) {
  * @returns {HTMLCanvasElement} The result canvas.
  */
 function getSourceCanvas(image, _ref6, _ref7, _ref8) {
-  var _ref6$rotate = _ref6.rotate,
+  var imageNaturalWidth = _ref6.naturalWidth,
+      imageNaturalHeight = _ref6.naturalHeight,
+      _ref6$rotate = _ref6.rotate,
       rotate = _ref6$rotate === undefined ? 0 : _ref6$rotate,
       _ref6$scaleX = _ref6.scaleX,
       scaleX = _ref6$scaleX === undefined ? 1 : _ref6$scaleX,
@@ -875,7 +877,12 @@ function getSourceCanvas(image, _ref6, _ref7, _ref8) {
   }, 'cover');
   var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));
   var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight));
-  var params = [-width / 2, -height / 2, width, height];
+
+  // Note: should always use image's natural sizes for drawing as
+  // imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90
+  var destWidth = Math.min(maxSizes.width, Math.max(minSizes.width, imageNaturalWidth));
+  var destHeight = Math.min(maxSizes.height, Math.max(minSizes.height, imageNaturalHeight));
+  var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight];
 
   canvas.width = normalizeDecimalNumber(width);
   canvas.height = normalizeDecimalNumber(height);

diff --git a/dist/cropper.js b/dist/cropper.js
@@ -1,11 +1,11 @@
 /*!
- * Cropper v4.0.0-alpha
+ * Cropper v4.0.0-beta
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright (c) 2014-2018 Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2018-03-01T14:21:13.980Z
+ * Date: 2018-03-03T03:59:36.917Z
  */
 
 (function (global, factory) {
@@ -843,7 +843,9 @@ function getRotatedSizes(_ref5) {
  * @returns {HTMLCanvasElement} The result canvas.
  */
 function getSourceCanvas(image, _ref6, _ref7, _ref8) {
-  var _ref6$rotate = _ref6.rotate,
+  var imageNaturalWidth = _ref6.naturalWidth,
+      imageNaturalHeight = _ref6.naturalHeight,
+      _ref6$rotate = _ref6.rotate,
       rotate = _ref6$rotate === undefined ? 0 : _ref6$rotate,
       _ref6$scaleX = _ref6.scaleX,
       scaleX = _ref6$scaleX === undefined ? 1 : _ref6$scaleX,
@@ -881,7 +883,12 @@ function getSourceCanvas(image, _ref6, _ref7, _ref8) {
   }, 'cover');
   var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));
   var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight));
-  var params = [-width / 2, -height / 2, width, height];
+
+  // Note: should always use image's natural sizes for drawing as
+  // imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90
+  var destWidth = Math.min(maxSizes.width, Math.max(minSizes.width, imageNaturalWidth));
+  var destHeight = Math.min(maxSizes.height, Math.max(minSizes.height, imageNaturalHeight));
+  var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight];
 
   canvas.width = normalizeDecimalNumber(width);
   canvas.height = normalizeDecimalNumber(height);

diff --git a/dist/cropper.min.css b/dist/cropper.min.css
diff --git a/dist/cropper.min.js b/dist/cropper.min.js
diff --git a/docs/css/cropper.css b/docs/css/cropper.css
@@ -1,11 +1,11 @@
 /*!
- * Cropper v4.0.0-alpha
+ * Cropper v4.0.0-beta
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright (c) 2014-2018 Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2018-03-01T14:21:03.491Z
+ * Date: 2018-03-03T03:58:44.059Z
  */
 
 .cropper-container {

diff --git a/docs/index.html b/docs/index.html
@@ -49,7 +49,7 @@
     <div class="container">
       <div class="row">
         <div class="col-md">
-          <h1>Cropper <small class="h6">v4.0.0-alpha</small></h1>
+          <h1>Cropper <small class="h6">v4.0.0-beta</small></h1>
           <p class="lead">A simple jQuery image cropping plugin.</p>
         </div>
         <div class="col-md">

diff --git a/docs/js/cropper.js b/docs/js/cropper.js
@@ -1,11 +1,11 @@
 /*!
- * Cropper v4.0.0-alpha
+ * Cropper v4.0.0-beta
  * https://github.com/fengyuanchen/cropper
  *
  * Copyright (c) 2014-2018 Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2018-03-01T14:21:13.980Z
+ * Date: 2018-03-03T03:59:36.917Z
  */
 
 (function (global, factory) {
@@ -843,7 +843,9 @@ function getRotatedSizes(_ref5) {
  * @returns {HTMLCanvasElement} The result canvas.
  */
 function getSourceCanvas(image, _ref6, _ref7, _ref8) {
-  var _ref6$rotate = _ref6.rotate,
+  var imageNaturalWidth = _ref6.naturalWidth,
+      imageNaturalHeight = _ref6.naturalHeight,
+      _ref6$rotate = _ref6.rotate,
       rotate = _ref6$rotate === undefined ? 0 : _ref6$rotate,
       _ref6$scaleX = _ref6.scaleX,
       scaleX = _ref6$scaleX === undefined ? 1 : _ref6$scaleX,
@@ -881,7 +883,12 @@ function getSourceCanvas(image, _ref6, _ref7, _ref8) {
   }, 'cover');
   var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));
   var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight));
-  var params = [-width / 2, -height / 2, width, height];
+
+  // Note: should always use image's natural sizes for drawing as
+  // imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90
+  var destWidth = Math.min(maxSizes.width, Math.max(minSizes.width, imageNaturalWidth));
+  var destHeight = Math.min(maxSizes.height, Math.max(minSizes.height, imageNaturalHeight));
+  var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight];
 
   canvas.width = normalizeDecimalNumber(width);
   canvas.height = normalizeDecimalNumber(height);