【学海拾贝】是一个标签,用来记录我工作中碰到过的问题,在空闲时探索它的原因及原理
由来
2 年前我做 h5 项目的时候,遇到了上传图片的功能实现,于是就用了
<input type="file" name="upload"> 这个标签来实现图片的上传
当我点击标签,选择拍照的时候,发现出现的图片和拍照出来是不一样的,它的方向发生了旋转,这样就和拍照的样子不一样了
原因
照片生成的图片中会有一个数据 EXIF , 这就是偏转值, 它会影响图片的方向
至于原因,为什么会出现这个问题
就是在你拍照的时候可能采用了手机水平的角度，导致陀螺仪自动把角度横过来了，就是你说的90°。
当然如果你想拍一个桌子上的物品想用一个水平的角度，只要你小心翼翼地把手机放水平，陀螺仪是不会自动横屏的。
但是作为技术是无法强制用户去这么做的,所以只能做对应的解决
解决思路
当系统接收到一张图片的时候,首先得知道他到底是不是旋转着的,这里就需要解决问题 1,再就是如果是旋转的那么怎么改正,这就是问题 2
解决方案
关于问题 1,这里有一段代码可以解决:
function getOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8)
{
return callback(-2);
}
var length = view.byteLength, offset = 2;
while (offset < length)
{
if (view.getUint16(offset+2, false) <= 8) return callback(-1);
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1)
{
if (view.getUint32(offset += 2, false) != 0x45786966)
{
return callback(-1);
}
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
{
if (view.getUint16(offset + (i * 12), little) == 0x0112)
{
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
}
}
else if ((marker & 0xFF00) != 0xFF00)
{
break;
}
else
{
offset += view.getUint16(offset, false);
}
}
return callback(-1);
};
reader.readAsArrayBuffer(file);
}
// usage:
var input = document.getElementById('input');
input.onchange = function(e) {
getOrientation(input.files[0], function(orientation) {
alert('orientation: ' + orientation);
});
}
从这里就能够解决问题 1
而关于问题 2,有3种情况:
- 只显示,那么得到旋转方向后,修改 css 即可
- 后端可以修改,那么前端就不需要多花心思了
- 需要前端修改,传递正确的图片给后端
而关于情况 3,我的思路 是使用 canvas 旋转图片的方向,得到正真的正向的图片
我之前修改完成后,写过了一个库专门解决这种情况:
https://github.com/Grewer/appleCameraFix