minHeight and minWidth not working about react-image-crop HOT 7 CLOSED

@nickensoul are you trying to pass pixel values? The values are 0-100%. It can be a bit inconvenient but this is how the library is responsive (by using %). You can convert to a % if you like by setting the values in onImageLoaded as there you have the image object which has the width and height.

from react-image-crop.

@dominictobias thanks for the quick reply!
Yep, according to the docs I'm trying to pass number as a percentage values. As mentioned above, I use it this way:

<ReactCrop
  src={src}
  crop={crop}
  minHeight={100}
  maxHeight={100}
  onImageLoaded={this.onImageLoaded}
  onComplete={this.onCropComplete}
  onChange={this.onCropChange}
/>

But I've got it. If I set e.g. minHeight={50}, it works fine, but if more – doesn't. Actually, it works, but unexpected: if minHeight is 80, then start position of drag must be such that actual selection height' height is at least 80. In other worlds, start position of the drug may be in edges of image only at Y axis, e.g. for minHeight={80}, it is 20% of image on its edges. So if minHeight={100}, it's impossible to get position of start at <= 0% or >=100% of image height in coordinates.

Sorry for my English, that's was hard to explain 😆

from react-image-crop.

Hi are you using the latest version? Also post what props you are passing to the component please

from react-image-crop.

Hi,

I'm using the v1.0.0-rc8.

The props i pass to the component are:

src={this.props.src}
onImageLoaded={this.onImageLoaded}
onComplete={this.onCropComplete}
crop={crop}
outputPixelUnits={true}

where crop has these fields:

crop.x = this.props.imageState.x / naturalWidth * 100;
crop.y = this.props.imageState.y / naturalHeight * 100;
crop.height = this.props.imageState.height / naturalHeight * 100;
crop.width = this.props.imageState.width / naturalWidth * 100;

// TODO the following are only test values
crop.minWidth = 25;
crop.minHeight = 25;

I would expect to have a min crop area as big as the 25% of the total image area. But apparently it does not work that way.

from react-image-crop.

@riccardolorenzon rather than passing the minHeight/maxHeight into the crop object, pass it as a prop - e.g.

crop={crop}
minHeight={25}
maxHeight={25}

from react-image-crop.

Closing - let me know if you have probs with that fix

from react-image-crop.

Hello!
I've just tried to set minHeight={100} and maxHeight={100} in demo codesandbox but it doesn't work, I just cannot select anything at all.
What am I doing wrong?
Thanks!

from react-image-crop.