Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fit the Image to its Container after rotation and dragging (Not a bug) #350

Open
sachinksachu opened this issue Feb 13, 2022 · 4 comments
Open
Labels
enhancement New feature or request help wanted Extra attention is needed PR-welcome help is welcomed for this issue

Comments

@sachinksachu
Copy link

How adjust the image to fit it to the size of the container after rotation

To reproduce the scenario

  1. Rotate the image
  2. Then drag the image to an end of its conatiner

Some space will be formed between image and container, which is normal.
I wants to know whether I can fit the image to its conatiner after rotataion and dragging using any props available with in the package or any other idea to fit the image

I was able to fit the image after rotation by calculating the diagonal length of its conatiner, but not when dragged after rotation.

I have attached an image to show the scenario mentioned above.

Thanks for the wonderful package !!
easy-crop npm

@ValentinH
Copy link
Owner

There is no such option currently.

I'd gladly accept a PR that would add such an option. For example, we could have a boolean option like keepImageInCropAreaWhenRotated 😅

This is definitely not trivial as it will requires some mathematical knowledge that I don't have.
The behavior of this feature was actually discussed when the rotation feature was first added : #52 we didn't manage to have it working.

@ValentinH ValentinH added enhancement New feature or request help wanted Extra attention is needed PR-welcome help is welcomed for this issue labels Feb 13, 2022
@sachinksachu
Copy link
Author

Okay 🙂 I will try to find a solution for this.
Thanks @ValentinH

@sachinksachu
Copy link
Author

Hi @ValentinH
How do I get the x,y axis and top, right, bottom, left of the selected image.
Which attribute should I use.

Thanks in advance !!

@ValentinH
Copy link
Owner

For most computations, we use this.mediaSize like here: https://github.com/ricardo-ch/react-easy-crop/blob/main/src/index.tsx#L544
Otherwise, you can use this.imageRef.getBoundingClientRect.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed PR-welcome help is welcomed for this issue
Projects
None yet
Development

No branches or pull requests

2 participants