Pixel coords for the image crop

Apparently the additional parameter pixelCrop of onChangeComplete is always undefined.

And also, is there any way to set the crop on pixel units? Instead of converting it from pixel units to percentage every time in order to use it?

[zackify]

Doing this is really easy. Here’s how my component looks:

getBase64(file) {
    this.setState({ loading: true, file });

    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      var image = new Image();
      image.src = reader.result;

      image.onload = () => {
        this.setState({
          loading: false,
          image: reader.result,
          height: image.height,
          width: image.width,
        });
      };
    };
    reader.onerror = error => console.log('Error: ', error);
  }

Get the base64 of a file object, render it to an image, get the height and width. Then, pass the height and width to your cropper props, something like this:

          minWidth: 1920 / image.width * 100,
          minHeight: 350 / image.height * 100,
          maxWidth: 1920 / image.width * 100,
          maxHeight: 350 / image.height * 100,
   

Now you have percentages from pixels, for anyone else who needs it 😃

[WaqqarSuleman]

I used the natualHeight and naturalWidth img properties: http://www.w3schools.com/jsref/prop_img_naturalheight.asp

Getting naturalWidth and naturalHeight as 0, any idea why?