Foliotek / Croppie

A Javascript Image Cropper
http://foliotek.github.io/Croppie
MIT License
2.58k stars 885 forks source link

Select rotate 90 degrees rotates -90 degrees #543

Open mishavee opened 6 years ago

mishavee commented 6 years ago

Selecting 90 degree rotation, I expected the image to rotate to the right, instead it rotates to the left.

The problem shows on the demo page, vanilla example, although it also does a flip about the y-axis before the first rotation.

Playing with jsbin, the problem first shows with Croppie v2.6.0 and is not there in v2.5.1.

Example link: http://jsbin.com/hulowasusi/edit

Firefox v60.0.2 64-bit Chrome Version 67.0.3396.87 (Official Build) (64-bit)

axelbecker42 commented 6 years ago

I have the same problem. I think, there are 2 little problems: 1) The bind() method doesn't use the argument options.orientation. So, if you upload an image, the orientation will bei undefined (inside the methode). This following hack works for me. I set the orientation to 1 (unmodified). This works for me, because i only use the bind after upload.

function _bind(options, cb) { ... .. self.data.orientation = 1; options.orientation = 1; return loadImage(url, hasExif).then(function (img) { ...

2) To rotate right, you have to use 90 and to rotate left use -90. `$('#leftBtn').on('click', function(ev) { $uploadCrop.croppie('rotate', 90); });

$('#rightBtn').on('click', function(ev) { $uploadCrop.croppie('rotate', -90); }); ` With this changes, the upload example with rotation buttons works for me.

Exertive commented 6 years ago

1) I had a similar issue. In my case I have EXIF loaded: window['EXIF'] = EXIF; and enabled in Croppie: enableExif: true, enableOrientation: true, 2) Uploading a PNG file (no EXIF metadata) and attempting to rotate clockwise 90dg then Croppie simply flipped horizontally on first call then rotated as expected on subsequent calls. 3) Applying axelbecker42's suggestion does not solve the problem in this case as orientation: 1 argument passed to bind() is ignored (orientation remains undefined in croppie.data). 4) The problem seems to be that EXIF is expected if enabled but data clearly not present in PNG. 5) Setting orientation explicitly to 1 after binding croppie.data.orientation = 1 prevents the horizontal flipping, but 6) Clockwise (right) rotation (e.g. 90) rotates anticlockwise (left) and visa versa. 7) I could go along with this but would prefer not to be confused!