How can limit the size of crop image in react-image-crop

[thongle12]

Hello everyone. I am new here, and I need a guide on this issue.

My question is: I want to store my image in DB with the limited size is not over about 350x350 px. So, I do not want users to have a chance to drag over 350px in the frame. (smaller than 350 is OK ).

Please help me. Thanks a bunch in advance.

[dominictobias]

Hi, there are multiple choices:

• Set minWidth and minHeight props to limit the crop size
• Limit the width of the canvas preview if you use one, which you would then send to the server (canvas.toBlob)
• Resize the cropped image down on your server

[thongle12]

@DominicTobias Did you mean that, I do but it not works

[dominictobias]

It's not a property in the crop object but a prop on the component, pass them into the component itself https://github.com/DominicTobias/react-image-crop#minwidth-optional

[thongle12]

@DominicTobias I need more detailly, I am sorry, I am new. I dont figure out

[dominictobias]

Like this <ReactCrop crop={crop} minWidth={50} minHeight={50} ... />

[thongle12]

@DominicTobias thank you very much Sir

[sadikyalcin]

Like this <ReactCrop crop={crop} minWidth={50} minHeight={50} ... />

@DominicTobias There is a problem with minWidth and minHeight props. I'm facing the following scenario;

The natural width of the image is 920 x 1380. The rendered size is 510 × 765. So the rendered image get's scaled down max-width: 100%.

My settings are: minWidth: 800, maxWidth: 1080, minHeight: 450, maxHeight: 720.

The crop area is locked as the min resolutions are higher than the rendered image size. Now I ain't sure if there is anything wrong with what I'm doing but it definitely isn't working as it should (using "react-image-crop": "^9.0.4").

<ReactCrop
  src={upImg}
  onImageLoaded={onLoad}
  crop={crop}
  onChange={(c) => setCrop(c)}
  onComplete={(c) => setCompletedCrop(c)}
  minWidth={minWidth} // 800
  minHeight={minHeight} // 450
  maxWidth={maxWidth} // 1080
  maxHeight={maxHeight} // 720
  style={{display: cropApplied ? 'none' : ''}}
  ruleOfThirds={true}
/>

[dominictobias]

The min/max width applies to the crop size in pixels not the image size (natural or resized). Is that where the confusion is? My thinking was that people are more likely to say “cropped image should be a max of 512pixels” more than “cropped image should be a max of 30% of the uploaded image” which isn’t imposing any known size constraints, but interested to hear other thoughts.

On Thu, 28 Oct 2021 at 11:34, Abdul Sadık Yalçın @.***> wrote:

Like this <ReactCrop crop={crop} minWidth={50} minHeight={50} ... />

@DominicTobias https://github.com/DominicTobias There is a problem with minWidth and minHeight props. I'm facing the following scenario;

The natural width of the image is 920 x 1380. The rendered size is 510 × 765. The so rendered image get's scaled down max-width: 100%.

My settings are: minWidth: 800, maxWidth: 1080, minHeight: 450, maxHeight: 720.

The crop area is locked as the min resolutions are higher than the rendered image size. Now I ain't sure if there is anything wrong with what I'm doing but it definitely isn't working as it should (using "react-image-crop": "^9.0.4").

<ReactCrop

src={upImg}

onImageLoaded={onLoad}

crop={crop}

onChange={(c) => setCrop(c)}

onComplete={(c) => setCompletedCrop(c)}

minWidth={minWidth} // 800

minHeight={minHeight} // 450

maxWidth={maxWidth} // 1080

maxHeight={maxHeight} // 720

style={{display: cropApplied ? 'none' : ''}}

ruleOfThirds={true}

/>

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/DominicTobias/react-image-crop/issues/446#issuecomment-953720260, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFZT6XWXLJ6FGJVGCRI77LUJEYLRANCNFSM5EUBFZUQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[sadikyalcin]

The min/max width applies to the crop size in pixels not the image size (natural or resized). Is that where the confusion is? My thinking was that people are more likely to say “cropped image should be a max of 512pixels” more than “cropped image should be a max of 30% of the uploaded image” which isn’t imposing any known size constraints, but interested to hear other thoughts.

Well, I think the crop area box and the output image should behave the same. If I'm defining a min and max resolutions, along with the output, the crop area should also respect those numbers.

Like my example I above, currently with my situation, this package doesn't allow changing the area of the crop and just resizing the output. I intend to allow the user to change the crop area from minWidth and maxWidth from 920 x 1380. Basically I should be able to adjust the size of the crop area between minWidth, maxWidth, minHeight, maxHeight defined. But I cannot. The crop area is completely locked.

[sadikyalcin]

@DominicTobias here is a fork from the demo.

https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-forked-gfwmhy?file=/src/App.tsx

Select a large image please, more than 1920 x 1080. You will see what I exactly mean. I selected an image at 2656 × 2772.

aspect={16 / 9}
minWidth={1366}
minHeight={768}
maxWidth={1920}
maxHeight={1080}

Result (on my local app not sandbox);

<img /> client: 1110px x 1158px

Crop selection client: 1366px x 768px

IMO, this UI is unable and inaccurate. The cropSelection should scale to real client width and height.

Proposed solution to calculate crop selection should be something like this;

const { naturalWidth: width, naturalHeight: height } = e.currentTarget;
const { clientWidth } = e.currentTarget;

const scaleRatio = width / clientWidth;

const minWidth = 1366;
const minHeight = 768;
const maxWidth = 1920;
const maxHeight = 1080;

const realMinWidth = minWidth / scaleRatio;
const realMinHeight = minHeight / scaleRatio;
const realMaxWidth = maxWidth / scaleRatio;
const realMaxHeight = maxHeight / scaleRatio;