Add crop ratio prop

isysd-mirror · Oct 4, 2018 · 62eff90 · 62eff90
1 parent 39d2ef4
commit 62eff90
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/image-upload/components/CropperDialog.js b/src/image-upload/components/CropperDialog.js
@@ -29,7 +29,7 @@ class CropperDialog extends Component {
   }
 
   render () {
-    const { classes, open, handleClose, imgSrc, handleCrop, handleCancel, cropperRef } = this.props
+    const { classes, open, handleClose, imgSrc, handleCancel, cropperRef, cropRatio } = this.props
     console.log(cropperRef)
     return (
       <Dialog
@@ -49,7 +49,7 @@ class CropperDialog extends Component {
                   originX={100}
                   originY={100}
                   ref={this.cropper}
-                  ratio={1}
+                  ratio={cropRatio}
                 />
               )}
             </div>
@@ -71,7 +71,6 @@ class CropperDialog extends Component {
   }
 
   async handleCrop () {
-    console.log('CropperDialog handleCrop: ', this.cropper.current)
     const cropped = this.cropper.current.crop()
     this.props.handleCrop(cropped)
   }
@@ -84,7 +83,8 @@ CropperDialog.propTypes = {
   imgSrc: PropTypes.string,
   handleCrop: PropTypes.func.isRequired,
   cropperRef: PropTypes.any.isRequired,
-  handleCancel: PropTypes.func.isRequired
+  handleCancel: PropTypes.func.isRequired,
+  cropRatio: PropTypes.number.isRequired
 }
 
 export default withStyles(styles)(CropperDialog)
diff --git a/src/image-upload/index.js b/src/image-upload/index.js
@@ -31,7 +31,8 @@ const cropConfigDefault = {
   x: 10,
   y: 10,
   width: 200,
-  height: 200
+  height: 200,
+  ratio: 1 / 1
 }
 
 // default config for image resize and quality
@@ -78,7 +79,8 @@ class ImageUpload extends Component {
   render () {
     const {
       classes,
-      existingImage
+      existingImage,
+      cropRatio
     } = this.props
 
     let image = null
@@ -114,6 +116,7 @@ class ImageUpload extends Component {
               handleCancel={this.handleCancel}
               cropImagePreview={this.cropPreview}
               cropperRef={this.cropper}
+              cropRatio={cropRatio}
             />
           </React.Fragment>
         )}
@@ -145,7 +148,6 @@ class ImageUpload extends Component {
   }
 
   async handleCrop (cropped) {
-    console.log('handleCrop', this.cropped)
     const croppedBlob = await imgSrcToBlob(cropped, 'image/png', 'Anonymous')
     let resizedBlob = await readAndCompressImage(croppedBlob, this.saveConfig)
 
@@ -197,6 +199,7 @@ ImageUpload.propTypes = {
   classes: PropTypes.object.isRequired,
   cropContainerConfig: PropTypes.object, // { x: 10, y: 10, width: 200, height: 200 } (default)
   cropPreviewBox: PropTypes.object, // { width: 350, height: 350 } (default)
+  cropRatio: PropTypes.number.isRequired, // ratio (width/height) image is cropped at eg. 1/1, 4/1, 16/9, 800/150
   saveImageConfig: PropTypes.object, // see imageResizeConfig above for default (default)
   containerName: PropTypes.string.isRequired, // name of Azure Container image will be saved in
   fileName: PropTypes.string.isRequired, // filename to save image as