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