Image rotation issue from camera in HTML from an iPad on version 13.5.1

Question

Previously when using the html file input control on an iPad to take a photo, the FileReader would always return the image in html in the landscape orientation and thus would be rotated after the fact, based upon the orientation metadata value extracted using exif.js.

Now however this is no longer the case on an iPad running ios 13.5.1, where the image being returned is in the same orientation as the camera was when it took the photo, which would be perfectly fine except it still contains the metadata tags, which tell me it still needs to be rotated the end result being an over-rotated image.

Quite frankly I'm not sure what to do, as any changes to try to fix this will break functionality in all of the other versions of ios. in the below example, the image being shown is straight from the camera and the text input indicates how it should be rotated. The more I think about this the more I'm convinced that this is in fact a defect with ios and not actually an issue I should be dealing with in the html.

edit: It appears the code snippet doesn't work from within here, here it is in a pastebin:

<iframe src="https://pastebin.com/embed_iframe/tB7t6JB5" style="border:none;width:100%;"></iframe>

window.addEventListener('load', 
    			function() {
    						document.querySelector('input[type="file"]').addEventListener('change', 
    							function() {
    											var file = document.querySelector('input[type="file"]').files[0];
    											var img = document.getElementById('myImg');
    											var reader = new FileReader();

    											reader.onload = function (e) {
    																			if (e.target.result.lastIndexOf('data:image/', 0) === 0) {

    																				var tmp = e.target.result;

    																				setTimeout(function () {
    																					try {
    																						img.width = 480;
    																						img.height = 640;
    																						img.src = tmp; 

    																						EXIF.getData(img, (function () { document.querySelector('input[type="text"]').value = EXIF.getTag(img, 'Orientation') }));
    																					}
    																					catch(ex) {
    																						alert(ex);
    																					}

    																				}, 500);
    																			}
    																			else {
    																				// not an image, so we do nothing
    																				return;
    																			}
    																		};
    											reader.readAsDataURL(file);
    										});
    		});

<html>
    <head>
    	<title>vertical camera test</title>
    </head>
    <body>
      
      <br>
      rotation value:<input type="text" id='inpRotation'/>
      <img id="myImg" alt="image" ></img>
      <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
      <input type='file' />
    </body>
</html>

thacodemonkey thacodemonkey · Accepted Answer · 2020-09-14T03:17:48

In short, this is the same issue as listed here: stackoverflow exif-orientation-issue-in-safari-mobile

1: EXIF Orientation Issue in Safari Mobile the tl/dr is that the behaviour of the browser has changed where the default value of the css style 'image-orientation' has in effect been changed from 'none' to 'from-image' So it always rotates the image based upon the EXIF data without having to interpret the EXIF data directly.

This, in theory, is awesome except for the fact that we need to support older browsers as well that do need the manual EXIF manipulation and in IOS13 Safari doesn't support changing the behaviour back to 'none' (as shown here: caniuse.com). So the end result is that it looks like it is doing a double rotation because it is doing exactly that once based upon the CSS style as listed above and once because I still need to support iPads which are running earlier versions of IOS.

Image rotation issue from camera in HTML from an iPad on version 13.5.1

1 Answers