Rotation of Image extends image outside the boundary of the Canvas

[sykesbPragmatics]

I'm attempting to integrate the component into our application and the use case I have is to rotate the image 90 degrees, which works fine except that the newly rotated image extends above and below the Canvas. Is there a way to make the canvas re-scale or update upon rotation?

Example:

1. Go to https://cropperblazor.github.io/demo
2. Click VM1 (View mode 1)
3. Click the rotate button twice (Results in rotate of 90 degrees clockwise)
4. Image extends above and below the Canvas, but it should shrink slightly to remain within the canvas window.

Initial

Image extends past top and bottom of Canvas

[MaxymGorn]

Hi @sykesbPragmatics . I'll look this week more details about this case. Now, I'm suppose you need to choose 3 VM (possible you need to fix height css styles for component), for instance:

for other VMs me need to think about how to do it, maybe you can center the image or something or count yourself position — just need investigate about that

[sykesbPragmatics]

Researching further, this is a cropper.js issue that has been around for a while. I was able to come up with a fix for my scenario:

ViewMode = ViewMode.Vm2; Zoomable = true; //Required, you apparently cannot switch this on and off without reset?

 cropperComponent.Rotate(90);
 //Max Zoom out
 cropperComponent.ZoomTo(0, 0, 0);

 var container = await cropperComponent.GetContainerDataAsync();
 var canvas = await cropperComponent.GetCanvasDataAsync();
 //Re-center
 cropperComponent.MoveTo((container.Width / 2) - (canvas.Width / 2), 0);

[MaxymGorn]

Researching further, this is a cropper.js issue that has been around for a while. I was able to come up with a fix for my scenario:

ViewMode = ViewMode.Vm2; Zoomable = true; //Required, you apparently cannot switch this on and off without reset?

 cropperComponent.Rotate(90);
 //Max Zoom out
 cropperComponent.ZoomTo(0, 0, 0);

 var container = await cropperComponent.GetContainerDataAsync();
 var canvas = await cropperComponent.GetCanvasDataAsync();
 //Re-center
 cropperComponent.MoveTo((container.Width / 2) - (canvas.Width / 2), 0);

Sure, you need reset cropper. Or set up these properties instantly before render cropper component or in OnInitialized override method. If cropper component is rendered and you need update cropper options, then re-initialize cropper component. In addition, you can save state cropper cropped canvas and so on with possible using Options.SetDataOptions method for change the cropped area position and size with new data (based on the original image). See more about this topic in this conversation: https://github.com/CropperBlazor/Cropper.Blazor/issues/182

[MaxymGorn]

Hu @sykesbPragmatics. Please let me know, if you have any obligations when using cropper component. If you don't have impediments, just resolve this issue