Cropping when rotating

[chilipote]

Hi,

I would like to know, if it's a bug or something I did wrong : I added today the enableOrientation: true option. Working great, the image is rotating. Yay. But I have some troubles during cropping.

In some words : I'm having an image larger than higher. When I flip it to the right, the image become higher than larger. If I try to crop the bottom of the image, the result can be transparent. And because images are always better than words :

Here the image I want to upload :

Then I flip it

I select the bottom of the image

And here the result

Am I the only one who experienced that ? Let me know if it's not clear.

Last version of Croppie : 2.4.1
Google chrome
Original dimension of the image : 1000 * 667
Viewport : 200 * 200
Boundary : 260 * 260

[chilipote]

I think, maybe I found the problem :

croppie.js, _getCanvas, line 993.

    if (right > self._originalImageWidth) {
      width = self._originalImageWidth - left;
      outWidth = width;
    }
    if (bottom > self._originalImageHeight) {
      height = self._originalImageHeight - top;
      outHeight = height;
    }

I think this check, right > self._originalImageWidth is wrong in rotate situation, what do you think ?

[INJumbo]

I am having this issue too, commented those if statements and issue has gone :)
Thanks !

[INJumbo]

In my case those lines was like this

if ((left + width) > self._originalImageWidth) {
width = self._originalImageWidth - left;
outWidth = width;
}
if ((top + height) > self._originalImageHeight) {
height = self._originalImageHeight - top;
outHeight = height;
}

[chilipote]

@INJumbo which version did you have ?

[raykudo]

+1

[jlozanoher]

Same issue for me, when rotating and moving vertically.

[thedustinsmith]

#326 was believed to has resolved this issue, but it seems some people are still having it. I can't get it to happen myself.

I've used the rotation example on demo page, rotated, dragged to the bottom, and the resulting image seems to be correct. I've not made a release since 326 was merged in, so I'm just using the code in master to do so. Can anyone pull the latest code from master and confirm that this issue is a thing of the past?

[antoinelorcy]

I think this is fixed. I don't reproduce anymore using the latest 2.5.0

[JonathonRichardson]

I can still reproduce this with both master and the 2.5.0. It only happens with enforceBoundary disabled and an image with an aspect ratio of something other than 1:1. It looks to me like the problem is that the original image's width and height are used during the final drawing calculation. If the image was rotated an odd multiple of 90 degrees, that means it is using the width as the height and vice versa. I'm able to fix this so far (I haven't tested it extensively yet) by adding the following to the end of the _rotate() function to swap the original values:

if ((deg % 180) !== 0) {
    var lastOriginalHeight = this._originalImageHeight;
    this._originalImageHeight = this._originalImageWidth;
    this._originalImageWidth = lastOriginalHeight;
}

@thedustinsmith, does that seem like the right way to fix this?

[Hesesses]

having the same problem as above

[rickthewebdev]

@JonathonRichardson solucion fixed it for me. Thank you 👍

[hikari82]

Thanks to @JonathonRichardson.. it fixed for me to.

[thedustinsmith]

Thanks for all the feedback in this one guys. I believe this issue is fixed in 2.5.2. I can't recreate the issue using the rotate example in the demo page. 2.5.2 should be released soon.