Portrait images moves to bottom left hand side of modal in ios

[ryan-wong]

I'm glad you made this plugin, it saved me a lot of time. It works perfectly fine in android but in ios, portrait images show in bottom left corner. If I uses a square image it shows properly. Any suggestions?

[myyellowshoe]

Currently working through this problem myself. I can move the image and it snaps back into proper place in the middle. I believe it has to do with it calculating x/y before the transform is applied. Reversing the order might fix it.
How did you deal with this issue @ryan-wong ?

[ryan-wong]

I wasn't able to fix it.

[myyellowshoe]

Dang. Gotcha.
Going to take a stab at fixing it. I'll post the fix when I get it figured out.

[myyellowshoe]

Found the issue. It seams that for some odd reason safari mobile wants to flip width/height on ios. Good times.
Workarounds:

• Look at the Exif data. You'd expect for orientation exif data to be a great guide, but alas it sucks. It seams the best way is to read the pixel data. PixelXDimension : 3840, PixelYDimension : 2160
  To get proper width and height.
• Preload and append the image to the page.
  For some reason when you append the image to the page, it gets it act together and updates the img tag with proper width/height values. Just append the image in the background and read the actual width/height for passing to jcrop.

I'll post an actual fix/workaround here soon.

[JrSchild]

Thank you for your effort. I will look forward to your fix. Looking at Exif data seems unwieldy. What about using the naturalWidth and naturalHeight properties? In which cases does it occur? When the image comes from the camera, camera roll, external url or other? In the first two cases you could try playing with the cordova API options.

Maybe the correctOrientation option fixes it.

[myyellowshoe]

I've read that correctOrientation sometimes work and other times doesn't so i've been trying to find something that is more reliable.
Yeah exif in general is not very reliable. As they say about standards, everyone has there own. :D
It seams on safari mobile in ios 9 at least all the width and height properties are flipped, including naturalHeight/Width.
In my case I'm not calling upon the cordova camera api so I can say for sure if that would help. Im using a input field, so i can easily provide additional options of where to select the image for upload like dropbox and other places.
I'll be sure to put up a fix when nail it down :)

[myyellowshoe]

So nailed down a fix, but unfortunately its not as glamorous as i would of liked. I realized that exif wasn't getting the actual height/width but still the flipped (width/height) version that safari was providing. Without a lot of device/browser testing I still haven't been able to find a way to programmatically figure out the real height and width. (Without reading the base64 through some image processer like imagemagic and passing back the real values).
So I decided to go the simplest route possible in this case, make a button and tie to a function to flip the sizes.

Then added this function.

    flipImageDimensions: function(){

      var self = this;
      self.loadImage().then(function(elem) {

        self.imgWidth = elem.naturalHeight;
        self.imgHeight = elem.naturalWidth;

        self.options.modal.el.querySelector('.jr-crop-img').innerHTML = "";
        self.options.modal.el.querySelector('.jr-crop-select').innerHTML = "";

        self.options.modal.el.querySelector('.jr-crop-img').appendChild(self.imgSelect = elem.cloneNode());
        self.options.modal.el.querySelector('.jr-crop-select').appendChild(self.imgFull = elem.cloneNode());

        self.bindHandlers();
        self.initImage();
      });

    },

Added this to the initialize function, to expose the new function to the scope.

self.options.flipImageDimensions = this.flipImageDimensions.bind(this);

Then added this to the template variable:

 '<button class="button button-clear" ng-click="flipImageDimensions()">Image issues? Click here to try and fix.</button> ' + 

Again its not ideal, but it does fix the view issues. Its still flipping the image upon cropping, so need to nail that down. But this should be a good place to start for folks.
Once I get the image cropping issue nailed down I'll post that as well, of course once I'm all finished I'll post a more official patch.

[cordova-android]

i have the same problem large image portrait it not appear at center it appears at bottom left
any ideas?

[Saporules]

Im actually getting this exact error, I think with the ideas given here I'll try to fix the plugin.……
--UPDATE--
adding the option correctOrientation: true to the getPicture options of $cordovaCamera did the trick, no more trouble.