Issue with photo aspect ratio when replacing cropper image with a photo from camera on iPhone 6

[bluejumbojet]

When I take a photo/replace a photo shot in portrait mode (414 x 736 points or 1242 x 2208 pixels) on my iPhone 6 plus and upload the photo into the cropper the photo in portrait mode is distorted and cropped off in the image container even before I get a chance to crop it.

This seems to occur both in the demo and in my own use of cropper. I attached a few sample images - you can see how the result in the cropper is not the same aspect ratio of the original photo I took.

Do you know if this is a bug? If so can you please issue a fix?

Thanks kindly in advance.

[ujjisss]

Hi, I am also facing the same issue and this issue is already mentioned in documentations of plugin. But I didn't get any solution till now. If anyone found solution, please post here

[fengyuanchen]

Maybe this is a problem caused by the image's Exif Orientation. You may try the Loader to translate Exif Orientation by canvas and get a pure image for Cropper.

[qiankaijie]

的确，在移动端照片剪裁初始化的时候会有这个图片变形的问题。iphone4S手机裁剪照片初始化横图显示正常，竖图会被压扁。电脑端似乎没有这个问题。

[fengyuanchen]

As of v2.2.0, the Exif Orientation will be overridden if the browser supports ArrayBuffer.

[qiankaijie]

I use fileReader to get a image of base64 with cropper(v2.2.1)。 #509 is still there

[fengyuanchen]

@qiankaijie What's version of your browser?

[qiankaijie]

@fengyuanchen the latest wechat browser. It is ok in chrome

[fengyuanchen]

WeChat browser...It might not support ArrayBuffer...

[Kelvin-Chu]

Same issue here with IOS only. It used to work with version 1. I tried using Loader and it would display the image properly but it appears to be slower than the regular fileloader.

Would be nice if you can get cropper to work for ios the way it used to without Loader.

[fengyuanchen]

If a browser supports Typed Array, then this issue may be fixed since Cropper v2.2.0.

Browser support of Typed Array:

• IE 10+ (partial support)
• Edge 12+
• Firefox 42+
• Chrome 45+
• Safari 9+
• Opera 34+
• iOS Safari 8.4+
• Android Browser 4.3+
• Chrome for androdi 47+

Reference: http://caniuse.com/TypedArrays

[mjvestal]

I'm seeing this issue as well. I learned that the iPhone is storing portrait photos taken with the camera in landscape and saving the rotation in Exif Orientation. It seems like Safari on the iPhone is giving the wrong naturalHeight and naturalWidth. For the same image transferred to my Mac, I do not see the problem.

I commented out these lines: https://github.com/fengyuanchen/cropper/blob/master/src/js/utilities.js#L53-L55 And now it works properly on my iPhone (9.2, 5s) and my laptop (10.11.2)

I hope this helps.

[dacraig]

@fengyuanchen thank you for the great plugin! I too am having this issue, and I was also able to fix it by commenting out those three lines that @mjvestal pointed out.

[JoJoChilly]

Hi, really appriciate your efforts on this great plugin! It do helps. And I figured out that you have recently updated to fix the bugs on safari. Thank you.
However, i figure out that wechat is not a safari browser but also have this problem, so i made a little change to adapt to this. Wish someone else would find it useful.
The solution is as follows:

// Supports var SUPPORT_CANVAS = !!document.createElement('canvas').getContext; var IS_SAFARI = navigator && /safari/i.test(navigator.userAgent) && /apple computer/i.test(navigator.vendor); //add wechat ua var IS_WEIXIN = navigator.userAgent.toLowerCase().match(/MicroMessenger/i)=="micromessenger"; var IS_IPHONE = navigator.userAgent.indexOf('iPhone')>-1 ? true : false; var IS_IPHONE_WEIXIN = IS_WEIXIN && IS_IPHONE;

and here:

`function getImageSize(image, callback) {
var newImage;

// Modern browsers (ignore Safari)
if (image.naturalWidth && !IS_SAFARI && !IS_IPHONE_WEIXIN) {
  return callback(image.naturalWidth, image.naturalHeight);
}

// IE8: Don't use `new Image()` here
newImage = createElement('img');

newImage.onload = function () {
  callback(this.width, this.height);
};

newImage.src = image.src;

}`

and here

`if (ifdStart) {
length = dataView.getUint16(ifdStart, littleEndian);

  for (i = 0; i < length; i++) {
    offset = ifdStart + i * 12 + 2;

    if (dataView.getUint16(offset, littleEndian) === 0x0112 /* Orientation */) {

      // 8 is the offset of the current tag's value
      offset += 8;

      // Get the original orientation value
      orientation = dataView.getUint16(offset, littleEndian);

      // Override the orientation with its default value for Safari
      if (IS_SAFARI || IS_IPHONE_WEIXIN) {
        dataView.setUint16(offset, 1, littleEndian);
      }

      break;
    }
  }
}`

If you have any questions or better ideas, pls tell me.

[fengyuanchen]

@JoJoChilly There are too many browsers in the world, includes lots of built-in browsers as WeChat's, I think it is not necessary to support all of them as it will waste a lot of time on this.

[Poordeveloper]

@fengyuanchen ，作为中国的开发者，按照现在移动互联网生态状况，不支持微信就说不过去了吧。

[Poordeveloper]

@JoJoChilly Thanks, it works for me.