13.5.1版iPad中HTML图像旋转问题
以前，当使用iPad上的html文件输入控件来拍摄照片时，基于使用exif.js提取的方向元数据值，FileReader将总是以横向返回html格式的图像，并且因此将在事实之后旋转。
然而，现在在运行iOS13.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>
回答 1
Stack Overflow用户
发布于 2020-09-14 11:17:49
简而言之，这与这里列出的问题是相同的：stackoverflow exif-orientation-issue-in-safari-mobile
1：EXIF Orientation Issue in Safari Mobile tl/dr是浏览器的行为已经改变，其中css样式的缺省值“图像方向”实际上已经从“无”更改为“从图像”，因此它总是基于EXIF数据旋转图像，而不必直接解释EXIF数据。
从理论上讲，这是很棒的，除了我们需要支持需要手动EXIF操作的旧浏览器，并且在IOS13 Safari中不支持将行为改回“无”(如这里所示：caniuse.com)。因此，最终的结果是，它看起来像是在做一个双旋转，因为它确实是这样做的，一次是基于上面列出的CSS样式，另一次是因为我仍然需要支持运行IOS早期版本的iPads。
https://stackoverflow.com/questions/62317681
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号