scottcheng / cropit

A "customizable crop and zoom" jQuery plugin.
http://scottcheng.github.io/cropit/
MIT License
874 stars 305 forks source link

BUG: on iOS, images with portrait aspect ratio are constrained to landscape bounding rectangle. #168

Open lastobelus opened 8 years ago

lastobelus commented 8 years ago

It's a little hard to describe, but it is quite easy to reproduce on your demo page.

If you open the demo on an iPhone, click choose image, and take a picture in portrait mode, the bounding rectangle within which you can move the image around will be the corresponding landscape mode of the image, with bottom-left origin. Reproduced on iPhone 6s & iPad mini.

It does not happen in the iOS simulator, only on actual device.

It also does not happen if I, for example, add dropbox as a source to the iphone action menu and choose a portrait mode photo from there (even though those photos were originally taken on the same iphone).

I don't know how to debug this because I can't find any info on debugging javascript in the Safari on an actual device.

lastobelus commented 8 years ago

The saved image also has the wrong orientation and thus cropping.

DzmVasileusky commented 8 years ago

The same for me. It refers to the issue (https://github.com/scottcheng/cropit/issues/75)

lastobelus commented 8 years ago

thanks for the reference to issue #75. I had missed that when trying to research this issue -- I will give the solutions there a try.

DzmVasileusky commented 8 years ago

It definitely works. I have tried the fix proposed by @vitbokisch

rickybrce commented 8 years ago

Not working with the latest version. I got error: "Uncaught TypeError: canvas.getContext is not a function"

jupitercow commented 8 years ago

I want to make sure that you have seen the rotateCW and rotateCCW in the API. It isn't perfect, but it generally works for me, and was easier than dealing with exif.

// Handle rotation
$('.rotate-cw-btn').click(function() {
  $('#image-cropper').cropit('rotateCW');
});
$('.rotate-ccw-btn').click(function() {
  $('#image-cropper').cropit('rotateCCW');
});
DzmVasileusky commented 8 years ago

@rickybrce This error usually happens just when you make mistake in canvas initializing. Check it and also the name you gave to canvas variable.

rickybrce commented 8 years ago

Hello,

Thanks for responding. Where to put id "orientationCanvas"? Any chance to put a html code that you are using?

Now I see. I using the second solution from "ricky1981". In that code is id "orientationCanvas". I don't have it in my code, so that is why i get this error. With solution from "@vitbokisch" I got browser freezing - onload event to fire continuously. With "@KILLME56k" the same issue. So, nothing of these work for me. Thanks

pierregangloff commented 8 years ago

I confirm that I have the same issue [the one defined at the top of this thread] on my iphone5 and a friend confirmed that he sees this issue on his iphone6S as well:

If you open the cropit demo page on an iPhone, click choose image, and take a picture in portrait mode then export that image, the exported image will be rotated! Reproduced on iPhone 6s & iPad mini.

Furthermore, I tried the fix defined in https://github.com/scottcheng/cropit/issues/75

None of these work for me either... Any other solutions/ideas? Seems like a problem when exporting, not upon loading... I'll try the solution from ricky1981 in ISSUE75.

But I think the actual fix I'll try is to send the selected image immediately over to the server side and play with it there and then return it to the client to play with (resize/zoom/crop). Because we're also running into iphone memory issues with large images (inconsistent to reproduce but I WAS able to crash my desktop chrome browser AND my iphone browser becomes sluggish with loading/croping large images back to back) so I'll reduce the size of the image "server side" at the same time (so that cropit can play with a smaller image). Seems like that's what Facebook/Twitter/LinkedIn/others are doing anymore for their profile pictures (select image->send server side->get smaller image back->load that into the cropit preview area).

Pierre

autopten commented 8 years ago

It also happens on Android phones... dealing with this right now... portrait images loads in landscape orientation.

skrosoft commented 6 years ago

Why is this closed? Even on the cropit demo page the problem persist.