【學海拾貝】蘋果手機拍照照片旋轉問題及解決方案

【學海拾貝】是一個標籤,用來記錄我工做中碰到過的問題,在空閒時探索它的緣由及原理

由來

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...