search

ValentinH / react-easy-crop

A React component to crop images/videos with easy interactions
https://valentinh.github.io/react-easy-crop/
MIT License
2.34k stars 167 forks source link

cropSize in percentage #555

Open Rastraponovich opened 3 months ago

Rastraponovich commented 3 months ago

Hello, Is it possible to specify the CropSize as a percentage rather than in pixels? There is a need to set the size in % due to different screen sizes. if you specify a clear value, the Crop may go beyond the screen, as a result of which the final result will differ from the expected one.

Ideally, I would like to be able to set not only the height and width, but also control the position of the Crop inside the container as a percentage.

Currently, the size calculation occurs before mounting the component into the DOM through hooks and requests to the Window object

ValentinH commented 3 months ago

You most probably should use the aspect property. This is the ratio between width and height.

Rastraponovich commented 3 months ago

But if I don't set the CropSize then the Crop will not have the required dimensions. Example. In my case, I need the x axis to be 100% and the y axis according to aspectRatio. Now the Crop width without the CropSize parameter is not 100%. maybe I didn't complete something according to the instructions

ValentinH commented 3 months ago

The objectFit prop might be what you are looking for. In general, I don't think that the cropSize should be used as it's not responsive. The important thing when cropping is the aspect of the Cropper + the position and the zoom. From these, every possible crop can be represented.

Once the user has selected the cropped area, then you can convert the percentage selection to a specific pixel size with simple maths.

Rastraponovich commented 3 months ago

Thanks