AutoOrientImage not working with IOS on iPhone

[liotims]

There is a issue with image orientation in preview. When I take a vertical photo from my iPhone and I upload it the picture is not oriented correctly

In _previewFile function I see every time that the class "rorate-1" is added. It seem to have a issue to read EXIF informations of picture.

I use this workaround to solve this :
Import pexifjs script

and in fileinput.js I modified the _previewFile function like this :

....
if ($img.length && self.autoOrientImage) {
	$h.validateOrientation(file, function (value) {
		if (!value) {
			self._validateImage(previewId, caption, ftype, fsize, iData);
			return;
		}
		
		var exifObj = piexif.load($img[0].href);
		value = exifObj["0th"][piexif.ImageIFD.Orientation];

		var $zoomImg = $preview.find('#zoom-' + previewId + ' img'), css = 'rotate-' + value;
		if (value > 4) {
			css += ($img.width() > $img.height() ? ' is-portrait-gt4' : ' is-landscape-gt4');
		}
		$h.addCss($img, css);
		$h.addCss($zoomImg, css);
		self._raise('fileimageoriented', {'$img': $img, 'file': file});
		self._validateImage(previewId, caption, ftype, fsize, iData);
		$h.adjustOrientedImage($img);
	});
}
....

jquery v 3.2.1
fileinput v 4.4.9
bootstrap v 4.1.1

[kartik-v]

Can you please submit a PR?

[liotims]

Done

[kartik-v]

I have enhanced this for various scenarios including appropriate scaling of images.

[shum16]

@kartik-v when are you planning to release a version fixing this issue? We do need it very much for our new project. Thank you.

[kartik-v]

The next release v4.4.9 has been released.

[shum16]

Great, thanks a lot! But how do I need to load piexifjs? Currently it's not working even in Chrome, but it used to with 4.4.3..

[shum16]

Ok, loaded it separately via registerJsFile and it seems to work now on Chrome. We'll try on iPhone in a while..
Actually, I thought the widget should load piexifjs itself.

[kartik-v]

Actually, I thought the widget should load piexifjs itself.

You are probably talking about the yii2-widget-fileinput widget extension. This is not related to this plugin. Any such enhancement will be done there.

[shum16]

Ah, ok, I see )

[shum16]

Can't get it to work on iPhone... Anybody can confirm it's working there? Images are not rotated properly.

[kartik-v]

You may want to check the image auto orientation demo page and see if that works fine and cross check your configuration

[shum16]

Here's a screenshot of your demo site made on iPhone - the image is not rotated well.

By the way, do you process all jpeg extensions, including uppercase "JPG" and "jpeg". iPhone likes to save images with such extensions )

[shum16]

Your own example:

[shum16]

@kartik-v do you have an idea?

[kartik-v]

@shum16 will check this as I get time... any info you can share will be helpful to debug

[shum16]

@kartik-v any new on this?

[kartik-v]

@shum16 not got time to check this ... been busy... will try to see if I get time to look into this... Do let know if there is something you have from your end to accelerate this..

[Dannyson]

This is caused by mobile Safari. It autoorients pictures with EXIF information. So basically fileinput autoorients this picture, displays and Safari takes it, finds EXIF and rotates it again.

See for example fengyuanchen/cropper#120

[kartik-v]

This will be resolved via enh #1362.