CODEWITHSUNDEEP
htmliosfile-upload
Anders
Anders

Reputation: 521

iOS rotates image when lower resolution selected (HTML5 Input file)

I am working on a web app that allows users to upload files to our CDN network, and then displays the images on the web app. However, I noticed something weird when uploading images through iOS (Safari) and possibly other browsers too.

When the highest resolution image is selected, the image is uploaded in its correct dimensions and shape.

However, when a lower resolution is selected, the uploaded image ends up being rotated on upload. I am not sure, if this happens with the CDN, or somewhere with the iOS file select feature, but its weird, since it works fine with the "Actual size" image.

You can see images below, to re-produce the error.

Pay attention the image shape, and file size. As "Actual size" the file size is 3.5MB!

enter image description here

Now, after we click on "Choose image size", following appears. I will choose "Medium".

enter image description here

After, you will see the file size is just 164KB. Reduction of -95.31%.

enter image description here

Then, pay attention to the shape, after the image is uploaded. You will see it is different rotation.

enter image description here

Does anyone have any clue as to why this happens? I am not sure if this has anything to do with the CDN I am using, because as I said before, when the "Actual size" image is selected, the uploaded image is perfectly fine. Only when size is changed through iOS "File selector" it changes rotation.

Also, another concern I have, is that these high resolution images are not necessary for my application. Sometimes we are talking +8MB for images, due to their high resolution and dimensions. Does anyone know if it's somehow possible to specify the image size for uploads on iOS/Android as default - so the user does not have to do anything? That would be ideal.

Upvotes: 2

Views: 985

Answers (1)

Ashfaque Ahmad Bari
Ashfaque Ahmad Bari

Reputation: 301

The images generated during choosing by iOS are missing the data for Orientation in the EXIF data for the image. That's why the image is correct when you upload the actual image, it seems oriented properly, but isn't right when it is a different size. You can check that by uploading the original and different sizes at https://exifinfo.org/. You'll see the different Orientation data in the EXIF section.

Since this is an iOS Safari specific feature, you can't rely on being able to choose multiple sizes of images that are being uploaded. A more reliable, cross-platform solution would be to resize the image yourself using a Canvas. This will however still probably require the user to upload the full size image, then you would have to process it on the canvas and upload it to your API.

Upvotes: 2

Related Questions