ios手机竖屏拍照图片旋转90°问题解决方法

• 产生原因

手机拍照会给图片添加一个Orientaion信息（即拍照方向），如下：

此信息依据于exif.js

1代表正常的拍摄角度，ios横屏下拍摄、安卓机无论横屏竖屏拍摄，Orientaion的值都为1；但是ios竖屏拍摄，Orientaion的值为6，即竖着拍出的照片被添加了一个顺时针旋转90°的拍照方向，显示的时候其实就是横着拍的照片顺时针旋转90°而成。当我们对拍出来的照片进行处理后，这个拍摄方向Orientaion信息就会丢失，显示的效果自然回到横屏状态，看起来像是逆时针旋转了90°。

• 解决思路

获取拍摄方向（图片旋转的角度） → 将图片旋转到正确的角度 → canvas绘制出正确角度的图 → 使用（展示，上传等）

• 代码实现

// 获取图片旋转的角度
function getOrientation(file, callback) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    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) {
            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);
    };
}

// 将图片旋转到正确的角度
function resetOrientation(srcBase64, srcOrientation, callback) {
    var img = new Image();
    img.onload = function () {
        var width = img.width,
            height = img.height,
            canvas = document.createElement('canvas'),
            ctx = canvas.getContext("2d");
        // set proper canvas dimensions before transform & export
        if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) {
            canvas.width = height;
            canvas.height = width;
        } else {
            canvas.width = width;
            canvas.height = height;
        }
        // transform context before drawing image
        switch (srcOrientation) {
            case 2:
                ctx.transform(-1, 0, 0, 1, width, 0);
                break;
            case 3:
                ctx.transform(-1, 0, 0, -1, width, height);
                break;
            case 4:
                ctx.transform(1, 0, 0, -1, 0, height);
                break;
            case 5:
                ctx.transform(0, 1, 1, 0, 0, 0);
                break;
            case 6:
                ctx.transform(0, 1, -1, 0, height, 0);
                break;
            case 7:
                ctx.transform(0, -1, -1, 0, height, width);
                break;
            case 8:
                ctx.transform(0, -1, 1, 0, 0, width);
                break;
            default:
                ctx.transform(1, 0, 0, 1, 0, 0);
        }
        // draw image
        ctx.drawImage(img, 0, 0);
        // export base64
        callback(canvas.toDataURL('image/jpeg'));
    };
    img.src = srcBase64;
};
//调用
getOrientation(file, function (orientation) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (evt) {
        var base64 = evt.target.result;
        // 将图片旋转到正确的角度
        resetOrientation(base64, orientation, function (src) {
            //src是图片旋转到正确的角度后的base64数据的URL
            //拿到src后继续做相关操作
        });
    };
});

参考：
iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案 --- by 任无名F