时间戳

首页 > 解决方案 > 来自 iPad 13.5.1 版本的 HTML 中相机的图像旋转问题

javascript - 来自 iPad 13.5.1 版本的 HTML 中相机的图像旋转问题

问题描述

以前在 iPad 上使用 html 文件输入控件拍照时，FileReader 总是会以横向返回 html 中的图像，因此会在事后根据使用 exif.js 提取的方向元数据值进行旋转。

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

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

编辑：看起来代码片段在这里不起作用，它在一个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>

标签： javascripthtmlios

解决方案

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

1：Safari Mobile 中的 EXIF 方向问题tl/dr 是浏览器的行为发生了变化，其中 css 样式“图像方向”的默认值实际上已从“无”更改为“来自图像”所以它总是根据 EXIF 数据旋转图像，而无需直接解释 EXIF 数据。

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

推荐阅读