Possibility for variable aspect ratio locking (i.e. min + max aspect ratio)?

Hi there, thanks so much for this library! Just threw it into a project and got up and running nice and easily (just had to tweak some CSS things to ensure vertical images don’t overflow the cropping area).

I have a use case I’d like to implement somehow. For example, I want to allow people to add poster images to my app - in this case, a poster can be of multiple sizes, as some countries / cinemas choose to use a slightly different aspect ratio for their posters. It’s not major differences, but the differences do exist. I’d like to allow cropping between the minimum aspect ratio and the maximum aspect ratio within those sizes.

My aspect ratios might look like this:

  {
    minAspect: 0.66,
    maxAspect: 0.75,
  }

I think this is not currently possible with react-image-crop. Is this something you think could be implemented? I’m happy to try take a look at it myself as well and make a PR.

[samstanding]

I was able to get this working by changing my onChange to this:

const onChange = (c, percentCrop) => {
   const newCrop = crop.unit === '%' ? percentCrop : c;
    if (!maxAspect || !minAspect) setCrop(newCrop);
    else if (c.width / c.height > maxAspect) {
      setCrop({ ...newCrop, height: newCrop.width / maxAspect });
    } else if (newCrop.width / newCrop.height < minAspect) {
      setCrop({ ...newCrop, height: newCrop.width / minAspect });
    } else setCrop(newCrop);
  };

[DominicTobias]

I was able to get this working by changing my onChange to this:

const onChange = (c, percentCrop) => {
   const newCrop = crop.unit === '%' ? percentCrop : c;
    if (!maxAspect || !minAspect) setCrop(newCrop);
    else if (c.width / c.height > maxAspect) {
      setCrop({ ...newCrop, height: newCrop.width / maxAspect });
    } else if (newCrop.width / newCrop.height < minAspect) {
      setCrop({ ...newCrop, height: newCrop.width / minAspect });
    } else setCrop(newCrop);
  };

Cool maybe I’ll incorporate this logic