Allow Image Rotation in ImageCropper Control

[Hakobyan888]

Hello.
I'm using ImageCropper Control but I would like to add image rotation to can you tell me what I should do to add that.

Example:

[ghost]

Hello Hakobyan888, thank you for your interest in Windows Community Toolkit!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible.. Other community members may also answer the question and provide feedback 🙌

[Kyaa-dost]

@michael-hawker is the image rotation feature feasible in ImageCropper control?

[michael-hawker]

@Hakobyan888 could you give a bit more details for your scenario? The ImageCropper's original design intent was to allow for creating circular or rectangular crops for profile images or other image reductions.

Are you wanting to be able to rotate the rectangular crop area and then get that area with like solid/transparent pixels outside of the crop area? Where would you use the resulting image?

Thanks!

[Hakobyan888]

@Hakobyan888 could you give a bit more details for your scenario? The ImageCropper's original design intent was to allow for creating circular or rectangular crops for profile images or other image reductions.

Are you wanting to be able to rotate the rectangular crop area and then get that area with like solid/transparent pixels outside of the crop area? Where would you use the resulting image?

Thanks!

@michael-hawker my goal is to rotate image and the cropping rect will maximally fit init and the rect could not get out of rotated image bounds. Is it possible to integrate this scenario to ImageCropper control.

Thanks!!

[michael-hawker]

Thanks @Hakobyan888, I saw your question on stackoverflow when searching for an example image. That level of detail with the images like this helps with these types of requests:

@HHChaos you know the insides and out of this control - think you could give some pointers here? I could see a property like CanRotateImage for this scenario being useful, though I think the trickiest part is the UX design around the input for the image rotation and as @Hakobyan888 found with the proper crop bounds remaining inside the image, eh?

[Hakobyan888]

Please let me know if there are any solutions.
Thanks for all responses!!!

[skendrot]

I think this is outside the scope of a cropping control. When editing photos you take a multi-step approach. One step is rotating, one step for cropping, one step for filters, etc. Rotating an image while cropping it would create rotated images when one isn't wanted. Or cropped areas when trying to rotate.

[Hakobyan888]

I think this is outside the scope of a cropping control. When editing photos you take a multi-step approach. One step is rotating, one step for cropping, one step for filters, etc. Rotating an image while cropping it would create rotated images when one isn't wanted. Or cropped areas when trying to rotate.

If the crop and rotate would work like the image above I don't think that there would be any problems you mentioned. So I would like to know is it possible to add rotation feature to ImageCropper Control.
If no could you please give me some info(what should I change, there are many rects) so I could add init.

[skendrot]

I don't think that there would be any problems you mentioned

I going we're going to have to disagree here. Users will find a way to get themselves into trouble. You'd have to turn rotation on/off or cropping on/off and then it's no different than what I described above having a multi-step approach.

[Hakobyan888]

https://drive.google.com/file/d/1LhVEq9bLJqr8gisbTLfVFs_J4z0EStAn/view?usp=sharing

Here is the video of what I'm trying to get.

[michael-hawker]

@skendrot it may well be something beyond what we want to have natively supported by the control. I agree in most scenarios the UX is tricky and generally broken up into different 'modes', so we probably don't want to define any of that behavior and functionality as part of the control (which I think is your main point).

However, this scenario from @Hakobyan888 of cropping a rectangle out of a polygonal type surface (in this case the rotated image) is still valid, we should at least figure out how to better support keeping the bounds of the cropped region within the confines of a polygon vs. a traditional 90-deg only rectangle. How the image gets rotated by the user and manipulated by them can still be out of scope and be left to the developer (e.g. combining with a slider in the video above).

@HHChaos how much work do you think it'd be in order to confine the thumbs to be within any general polygon vs. the rectangle it uses today?

[skendrot]

@michael-hawker I don't see any requests to rotate the rectangle. Only rotate the image.

my goal is to rotate image and the cropping rect will maximally fit init and the rect could not get out of rotated image bounds

[Hakobyan888]

@michael-hawker I don't see any requests to rotate the rectangle. Only rotate the image.

my goal is to rotate image and the cropping rect will maximally fit init and the rect could not get out of rotated image bounds

@skendrot yes the image should be rotated only. The rectangle should be like the presented image or video.

[michael-hawker]

@skendrot yes, sorry I meant to refer to the image there not the thumb selector, I'll update my comment.

[Hakobyan888]

I'm sorry when the feature will be added approximately?

[HHChaos]

Thanks @Hakobyan888, I saw your question on stackoverflow when searching for an example image. That level of detail with the images like this helps with these types of requests:

@HHChaos you know the insides and out of this control - think you could give some pointers here? I could see a property like CanRotateImage for this scenario being useful, though I think the trickiest part is the UX design around the input for the image rotation and as @Hakobyan888 found with the proper crop bounds remaining inside the image, eh?

Sorry, the reply is a bit late. I understand that this ability should be very useful in some cases, and it is also available in the image editor of most platforms. I have considered this problem before and have planned to increase this ability. But for other reasons, I didn't have time to do it. I will try it if I have time on the following weekend, but I can't guarantee when it will be completed. Of course, contributions from other developers are very welcome.

[michael-hawker]

Thanks @HHChaos understand that you're busy, no problem at all. When you have a minute though if you had any pointers on where someone might get started working on this type of scenario within the control (like where the bounds for the thumbs are restricted), that could be handy.

@Hakobyan888 would you be interested in trying to solve this problem and contribute a PR to the Toolkit to allow the control to optionally track a different bounding box than the image? (Again, we wouldn't want the control itself to do the rotation aspect, just be able to support clipping to it afterwards.)

[Hakobyan888]

Thanks @HHChaos understand that you're busy, no problem at all. When you have a minute though if you had any pointers on where someone might get started working on this type of scenario within the control (like where the bounds for the thumbs are restricted), that could be handy.

@Hakobyan888 would you be interested in trying to solve this problem and contribute a PR to the Toolkit to allow the control to optionally track a different bounding box than the image? (Again, we wouldn't want the control itself to do the rotation aspect, just be able to support clipping to it afterwards.)

Yes, of course, I would like to solve this problem but as you said I need some pointers to start doing it. So I'll wait for some help.

[Hakobyan888]

@HHChaos could you give me some tips for adding rotation functionality to ImageCropper, please.
Thanks!!!

[HHChaos]

@HHChaos could you give me some tips for adding rotation functionality to ImageCropper, please.
Thanks!!!

Hi @Hakobyan888, I have a few useful tips here:

1. Use the _imageTransform attribute to rotate the image;
2. Use the _restrictedCropRect attribute to restrict the cropped area of the image. This is the size of the image when the image is initialized. After rotating, I think the image should have a new size (a new rectangular area)? Also update the value of _restrictedSelectRect;
3. When saving the image (in ImageCropper.Helpers.cs), I think that you should first use win2d to generate a new rotated image, and then use the CropImageAsync or CropImageWithShapeAsync method.

I think it is difficult to calculate the _restrictedCropRect of the rotated image, and moving the image should also change this value.
If you need any help, send an email to [email protected], thanks!

[Kyaa-dost]

@Hakobyan888 did you try utilizing the tips @HHChaos provided above ? and if that solved the issue please let us know.

[Kyaa-dost]

@Hakobyan888 can you please provide an update on this issue? Did the tips provided by @HHChaos help you pave the way for the feature?

[Hakobyan8888]

@Kyaa-dost Actually I tried but I couldn't do it

[Kyaa-dost]

@StepanHokobyan I will leave this open for now and see if anyone wants to pick this up.