cropit
cropit copied to clipboard
BUG: on iOS, images with portrait aspect ratio are constrained to landscape bounding rectangle.
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.
The saved image also has the wrong orientation and thus cropping.
The same for me. It refers to the issue (https://github.com/scottcheng/cropit/issues/75)
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.
It definitely works. I have tried the fix proposed by @vitbokisch
Not working with the latest version. I got error: "Uncaught TypeError: canvas.getContext is not a function"
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');
});
@rickybrce This error usually happens just when you make mistake in canvas initializing. Check it and also the name you gave to canvas variable.
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
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
- added https://github.com/exif-js/exif-js to my page
- updated the "onPreImageLoaded" to the code on http://pastebin.com/QriPqp0m ... but I get the same issue as the last commenter (rickybrce): "I got browser freezing - onload event to fire continuously".
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
It also happens on Android phones... dealing with this right now... portrait images loads in landscape orientation.
Why is this closed? Even on the cropit demo page the problem persist.