title: How to set crop parameters to original image in React?
body: <p>I am trying to crop an image before uploading it through an API. I am showing a modal (<a href="http://www.material-ui.com/#/components/dialog" rel="nofollow noreferrer"><code>Dialog</code></a>) to do this, and using this library <a href="https://github.com/DominicTobias/react-image-crop" rel="nofollow noreferrer">react-image-crop</a> to achieve this.</p>
  <p>Here is the code snippet:</p>
  <pre><code>showCropImageModal() {
      const actions = [
          &lt;FlatButton
            label=&quot;Cancel&quot;
            primary={true}
            onClick={this.handleCancel}
          /&gt;,
          &lt;FlatButton
            label=&quot;Crop&quot;
            primary={true}
            keyboardFocused={true}
            onClick={this.handleCropClose}
          /&gt;,
      ];
      
      if (this.state.showImageCropper) {
          return (
              &lt;div&gt;
                  &lt;Dialog
                      title=&quot;Crop the image&quot;
                      actions={actions}
                      modal={true}
                      open={this.state.showImageCropper}
                      autoScrollBodyContent={true}
                  &gt;
                      &lt;ReactCrop
                          src={this.state.selectedImageURL} 
                          crop={this.state.crop}
                          onComplete={(crop, pixel) =&gt; {console.log(crop, pixel)}}
                          onChange={(crop) =&gt; { console.log(crop); this.setState({crop}); }}
                      /&gt;
                  &lt;/Dialog&gt;
  
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  <p>On &quot;Crop&quot; action I am handling it using the <code>handleCropClose</code> function:</p>
  <pre><code>handleCropClose(){
      let {selectedFile, crop} = this.state
      const croppedImg = this.getCroppedImg(selectedFile, crop.width, crop.height, crop.x, crop.y, 2);
      console.log(croppedImg)
      this.setState({showImageCropper: false})
  }
  </code></pre>
  <p>And here is <code>getCroppedImg</code> code:</p>
  <pre><code>getCroppedImg(imgObj, newWidth, newHeight, startX, startY, ratio) {
      /* the parameters: - the image element - the new width - the new height - the x point we start taking pixels - the y point we start taking pixels - the ratio */
      // Set up canvas for thumbnail
      console.log(imgObj)
      var img = new Image();
      img.src = this.state.selectedImageURL;
      var tnCanvas = this.refs.canvas;
      tnCanvas.width = newWidth;
      tnCanvas.height = newHeight;
      tnCanvas.getContext('2d').drawImage(img, startX, startY, newWidth, newHeight);
      return tnCanvas.toDataURL(&quot;image/png&quot;);
  }
  </code></pre>
  <p>Now, I am not able to get the right preview or new image file object so that I could use that to show as preview in the modal there itself and than use the same to upload it. I am not even getting the right image ratio. Any help?</p>
  <p>Here is the image:
  <a href="https://i.stack.imgur.com/7yFw2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7yFw2.png" alt="enter image description here" /></a></p>