Auto aspect fix (#234)

* Ensure aspect is correct even if width and height are provided

.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,
   },

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;
 

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);
   }