Cropper shows image squished if image has non zero EXIF rotation and application uses image-orientation: none

[Egor-Chib]

If image EXIF include rotation and application uses "image-orientation: none" then image will be shown in cropper squished, cropper messing up / swapping image height and width. Windows 10, Browsers: FF & Chrome

In our application we use image, img { image-orientation: none; } We use images with and without EXIF information. EXIF information sometimes includes image rotation - this is the case when we have trouble. Images without EXIF and images with EXIF but without rotation seems to be ok,

We and our customers have this problem and it is critical for our business.

I have it debugged.

The problem caused by using naturalWidth and naturalHeight HTML5 image properties.

This is one of the consequences of changed default value of "image-orientation" style attribute from "none" to "from-image". Browsers FF and Chromium.

Now when cropper requesting "natural" attributes of the image with non zero rotation in EXIF and image under "image-orientation: none" browser provide wrong information.

We used this image file for testing:

Expected behavior: image appear in cropper editor with correct aspect ratio/proportions

Actual behavior: on screenshot you can see, that cropper assign width to height and height to width, image looks super wide, squished,

[fengyuanchen]

Currently, for browsers that support the image-orientation property, you should NOT set it to none, but from-image.

[fengyuanchen]

Or you might remove the Exif Orientation info before applying to the Cropper.js.

[Egor-Chib]

Thanks. You suggested good bug workaround and I am aware of it.

Would you, please, advise if there are some ETA for this bug fix?

[fengyuanchen]

I still have not a good idea or solution for this currently. I still search for a well cross-browser solution about image-orientation. Thanks!