以前,在iPad上使用html文件输入控件拍摄照片时,FileReader始终会以横向返回html图像,因此基于exif提取的方向元数据值后,FileReader将会旋转。 .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>
答案 0 :(得分:0)
简而言之,这与此处列出的问题相同:stackoverflow exif-orientation-issue-in-safari-mobile
1:EXIF Orientation Issue in Safari Mobile tl / dr是浏览器的行为已更改,其中css样式“ image-orientation”的默认值实际上已从“ none”更改为'from-image'因此,它总是根据EXIF数据旋转图像,而不必直接解释EXIF数据。
从理论上讲,这非常棒,除了以下事实:我们还需要支持较旧的浏览器,并且确实需要手动EXIF操纵,并且在IOS13中,Safari不支持将行为改回“无”(如此处所示) :caniuse.com)。因此最终结果是它看起来像是在进行两次旋转,因为它一次正是基于上面列出的CSS样式进行的,而一次是因为我仍然需要支持运行IOS早期版本的iPad。