【学海拾贝】苹果手机拍照照片旋转问题及解决方案

【学海拾贝】是一个标签,用来记录我工做中碰到过的问题,在空闲时探索它的缘由及原理

由来

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种状况:

1. 只显示,那么获得旋转方向后,修改 css 便可
2. 后端能够修改,那么前端就不须要多花心思了
3. 须要前端修改,传递正确的图片给后端

而关于状况 3,个人思路 是使用 canvas 旋转图片的方向,获得正真的正向的图片

我以前修改完成后,写过了一个库专门解决这种状况:
https://github.com/Grewer/app...

参考
https://stackoverflow.com/que...