fix default crop radius calculation

kirill3333 · Dec 13, 2018 · 6f0be6c · 6f0be6c
1 parent 74d4486
commit 6f0be6c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -79,7 +79,7 @@ ReactDOM.render(<App /> , document.getElementById('root'))
 | height                 | Number           | The height of the editor (image will fit to this height if neither imageHeight, nor imageWidth is set)
 | imageWidth             | Number           | The desired width of the image, can not be used together with imageHeight
 | imageHeight            | Number           | The desired height of the image, can not be used together with imageWidth
-| cropRadius             | Number           | The crop area radius in px (default: 100)
+| cropRadius             | Number           | The crop area radius in px (default: calculated as min image with/height / 3)
 | cropColor              | String           | The crop border color (default: white)
 | lineWidth              | Number           | The crop border width (default: 4)
 | minCropRadius          | Number           | The min crop area radius in px (default: 30)

diff --git a/example/app.jsx b/example/app.jsx
@@ -58,7 +58,6 @@ class App extends React.Component {
             <Avatar
               width={390}
               height={295}
-              cropRadius={150}
               onCrop={this.onCropDefault}
               onClose={this.onCloseDefault}
               // src={this.state.src}
@@ -83,7 +82,7 @@ class App extends React.Component {
             <Avatar
               width={390}
               height={295}
-              cropRadius={150}
+              cropRadius={50}
               onCrop={this.onCrop}
               onClose={this.onClose}
               src={this.state.src}
@@ -107,4 +106,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App /> , document.getElementById('root'))
+ReactDOM.render(<App /> , document.getElementById('root'))
diff --git a/src/avatar.jsx b/src/avatar.jsx
@@ -203,6 +203,7 @@ class Avatar extends React.Component {
   }
 
   init() {
+    const { height, minCropRadius, cropRadius } = this.props;
     const originalWidth = this.image.width;
     const originalHeight = this.image.height;
     const ration = originalHeight / originalWidth;
@@ -221,18 +222,18 @@ class Avatar extends React.Component {
       imgWidth = imageWidth;
       imgHeight = imgWidth * ration || originalHeight;
     } else {
-      imgHeight = this.props.height || originalHeight;
+      imgHeight = height || originalHeight;
       imgWidth = imgHeight / ration;
     }
 
     const scale = imgHeight / originalHeight;
-    const cropRadius = Math.max(this.props.minCropRadius, this.props.cropRadius || Math.min(imgWidth, imgHeight) / 2);
+    const calculatedRadius = Math.max(minCropRadius, (cropRadius || Math.min(imgWidth, imgHeight) / 3));
 
     this.setState({
       imgWidth,
       imgHeight,
       scale,
-      cropRadius
+      cropRadius: calculatedRadius
     }, this.initCanvas)
   }
 
@@ -439,11 +440,13 @@ class Avatar extends React.Component {
   }
 
   render() {
+    const { width, height } = this.props;
+
     const style = {
       display: 'flex',
       justifyContent: 'center',
       backgroundColor: this.backgroundColor,
-      width: this.props.width || this.width,
+      width: width || this.width,
       position: 'relative'
     };
 
@@ -458,12 +461,12 @@ class Avatar extends React.Component {
 
     const label = this.props.label;
 
-    const labelStyle = { ...this.props.labelStyle, ...{ lineHeight: (this.props.height || 200) + 'px' } };
+    const labelStyle = { ...this.props.labelStyle, ...{ lineHeight: (height || 200) + 'px' } };
 
     const borderStyle = {
       ...this.props.borderStyle, ...{
-        width: this.props.width || 200,
-        height: this.props.height || 200
+        width: width || 200,
+        height: height || 200
       }
     };