13.5.1 版 iPad 上的 HTML 相机的图像旋转问题

以前，当在iPad上使用html文件输入控件拍摄照片时，FileReader将始终以横向返回html格式的图像，因此将根据使用exif.js提取的方向元数据值在事后旋转。

然而，现在在运行ios 13.5.1的iPad上不再如此，其中返回的图像与相机拍摄照片时的方向相同，这很好，除了它仍然包含元数据标签，这告诉我它仍然需要旋转最终结果是过度旋转的图像。

坦率地说，我不确定该怎么做，因为尝试解决此问题的任何更改都会破坏所有其他版本的ios中的功能。在下面的示例中，显示的图像直接来自相机，文本输入指示应如何旋转。我想得越多，我就越确信这实际上是ios的缺陷，而不是我应该在html中处理的问题。

编辑：似乎代码片段无法从此处工作，此处位于粘贴中：

<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>

简而言之，这与此处列出的问题相同： stackoverflow exif-orientation-issue-in-safari-mobile

1：Safari Mobile 中的 EXIF 方向问题 TL/DR 是浏览器的行为发生了变化，其中 CSS 样式"图像方向"的默认值实际上已从"无"更改为"从图像"因此，它始终根据 EXIF 数据旋转图像，而不必直接解释 EXIF 数据。

从理论上讲，这很棒，除了我们还需要支持确实需要手动EXIF操作的旧浏览器，并且在IOS13 Safari中不支持将行为更改回"无"(如下所示：caniuse.com(。所以最终结果是它看起来像是在做双重旋转，因为它根据上面列出的 CSS 样式执行一次，一次是因为我仍然需要支持运行早期版本 IOS 的 iPad。

相关内容

最新更新

热门标签：