I have one HTML file control using this i am trying to upload file on server.
- Click on file control
- It will automatically open dialog for file/camera selection.
- I select Camera
- I captured photo and save
- Now submit form
- the Capture photo save successfully on server but it is rotated 90
degree.
This problem is only with iPhone or IOS.
<input id="image" name="image" type="file" accept="image/*" capture style="width: 58px" />
Please let me know, how to stop automatic rotation of image if captured from camera.
Thanks,
Imdadhusen
This could have something to do with EXIF/TIFF metatags in the images.
One of these tags indicates the orientation of the image. Some photos you upload to a server (eg from the iPhone) may have these tags, others (from a different source / workflow) may not. The server may or may not retain these tags, and may or may not read the tags in order to attempt correct orientation of the image. Similarly a web browser may or may not pay attention to these tags. If you upload images containing tags, the results will certainly be unpredictable.
A good way to find out if this is the issue would be to download a ‘problem’ image and a ‘good’ image from the server, and compare them. Open them in preview and check the second tab of the Inspector. Any meta-info will be displayed there. See if one image has orientation info and the other not. If neither display meta-info then it is fairly likely the server is stripping it all out and not using it, and you can forget about this answer.
Also you should compare in different browsers. Some browsers read this orientation info and rotate the image accordingly, others do not.
For example, an iPhone photo of mine which was take in portrait mode has the following metatags:
The native bitmap orientation is landscape.
The ‘orientation’ metatag indicates to image reading software to rotate to portrait for display.
The metatag is used by (some) image software to ‘correctly’ rotate the image to portrait but ignored by other software which will display the image as landscape.
The situation is confusing and there is no established standard for this (the tags are just a hint), so when preparing images for an online publication the safest thing is to strip out these tags and physically rotate the image to the correct BITMAP orientation before uploading. If you are writing the server side of an app you could do this on the server. But it is vital to deliver images to a web browser in the correct BITMAP orientation with no orientation metatags.
Why is this? Because even today different browsers take different approaches to metatags.
The iPhone image I just mentioned displays as follows:
Google Chrome 24 portrait
Safari 6 portrait
Firefox 17 landscape
Opera 12 landscape
Not a great state of affairs!