From d16cf45ea3b804a62d6825555e4d00a496160045 Mon Sep 17 00:00:00 2001
From: Dominic Tobias <dominic.tobias@gmail.com>
Date: Wed, 2 Jan 2019 11:33:09 +0000
Subject: [PATCH] Auto aspect fix (#234)

* Ensure aspect is correct even if width and height are provided
---
 .eslintrc.js     |  2 ++
 demo/demo.js     | 42 ++++++++++++++++++++++--------------------
 lib/ReactCrop.js | 26 +++++++++++++++++++++-----
 3 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 7119347..d8eac93 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,6 +8,8 @@ module.exports = {
   ],
   "rules": {
     "operator-linebreak": 0,
+    "no-restricted-globals": 0,
+    "max-len": ["error", { "code": 120 }],
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react/destructuring-assignment": 0,
   },
diff --git a/demo/demo.js b/demo/demo.js
index 3426491..cdbfa91 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -18,7 +18,7 @@ class App extends PureComponent {
       aspect: 1,
       width: 50,
     },
-  };
+  }
 
   onSelectFile = (e) => {
     if (e.target.files && e.target.files.length > 0) {
@@ -28,34 +28,25 @@ class App extends PureComponent {
       });
       reader.readAsDataURL(e.target.files[0]);
     }
-  };
+  }
 
   onImageLoaded = (image, pixelCrop) => {
-    const { crop } = this.state;
-    if (crop.aspect && crop.height && crop.width) {
-      this.setState({
-        crop: { ...crop, height: null },
-      });
-    }
     this.imageRef = image;
-  };
+    this.makeClientCrop(this.state.crop, pixelCrop);
+  }
 
-  onCropComplete = async (crop, pixelCrop) => {
-    if (crop.width && crop.height) {
-      const croppedImageUrl = await this.getCroppedImg(
-        this.imageRef,
-        pixelCrop,
-        'newFile.jpeg',
-      );
-      this.setState({ croppedImageUrl });
-    }
-  };
+  onCropComplete = (crop, pixelCrop) => {
+    console.log('onCropComplete', { crop, pixelCrop });
+    this.makeClientCrop(crop, pixelCrop);
+  }
 
   onCropChange = (crop) => {
+    console.log('onCropChange', crop);
     this.setState({ crop });
-  };
+  }
 
   getCroppedImg(image, pixelCrop, fileName) {
+    console.log('getCroppedImg', { image, pixelCrop, fileName });
     const canvas = document.createElement('canvas');
     canvas.width = pixelCrop.width;
     canvas.height = pixelCrop.height;
@@ -83,6 +74,17 @@ class App extends PureComponent {
     });
   }
 
+  async makeClientCrop(crop, pixelCrop) {
+    if (this.imageRef && crop.width && crop.height) {
+      const croppedImageUrl = await this.getCroppedImg(
+        this.imageRef,
+        pixelCrop,
+        'newFile.jpeg',
+      );
+      this.setState({ croppedImageUrl });
+    }
+  }
+
   render() {
     const { croppedImageUrl } = this.state;
 
diff --git a/lib/ReactCrop.js b/lib/ReactCrop.js
index d132960..f0335dd 100644
--- a/lib/ReactCrop.js
+++ b/lib/ReactCrop.js
@@ -19,11 +19,11 @@ function getClientPos(e) {
   let pageY;
 
   if (e.touches) {
-    pageX = e.touches[0].pageX;
-    pageY = e.touches[0].pageY;
+    ({ pageX } = e.touches[0]);
+    ({ pageY } = e.touches[0]);
   } else {
-    pageX = e.pageX;
-    pageY = e.pageY;
+    ({ pageX } = e);
+    ({ pageY } = e);
   }
 
   return {
@@ -83,8 +83,24 @@ function makeAspectCrop(crop, imageAspect) {
   return completeCrop;
 }
 
+function isAspectInvalid(crop, width, height) {
+  if ((!crop.width && crop.height) || (crop.width && !crop.height)) {
+    return true;
+  }
+
+  if (
+    crop.width &&
+    crop.height &&
+    Math.round((height * (crop.height / 100)) * crop.aspect) !== Math.round((width * (crop.width / 100)))
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
 function resolveCrop(crop, image) {
-  if (crop && crop.aspect && ((!crop.width && crop.height) || (crop.width && !crop.height))) {
+  if (crop && crop.aspect && isAspectInvalid(crop, image.naturalWidth, image.naturalHeight)) {
     return makeAspectCrop(crop, image.naturalWidth / image.naturalHeight);
   }