Cropper: Rotate 90deg enlarges/stretches the image (reproduced on demo)

[jodiedunlop]

When an image is rotated, it appears to be stretched to fit the canvas.
An example can be seen on the current demo:

http://fengyuanchen.github.io/cropper/

1. If you rotate the image right twice (90deg) you will notice it becomes visibly enlarged.
   It is stretched to fit the current crop box (you cannot zoom out in this position).
2. Even if you rotate back to the original position the image is still stretched. However, now you can zoom back out.

The image should not be stretched to fit when rotating.

Tested in latest chrome, ie11 and edge

[CanKattwinkel]

+1 (Chromium, Ubuntu)

[shooter27]

In FF also. It happens when autoCropArea: 1 OR user tries resize crop area

[oleander]

Same thing here. OS X 10.10.4, Chrome 43, Cropper v1.0.0-rc.1

[weierstrass]

I also have this issue, FF ubuntu.

[plugowski]

+1

Is it possibe that if somebody rotate image landscape to portrait (90*) it will be resized to max container size? Like in old version: http://fengyuanchen.github.io/cropper/0.7.9/

Here when you rotate image it will be zoomed into container and visible in window...

[boonya]

+1
OS X 10.10.5, Chrome 43, Cropper v1.0.0-rc.1
The same on demo

[fengyuanchen]

As there are so many people focus on this issue, I have to point out that this problem appears only when:

• In strict mode
• The image is a rectangle
• The canvas's size (image wrapper) close to the crop box's.

Can I fix this problem?
I'm afraid not.

There are several ways to avoid this:

• Use free mode (set strict option to false)
• Apply a square image
• Zoom in the canvas to enough big before rotate

[ZasoGD]

In free mode I had the same problem (enlarges image when rotated). I fixed not setting minCanvasHeight and minCanvasWidth.

[fengyuanchen]

@ZasoGD The "free mode" means set strict option to false.

[ZasoGD]

I know. I just say that I solved the problem by removing my settings minCanvasHeight and minCanvasWidth, without having to use a square image or a particular zoom use.

[jodiedunlop]

I don't know how you can consider this not to be a bug. None of your suggestions seem like viable options for end users:

• Turning off strict mode: This would allow the client to crop invalid images (eg. beyond the actual image)
• Use a square image: Most photos are not square
• Zoom in the canvas enough before rotation: Again, that's just not viable to suggest to an end user.

Can you provide some feedback on why you can't fix this problem? Is it an architectural issue or some kind of browser based problem?

Thanks

[fengyuanchen]

@jodiedunlop In strict mode, when you rotate the canvas, its size will be enlarged (in order to fit the crop box as the crop box will not changed), after rotated 4 times (90 deg per time), you find it seems to go back the initial state, but how can it be the same as the initial state after 4 times resizing.

[oleander]

@fengyuanchen I might have misunderstood something here, but should't a full rotation (360) yield the same result as 0°, 720° and so on as its back to its original position? That would at least be the expected behaviour from a users point of view.

[stylefieber]

Hey there, I fixed it for my own needs. The basic idea is (for strict mode), to manipulate the cropbox dimensions before rotating, then rotate the image, set it to the right position and then manipulate the cropbox dimension back.

I just have a button which rotates an image in 90° steps. My fix has not been tested for other purposes.

And here some code: http://stackoverflow.com/a/32938693/2689455